久久综合丝袜日本网手机版,日韩欧美中文字幕在线三区,亚洲精品国产品国语在线,极品在线观看视频婷婷

      <small id="aebxz"><menu id="aebxz"></menu></small>
    1. 在自學(xué)網(wǎng)頁(yè)設(shè)計(jì)路上:[2]如何制作簡(jiǎn)單導(dǎo)航欄

      時(shí)間:2022-07-14 00:52:05 設(shè)計(jì) 我要投稿
      • 相關(guān)推薦

      在自學(xué)網(wǎng)頁(yè)設(shè)計(jì)路上:[2]如何制作簡(jiǎn)單導(dǎo)航欄

      一個(gè)網(wǎng)頁(yè)必不可少的元素之一,導(dǎo)航,雖然各種創(chuàng)新已經(jīng)逐漸把導(dǎo)航欄的“欄”給去掉了,以非欄架的形式制作出導(dǎo)航。所以,導(dǎo)航是一個(gè)網(wǎng)頁(yè)友好的入口,要學(xué)習(xí)網(wǎng)頁(yè)制作,制作導(dǎo)航欄是必須的。

      工具/原料

      DW

      調(diào)試瀏覽器

      方法/步驟

      制作導(dǎo)航欄的一般思想是通過(guò)無(wú)序標(biāo)簽ul來(lái)實(shí)現(xiàn)的,由li來(lái)加入各個(gè)欄目,加入超鏈接,同時(shí)可以在其中加入ID標(biāo)簽,方便下步操作。

      通過(guò)外鏈樣式表導(dǎo)入基本的CSS代碼,可以實(shí)現(xiàn)導(dǎo)航欄初步效果

      通過(guò)padding內(nèi)補(bǔ)白拉開(kāi)距離。在這里也可以使用margin做出距離,但是margin有時(shí)候在計(jì)算中會(huì)出現(xiàn)疊加現(xiàn)象。所以個(gè)人習(xí)慣使用padding

      然后使用偽類實(shí)現(xiàn)兩個(gè)效果:a、去掉超鏈接下劃線;b、鼠標(biāo)經(jīng)過(guò)變換顏色。應(yīng)注意顏色的取值應(yīng)該接近但有明暗區(qū)別。

      CSS代碼匯總(方便復(fù)制嘗試)

      #container{margin:0 auto; width:800px;}

      #nav ul{list-style:none;}

      #nav ul li{float:left;}

      #nav li a{padding:7px 10px;}

      #nav li a:link,#nav li a:visited{background-color:#393; text-decoration:none;

      color:#FFF;}

      #nav li a:hover{background-color:#360;color:#999;}

      注意事項(xiàng)

      以上代碼屬于基本的導(dǎo)航欄代碼,應(yīng)該加上一些調(diào)整以適應(yīng)頁(yè)面內(nèi)容。

      推薦使用firebug等調(diào)試工具

      在自學(xué)網(wǎng)頁(yè)設(shè)計(jì)路上 (共3篇) 上一篇:如何使網(wǎng)頁(yè)自動(dòng)居... | 下一篇:如何布局網(wǎng)頁(yè)主體


      [在自學(xué)網(wǎng)頁(yè)設(shè)計(jì)路上:[2]如何制作簡(jiǎn)單導(dǎo)航欄]相關(guān)文章:

      1.大學(xué)生網(wǎng)頁(yè)制作實(shí)訓(xùn)報(bào)告心得

      【在自學(xué)網(wǎng)頁(yè)設(shè)計(jì)路上:[2]如何制作簡(jiǎn)單導(dǎo)航欄】相關(guān)文章:

      網(wǎng)頁(yè)設(shè)計(jì)制作教程《實(shí)例》207-14

      網(wǎng)頁(yè)制作教學(xué)設(shè)計(jì)07-28

      網(wǎng)頁(yè)設(shè)計(jì)與制作報(bào)告01-04

      制作網(wǎng)頁(yè)教學(xué)設(shè)計(jì)04-20

      網(wǎng)頁(yè)設(shè)計(jì)與制作心得12-12

      網(wǎng)頁(yè)制作教學(xué)設(shè)計(jì)10-01

      網(wǎng)頁(yè)制作教學(xué)設(shè)計(jì)02-25

      為什么APP導(dǎo)航欄的放置?07-10

      【熱】網(wǎng)頁(yè)設(shè)計(jì)與制作心得01-15