• <ins id="pjuwb"></ins>
    <blockquote id="pjuwb"><pre id="pjuwb"></pre></blockquote>
    <noscript id="pjuwb"></noscript>
          <sup id="pjuwb"><pre id="pjuwb"></pre></sup>
            <dd id="pjuwb"></dd>
            <abbr id="pjuwb"></abbr>

            逛奔的蝸牛

            我不聰明,但我會很努力

               ::  :: 新隨筆 ::  ::  :: 管理 ::



            使用滑動門技術實現圓角按鈕,如圖所示,背景圖和效果圖。
            所謂滑動門,就是當按鈕的狀態改變時,移動背景圖,顯示不同的狀態。此法簡單有效,但缺點是不能縱向擴展。要處理縱向擴展,就要使用復雜的圓解技術,如4個圓角圖片,四個邊的圖片加上中間的圖片一共9張圖來實現。

            <html>
            <head>
                <style type='text/css'>
                body {
                    font-size: 23px;
                }
                .button {
                    cursor: default;
                    font-size: 15px;
                    background: url(button.png) no-repeat top right;
                    display: inline-block; /* inline element has layout */
                    /* float: right;*/ /* Can also be not float. */
                   
                    height: 24px; /* height of the background image */
                    padding-right: 15px;
                    white-space:nowrap; /* Don't wrap line */
                    line-height: 24px; /* Vertically centralize the text */
                   
                    -moz-user-select:none; /* Don't select text */
                    -webkit-user-select:none;
                }
               
                .button .inner {
                    background: url(button.png) no-repeat top left;
                    display: inline-block;
                   
                    height: 24px;
                    white-space:nowrap;
                    line-height: 24px;
                    padding-left: 15px;
                }
               
                span.button:hover {
                    text-shadow: 0px 0px 5px #999;
                }
               
                span.button:hover span {
                }
               
                span.button:active {
                    text-shadow: 0px 0px 5px #333;
                    background-position: right bottom;
                }
               
                span.button:active span.inner {
                    background-position: left bottom;
                }
               
                </style>
                <script src="js/jquery.js"></script>
                <script type="text/javascript"></script>
            </head>
            <body>
                <span class="button"><span class="inner">The text of the button is very long</span></span>
            </body>
            </html>

            不使用a來做按鈕,是因為前不久在php中遇到<a href="#">xxxx</a>,點擊此鏈接,會刷新本頁,最后只好使用了span來做按鈕了,效果是一樣的,只不過a的鼠標會自動是手勢罷了,上面的文字不可選擇。

            為了防止選中文字:
                    -moz-user-select:none; /* Don't select text */
                    -webkit-user-select:none;

            為了防止按鈕中的文字換行:
                    white-space:nowrap; /* Don't wrap line */

            HTML中的元素,要么是inline的(可與其他inline元素在同一行),要么是block的(獨占一行),所以為了讓按鈕能與其他元素在同一行,還要具有block元素才有的layout功能,使用了
                    display: inline-block;

            讓按鈕上的文字居中,最好的辦法是使用 line-height,讓其與按鈕的背景圖一樣高:
                    line-height: 24px;

            由于上面使用到的一些CSS屬性都是可繼承的,所以不用重復再寫。

            posted on 2010-06-23 06:06 逛奔的蝸牛 閱讀(1398) 評論(0)  編輯 收藏 引用 所屬分類: 其他編程
            99国产欧美久久久精品蜜芽| 91秦先生久久久久久久| 久久影视综合亚洲| 成人久久免费网站| 97久久精品无码一区二区| 国产成人香蕉久久久久| 亚洲伊人久久成综合人影院 | 久久亚洲精品无码AV红樱桃| 亚洲欧美一级久久精品| 久久久久久亚洲精品成人 | 久久国产精品二国产精品| 久久人妻少妇嫩草AV无码蜜桃| 四虎久久影院| 996久久国产精品线观看| 久久天天躁狠狠躁夜夜2020 | 久久久久亚洲AV无码麻豆| 国产亚洲婷婷香蕉久久精品| 久久伊人精品青青草原高清| 久久国产亚洲精品| 久久er国产精品免费观看8| 久久精品人成免费| 一本久久a久久精品vr综合| 久久国产视频网| 狠狠干狠狠久久| 国产情侣久久久久aⅴ免费| 中文字幕日本人妻久久久免费 | 久久久久久久久久久免费精品 | 日韩人妻无码精品久久免费一| 青青青青久久精品国产| 久久精品国产男包| 伊人久久五月天| 免费一级欧美大片久久网| 久久精品嫩草影院| 久久精品国产福利国产秒| 亚洲欧洲日产国码无码久久99| 日韩精品无码久久一区二区三| 国产精品无码久久综合| 尹人香蕉久久99天天拍| 久久午夜无码鲁丝片午夜精品| 久久九色综合九色99伊人| 国产精品99久久久久久www|