div+css 布局–清除浮動

今天和大家分享下，頁面的布局，首先我們來分析以下網頁的基本機構，我們來分析下李寧官網，企業官網，結構都很相似。

看第一部分導航，分為倆個部分，第1部分和第2部分，面對這樣的結構，我們通常會用到float,倆個div,一個向左浮動，一個向右浮動


通常我們都會先會把頁面結構寫出來，然后再寫對應的樣式，要重點提一下，子元素使用float的時候，父元素要加上clearfix清除浮動，或者在父元素里面再加一個div,加上clear:both樣式，但是通常我們都會使用clearfix來清除浮動，這樣比較方便。

獎狀制作

cool的女朋友馬上要過生日了，作為前端開發的“大師級”，自然要有我們的逼格，給女朋友準備一份特別的禮物–最佳女朋友獎，自己動手，豐衣足食。
首先貼上最后的效果，有喜歡的也可以給自己的女朋友做一個練練手，替換以下背景，和相應的圖片就可以了。
首先我們先寫好結構

打開瀏覽器瞅一瞅，頁面時啥樣子

這個是啥鬼東西，把這個交給女朋友會被打死吧，那我們優化下
首先標題“獎狀”字眼，我們需要要讓他居中顯示，字號再大點，文字之間要有點距離，距離頂部再有點距離，然后我們標題加上這樣的樣式

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

標題處理好了，再處理接下來的表彰語句，我么需要縮進2個字符，然后文字也再大點，文字從左邊開始，但是要有點邊距，距離右邊也有邊距，所以考慮到，我們需要在大的外部容器需要設置上padding值，加上padding之后，div的寬度會發生變化，要想寬度保證不變，需要給容器加上box-sizing:border-box,這個之前也說過

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

接下來就是稱號設置，我們要讓他字號變大，且居中顯示，文字之間有間距

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

最后就是頒獎日期、頒獎單位，以及蓋章了，我們需要印章需要蓋住日期和單位，這就要用到之前學過的定位的樣式，我們來看下怎么寫

.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; }

首先父級容器設置position:relative;子元素設置position:absolute;通過left,top找到放置的位置。

最后再稍微調整下頁面，感覺看起來內容還是偏上，再改下外層容器的padding-top的值，最后結果如下

附上完整的樣式和代碼

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。