我在做導(dǎo)航練習(xí)時，是查看那些已經(jīng)成功的網(wǎng)站的源代碼進(jìn)行練習(xí)，希望通過這些成功的代碼可以學(xué)習(xí)到代碼背后前端工程師們的編程思路。
在查看源代碼中我也學(xué)習(xí)了很多以前忽視的細(xì)節(jié)，覺得受益匪淺啊。
當(dāng)我打開拉勾網(wǎng)的css文件時，第一部分是用注釋的方式標(biāo)記了文檔的時間，作者以及樣式表內(nèi)部方便查看的某些元素的顏色及寬高。
第二部分是一些初始化的元素樣式，及初始化的公共類。
第三部分是網(wǎng)頁各個部分的樣式。
-
我做的第一個導(dǎo)航練習(xí)是拉勾網(wǎng)的導(dǎo)航。
lagou_nav.jpg
觀察與思考
1、這個導(dǎo)航需要寫幾層嵌套呢？
2、要不要設(shè)置寬度，還是使用100%？
3、如何居中啊？
4、登錄與注冊中間的那個細(xì)線怎么實(shí)現(xiàn)。
這些是我發(fā)現(xiàn)的問題，肯定隨著做的過程中還會有問題。 -
第一步：設(shè)計出html結(jié)構(gòu)，并為元素設(shè)置相應(yīng)的id與類
<div id='body'>
<div id="header">
<div class="wrapper">
<a class="logo" href=""></a>
<ul class="navheader reset">
<li><a href="">首頁</a></li>
<li><a href="">論壇</a></li>
<li><a href="">我的簡歷</a></li>
<li><a href="">發(fā)布職位</a></li>
</ul>
<ul class="loginTop reset">
<li><a href="">登錄</a></li>
<li>|</li>
<li><a href="">注冊</a></li>
</ul>
</div>
</div>
</div>
<div id="footer"></div>- 首先分出body與footer兩個部分。這里面還涉及相應(yīng)的height與min-height設(shè)置，但是這些又涉及一些兼容的問題，所以我就先不寫了，回頭再另寫一篇。
- 最外層嵌套使用
id='header'標(biāo)記，方便尋找里面子元素，里面就可以用class啦，.wrapper可以用作包圍元素做公共類使用。class="navheader"與class="loginTop"可以作為查找元素使用。 - ul>li>a，一般的導(dǎo)航基本上都是這樣的結(jié)構(gòu)。
- ul前的a可以以背景為圖片，做鏈接。
-
對網(wǎng)頁進(jìn)行全局的css設(shè)置。
我先寫下做導(dǎo)航時我用到的-
*{outline:none;}設(shè)置所有元素的輪廓默認(rèn)為無。 -
body,p,a,span,ul,li{margin: 0;padding: 0;}設(shè)置所有元素的內(nèi)外邊距為0。 -
ul.reset{list-style:none;}去除掉列表的默認(rèn)樣式
-
-
對導(dǎo)航進(jìn)行css設(shè)置
- 設(shè)置包圍元素樣式
#header{
background: #fafafa;
height: 60px;
min-width: 1024px;
border-top: 3px solid #00B38A;
}
#header .wrapper{
width: 1024px;
margin: 0 auto;
}
1、最外圍#header設(shè)置了導(dǎo)航的高度，以及導(dǎo)航的背景色，增添了border-top的樣式。
2、內(nèi)部.wrapper設(shè)置了寬度，外部#header設(shè)置了最小寬度，二者屬性值一樣。當(dāng)然顯示屏的寬度肯定大于1024px,這樣在加上在.wrapper里進(jìn)行margin: 0 auto;可以實(shí)現(xiàn)寬度為1024的內(nèi)容居中。 -
對導(dǎo)航元素進(jìn)行基本布局
step1.jpg
.wrapper .logo{
float: left;
margin-top: 7px;
width: 229px;
height: 43px;
background: url(image/logo.png) no-repeat;
}
.wrapper .navheader{
float: left;
margin-left: 30px;
}
.navheader li{
float: left;
}
.wrapper .loginTop{
float: right;
}
.loginTop li{
float: left;
}
1、設(shè)置logo時，圖片原來的尺寸就是229×43，所以這樣設(shè)置并不會拉伸圖片。
2、logo與導(dǎo)航菜單均左浮動，登錄注冊按鈕向右浮動。 - 對導(dǎo)航菜單進(jìn)行基本樣式修飾
注意：當(dāng)鼠標(biāo)經(jīng)過a時，需要有一個3px的border-bottom，但是這個3px不能超過#header，需要做的就是讓li的高度為60px，讓a的高度為57px，這樣當(dāng)鼠標(biāo)經(jīng)過時，顯示底邊，不會突出。
2015-01-18_200656.jpg
.navheader li{
height: 60px;
padding: 0px 20px;
}
.navheader li a{
display: block;
line-height: 57px;
text-decoration: none;
color: #999;
font-size: 20px;
}
.navheader li a:hover{
color: #333;
border-bottom: 3px solid #00B38A;
}
.loginTop li{
height: 30px;
line-height: 30px;
color: #FFF;
background: #00B38A;
}
.loginTop li a{
display: block;
line-height: 30px;
padding: 0px 10px;
color: #fff;
text-decoration:none ;
}
.loginTop li a:hover{
color: #CCEAE3;
}
1、a為行內(nèi)元素需要將他轉(zhuǎn)化為塊級元素，這樣才能夠設(shè)置高度。行內(nèi)元素如果不設(shè)置為塊級，直接設(shè)置行高，雖然也可以改變高度，并且占據(jù)文檔流，但是行高所占據(jù)的空白并不會是屬于a的。
2、細(xì)心的可以發(fā)現(xiàn)，我為每一個a只設(shè)置了行高，并沒有設(shè)置高度，因?yàn)樵贗E6、7版本的瀏覽器，我發(fā)現(xiàn)未設(shè)置高度時，我發(fā)現(xiàn)a并沒有具備真正的塊級元素具備的那樣，寬度充斥父元素。但是設(shè)置了高度后，發(fā)現(xiàn)他們一下子具備了塊級元素的特點(diǎn)。但是我們不想讓他那樣，所以我就不寫高度了。這樣效果均兼容。如果寫了呢，也很簡單只要為a補(bǔ)上一個float:left
3、ie6，并不支持png格式的圖片。。。。。 - 其實(shí)乍一看，貌似具備了長相，但是我發(fā)現(xiàn)，我鼠標(biāo)經(jīng)過菜單，菜單的變化是一個漸變的，而不是突然，。
.navheader a,.loginTop a{
transition: all .2s ease-in-out ;
-webkit-transition: all .2s ease-in-out ;
-moz-transition: all .2s ease-in-out ;
-o-transition: all .2s ease-in-out ;
}
transition這個屬性可以設(shè)置，當(dāng)某個元素的某個樣式改變時，可以進(jìn)行漸變的變化。他可以實(shí)現(xiàn)更精彩的畫面，需要學(xué)習(xí)html5的相關(guān)知識。會繼續(xù)學(xué)習(xí)的。
- 設(shè)置包圍元素樣式
