無序列表是html頁面排版經常用到的非常實用的標簽,但是新手在使用無序列表時,經常會在橫向排版上出現問題,筆者在這裡提供了筆者在使用無序列表製作網頁導航欄時的幾種方法與常見問題的解決問題。(以css內部樣式為例) [註:有同學之前問過我怎麼製作一張網頁,但只會html,本文用到均為css。故說明:若 ...
無序列表是html頁面排版經常用到的非常實用的標簽,但是新手在使用無序列表時,經常會在橫向排版上出現問題,筆者在這裡提供了筆者在使用無序列表製作網頁導航欄時的幾種方法與常見問題的解決問題。(以css內部樣式為例)
[註:有同學之前問過我怎麼製作一張網頁,但只會html,本文用到均為css。故說明:若急需製作導航,無css技術基礎的,在<head>標簽中加<style rel="stylesheet" type="text/css"><style>,再將css寫入其中就行了。需要按鍵代碼,可在最後看到。]
1.通過<li>標簽設置浮動排列。
①使用方法:在css樣式中加入float:left;屬性。
②常見問題:當網頁頁面有調整時導航同時改變,排版變混亂。
③解決方法:⑴在筆者接觸的網站學習中比較常見方法有對li標簽進行絕對定位,然後調節left大小。
這種方式比較王道,利於單個修改。但是對於網頁要求低的,可能偏麻煩。
⑵基於自身實驗,筆者提出一個十分簡單的方法
可以通過<div>標簽設置格式,方法十分簡單,只要把div的whith值設成等於或者大於網頁最大長度即可。
2.第二種方法:
①利用<li>標簽的display屬性的inline屬性值達到同行排列。同時可以通過對margin,padding值修改距離。
②問題與解決方法與第一種相同。
3.第三種方法:
①完全使用絕對定位,適用於對按鈕位置有特殊要求。(由於比較麻煩,而且一般導航都是一列,所以並不推薦,但是需要的朋友還是很好用的)
②一般不會出現排版問題
③優點:穩定,版面一般不會出問題,自由度高。缺點:不如前面的統一規整,相對麻煩,排版麻煩。
以上就是筆者整理出的所有內容。不能保證一定全面與精確,所以還請有更好方法的博友可以留言,有錯誤需要指出的也希望各位多多指教,本文旨在幫助和筆者一樣在學習前期遇到困難的博友。謝謝各位啦n(*≧▽≦*)n。
前面說的按鈕代碼:
a{ position: relative; overflow: hidden;
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 10px;
margin: 4px;
width: 80px;
}