<output id="jbxdv"></output>

      1. 如何在網頁設計中設計蘋果風格菜單

        • 2019-08-23 09:33:53
        • 閱讀次數:
        • 作者:盈嵐科技小編
        • 來源:http://www.freenetsites.com

        蘋果菜單風格:簡潔、優雅、圓潤。這種設計風格比較流行,本示例模仿蘋果風格設計導航菜單樣式。

        【操作步驟】

        第1步,構建網頁基本結構。在本示例中構建了一個無序列表結構。

        <div id="nav">

        <ul>        

        <li class="n01"><a href="#">index</a></li>        

        <li class="n02"><a href="#">Store</a></li>        

        <li class="n03"><a href="#">Mac</a></li>        

        <li class="n04"><a href="#">iPod + iTunes</a></li>        

        <li class="n05"><a href="#">iPhone</a></li>        

        <li class="n06"><a href="#">Downloads</a></li>    

        </ul>

        </div>

        第2步,設置標簽默認樣式。

        html, body {    

        height:100%;    

        background:#fff;}body {    

        font:12px "宋體", Arial, sans-serif;    

        color:#333;

        }

        body, form, menu, dir, fieldset, blockquote, p, pre, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6 {    

        padding:0;    

        margin:0;}

        ul, ol, dl {    

        list-style:none;}

        以上代碼中,首先設置了html和body樣式,然后統一常用標簽的樣式,設置它們的邊界都為0,并清除列表結構的項目符號。。

        第3步,定義導航菜單樣式。

        #nav {    

        width:490px;    

        height:38px;    

        margin:15px 0 0 10px;

        overflow:hidden;    

        background:url(images/globalnavbg.png) no-repeat;}

        #nav li, #nav li a {    

        float:left;    

        display:block;    

        width:117px;    

        height:38px;    

        background:#fff;}#nav li a {    

        width:100%;   

         text-indent:-9999px;    

        background:url(images/globalnavbg.png) no-repeat 0 0;}

        以上代碼中,首先定義了導航菜單包含框樣式,定義固定寬度和高度,設置背景圖,通過overflow: hidden聲明隱藏超出區域的內容。設置列表項目和錨點浮動顯示,實現并列顯示,設置display為塊顯示,同時為錨點設置背景圖像,通過text-indent屬性隱藏文字。

        第4步,為每個列表項目定位背景圖像的顯示位置。

        #nav .n01 { width:118px; }

        #nav .n01 a:visited { background-position:0 -114px; }

        #nav .n01 a:hover { background-position:0 -38px; }

        #nav .n01 a:active { background-position:0 -76px; }

        #nav .n02 a:link { background-position:-118px 0; }

        #nav .n02 a:visited { background-position:-118px -114px; }

        #nav .n02 a:hover { background-position:-118px -38px; }

        #nav .n02 a:active { background-position:-118px -76px; }

        #nav .n03 a:link { background-position:-235px 0; }

        #nav .n03 a:visited { background-position:-235px -114px; }

        #nav .n03 a:hover { background-position:-235px -38px; }

        #nav .n03 a:active { background-position:-235px -76px; }

        #nav .n04 a:link { background-position:-352px 0; }

        #nav .n04 a:visited { background-position:-352px -114px; }

        #nav .n04 a:hover { background-position:-352px -38px; }

        #nav .n04 a:active { background-position:-352px -76px; }

        #nav .n05 a:link { background-position:-469px 0; }

        #nav .n05 a:visited { background-position:-469px -114px; }

        #nav .n05 a:hover { background-position:-469px -38px; }

        #nav .n05 a:active { background-position:-469px -76px; }

        #nav .n06 a:link { background-position:-586px 0; }

        #nav .n06 a:visited { background-position:-586px -114px; }

        #nav .n06 a:hover { background-position:-586px -38px; }

        #nav .n06 a:active { background-position:-586px -76px; }

        從以上代碼可以看到,定義了6個樣式類,利用包含選擇器,為每個錨點定義不同偽類狀態下的樣式。

        【拓展】在以用戶體驗為中心的網頁設計時代,很多用戶會因為打開網頁速度太慢而關閉網頁。網頁提速有很多的方法,其中一條就是減少HTTP請求。每一個網站都會用到圖片,當一個網站有10張單獨的圖片,就意味著在瀏覽網站時會向服務器提出10次http請求來加載圖片。在CSS設計中,一般使用CSS Sprites技巧減少圖片請求的方法,該方法也稱之為CSS精靈。簡單描述就是,將多張小圖片合成為一張大圖片,減少HTTP請求次數而達到網頁提速。

        下面以淘寶網為例子,為大家講解下CSS Sprites是如何實現的。如果要在網頁上顯示“今日淘寶活動”這個圖片。

        實現代碼如下:

        <div style="width:107px; height:134px; background:url(sprites.gif) no-repeat -133px -153px"></div>   

        ?width:要定位圖片的寬度。   

        ?height:要定位圖片的高度。CSS Sprites要求必須定義容器的大小,不然會顯示出錯。

        ?background:url(sprites.gif)定義背景圖片的路徑,no-repeat定義背景不重復,-133px定義X坐標的位置,-153px定義y坐標的位置。

        可能有人會不明白這個-133px和-153px是怎么來的,這個坐標是小圖片在大圖片中的x坐標和y左邊坐標,如圖3.46所示。紅色點的坐標是在大圖上x坐標為133px,y坐標為153px。坐標也可以用百分比表示,如50% 50%。有人會提出,為什么坐標是正數,這里卻寫成了負數呢?

        因為在設計網頁時用background定義背景圖片,默認x、y坐標是0、0。

        所以要用-133px、-153px才能正確地顯示圖片。   

        ?CSS Sprites的優點:可以減少HTTP的請求數,如10張單獨的圖片就會發出10次的HTTP請求,合成為一張大圖片,只會發出一次的HTTP請求,從而提高了網頁加載速度。   

        ?CSS Sprites的缺點:由于在網站建設時每次圖片改動都要往這張圖片添加內容,圖片的坐標定位要很準確,稍顯繁瑣。坐標定位要固定為某個絕對值,因此會失去一些靈活性。CSS Sprites有優點也有缺點。要不要使用,具體要看網頁以加載速度為主,還是以維護方便容易為主。

        當前文章標題:如何在網頁設計中設計蘋果風格菜單

        當前URL:http://www.freenetsites.com/news/wzzz/3081.html

        上一篇:在網頁設計中定義菜單樣式

        下一篇:如何在網頁設計中設計選項卡

        網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
        国产成人亚洲综合无码
        <output id="jbxdv"></output>