偶然看到收藏的，不記得出處了。
今天針對不同的網頁編寫布局寫下自己的心得：
按f12鍵，我們可以看到不同的網頁布局形式。即使是**、京東等大牌電商的**，也能看到網頁布局的不足。
主要就是**結構混亂，不能很好的讓人一眼知道編寫人員的布局思路，以致給後續的程式設計師的**維護帶來困難。
一般的網頁ui設計師在設計網頁的時候，內容塊之間都是按照某種設計規範設計的。
那麼我們在將網頁實現的過程中，最好能夠與ui
的設計思路保持一致。
下面針對ul、li、和div工具做乙個闡述：
1、對於
ul 和
li列表工具
,web
前端工程師應該很熟悉了，如果能夠巧妙運用它們的原生樣式將會使**更加簡潔高效。
先說ul、li的原生樣式：l
style: ist-style（豎向排布、li標籤內容前都自帶大黑點等）；
position: padding和margin。
這是每個標籤最重要的兩個方面，乙個就是原生樣式，另乙個就是位置關係。
一般情況下，我們會先設定：
ul ; li
去掉ul和li
的原生樣式。
接下來ul和li就可以大展身手啦！！！
碰到豎向排布的元素，我們直接採用li
即可將li
變為豎向列表元素，作用完全和
div類似。
碰到橫向排布的元素，我們直接採用li即可將li變為橫向排布元素，
而且可以避免使用div
帶來的高度塌陷問題，相當好用！！
需要注意的幾點：li在採用inline-block
的時候，如果
li標籤沒有緊挨在一起，將會在
li元素之間自動插入空格。
這樣的好處是碰到一般的文字情況，避免了自己去設定margin;
這樣的壞處是採用自己的樣式，可能margin
等資料會不精確，那有沒有解決辦法？？
當然有啦！！讀者可以嘗試在ul
元素中設定
font-size:0;
然後在li
元素中再次定義
font-size
為自己希望的字型大小，即可完美解決問題。
2、對於
div工具，大家肯定不陌生。
div僅僅擁有換行樣式作為原生樣式。簡單性鞏固了
div在網頁布局中的基礎性地位，你在設計網頁的時候，
完全不用考慮原生樣式對布局的影響，可謂最最基礎的工具了。
產生的高度塌陷問題的解決方法。
我一般採用兩種方法：1、
完美清除浮動；2、element : after
HTML標籤之div標籤
div標籤的重要作用 1 劃分區域，使 更具有邏輯性 2 可結合css針對該區域進行樣式控制 看乙個沒有使用div標籤的示例，如下 doctype html html head title 這是頁面標題 title meta name keywords content 自學h5 h3 靜夜思 h3 ...
css標籤和html標籤
一,html 標題標籤 h1,h2,h3,h4,h5,h6 段落標籤 水平線標籤 換行標籤 水平線標籤 size 水平粗細線 width 水平線寬度 align 水平線對齊方式 color 水平線顏色 字型標籤 funt size 文字大小 color 字型顏色 face 文字的字型 標籤 src ...
HTML的 a標籤 和 base標籤
一 a標籤 1 作用 用於從乙個頁面鏈結到另乙個頁面 2 格式 新聞 3 注意事項 在a標籤之間一定要寫上文字,如果沒有,那麼在頁面上找不到這個標籤。a標籤不僅可以讓文字可以點選，也可以讓也能點選跳轉。乙個a標籤必須有乙個href 屬性，否則a標籤不知道要跳轉到什麼地方。如果通過a標籤的href屬性...