css控制列表與導航的制作(水平導航條、垂直翻轉的列表、垂直導

2024-07-11 08:34:49

字體：大中小

來源：轉載

供稿：網友

復制代碼代碼如下:
<style type=”text/css”>
/*body默認是有邊距的*/
body{ margin:0;}
/*ul默認是有邊距的所以先將邊距去掉IE78只要加上margin就可以了但IE6不行所以要加上padding 可以實現所有瀏覽器的兼容*/
ul{list-style:none; margin:0; padding:0;}
</style>
<body>
<ul>
<li>奇才</li>
<li>村村</li>
<li>天干</li>
<li>才工</li>
<li>雪原</li>
</ul>
</body>

1.設置列表符號的樣式：list-style-type

none 無符號
disc 實體的小圓點。(默認)
circle 空心的小圓點。
square 實心的小方塊。
decimal 1,2,3…
lower-roman i,ii,iii…
upper-roman I,II,III…
lower-alpha a,b,c,d,e…
upper-alpha A,B,C,D,E…

復制代碼代碼如下:
<style type=”text/css”>
ul{list-style:none;}
#df{list-style:lower-roman;}
</style>
</head>
<body>
<ul>
<li id=”df”> 站在歲月的岸邊，向自己的過往打個水漂吧……</li>
<li>2011我娶你，2012我保護你，2013愛你一生，2014愛你一世！</li>
<li>人生就像一場旅行，在乎的不是目的地。而是沿途的”SB”，以及對付”SB”時的心情！</li>
<li>臭男人都喜歡騷女人。</li>
<li>系好安全帶，前方也許有場愛情正等著你。</li>
<li>枕著打印機睡，就能打印出一整夜的夢吧？</li>
</ul>
</body>

2.設置列表符號的樣式用圖片（這種方法很少用）：list-style-image

復制代碼代碼如下:
<style type=”text/css”>
body{margin:50px;}
ul{list-style:none; margin:0; padding:0; list-style-image:url(fasfas.gif); line-height:150%;}
</style>
<body>
<ul>
<li>奇才</li>
<li>村村</li>
<li>天干</li>
<li>才工</li>
<li>雪原</li>
</ul>
</body>

3.設置清單項目左右移：list-style-position
inside 清單項目較往右移。
outside 清單項目正常顯示(默認的屬性)。

4.以背景圖片作為項目列表圖標：這種方法比較好（常用），可以隨意調動

復制代碼代碼如下:
<style type=”text/css”>
body{
margin:50px;
}
ul{
list-style:none;
margin:0;
padding:0;
}
ul li{
background:url(fasfas.gif) no-repeat left 50%;/*只顯示一個*/
padding-left:20px;
}
</style>
<body>
<ul>