div+css 布局–清除浮動(dòng)

今天和大家分享下，頁(yè)面的布局，首先我們來(lái)分析以下網(wǎng)頁(yè)的基本機(jī)構(gòu)，我們來(lái)分析下李寧官網(wǎng)，企業(yè)官網(wǎng)，結(jié)構(gòu)都很相似。

看第一部分導(dǎo)航，分為倆個(gè)部分，第1部分和第2部分，面對(duì)這樣的結(jié)構(gòu)，我們通常會(huì)用到float,倆個(gè)div,一個(gè)向左浮動(dòng)，一個(gè)向右浮動(dòng)


通常我們都會(huì)先會(huì)把頁(yè)面結(jié)構(gòu)寫(xiě)出來(lái)，然后再寫(xiě)對(duì)應(yīng)的樣式，要重點(diǎn)提一下，子元素使用float的時(shí)候，父元素要加上clearfix清除浮動(dòng)，或者在父元素里面再加一個(gè)div,加上clear:both樣式，但是通常我們都會(huì)使用clearfix來(lái)清除浮動(dòng)，這樣比較方便。

獎(jiǎng)狀制作

cool的女朋友馬上要過(guò)生日了，作為前端開(kāi)發(fā)的“大師級(jí)”，自然要有我們的逼格，給女朋友準(zhǔn)備一份特別的禮物–最佳女朋友獎(jiǎng)，自己動(dòng)手，豐衣足食。
首先貼上最后的效果，有喜歡的也可以給自己的女朋友做一個(gè)練練手，替換以下背景，和相應(yīng)的圖片就可以了。
首先我們先寫(xiě)好結(jié)構(gòu)

打開(kāi)瀏覽器瞅一瞅，頁(yè)面時(shí)啥樣子

這個(gè)是啥鬼東西，把這個(gè)交給女朋友會(huì)被打死吧，那我們優(yōu)化下
首先標(biāo)題“獎(jiǎng)狀”字眼，我們需要要讓他居中顯示，字號(hào)再大點(diǎn)，文字之間要有點(diǎn)距離，距離頂部再有點(diǎn)距離，然后我們標(biāo)題加上這樣的樣式

.prize h2{ text-align: center; font-size: 40px; letter-spacing: 1em; padding-top: 70px}

標(biāo)題處理好了，再處理接下來(lái)的表彰語(yǔ)句，我么需要縮進(jìn)2個(gè)字符，然后文字也再大點(diǎn)，文字從左邊開(kāi)始，但是要有點(diǎn)邊距，距離右邊也有邊距，所以考慮到，我們需要在大的外部容器需要設(shè)置上padding值，加上padding之后，div的寬度會(huì)發(fā)生變化，要想寬度保證不變，需要給容器加上box-sizing:border-box,這個(gè)之前也說(shuō)過(guò)

.prize .dis{ margin-top: 25px; font-size: 25px; letter-spacing: .2em; line-height: 50px; text-indent: 2em}

接下來(lái)就是稱號(hào)設(shè)置，我們要讓他字號(hào)變大，且居中顯示，文字之間有間距

.prize h3{ padding: 20px 0; font-size: 40px; letter-spacing: .3em; text-align: center}

最后就是頒獎(jiǎng)日期、頒獎(jiǎng)單位，以及蓋章了，我們需要印章需要蓋住日期和單位，這就要用到之前學(xué)過(guò)的定位的樣式，我們來(lái)看下怎么寫(xiě)

.prize .time{ position: relative; line-height: 40px; margin-top: 60px;} .prize .time .pm{font-size: 20px;} .prize .time img{ position: absolute; width: 200px; height: 200px; left: 60px; top: -60px; }

首先父級(jí)容器設(shè)置position:relative;子元素設(shè)置position:absolute;通過(guò)left,top找到放置的位置。

最后再稍微調(diào)整下頁(yè)面，感覺(jué)看起來(lái)內(nèi)容還是偏上，再改下外層容器的padding-top的值，最后結(jié)果如下

附上完整的樣式和代碼

怎么樣，你女朋友是不是該高興了，當(dāng)然內(nèi)容還可以自己改，自己想怎么造就怎么造，就是這么任性，是不是很酷，通過(guò)小例子，也能幫助我們更好的鞏固代碼，好了今天就到這兒了，歡迎大家來(lái)撩

總結(jié)

以上是生活随笔為你收集整理的和cool一起学前端----第八天的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。