Question to say "I can!"

div+css(ul li 屬性的使用和說明)

2012-07-29

今天用到序列圓點的,直接用<li></li>的通不過w3c檢測,必須和ul或ol結合使用,但問題是用了ul后左邊空 出了很多。而且圓點是在內容外面的(形成段落的形式),本來的格式是圓點和文字在一起的,后來經過討論還是在外面的好看。而用css定義的圓點還是可以用 屬性來變換的(可以是空心或實心等),不同操作系統會顯示按操作系統的習慣顯示(圓或方不同)。

下面是用到的代碼:

<div><ul>
<li><span>zreading的作品</span> ul和li的使用,靈活方便<br /></li>
<li><span>流風,飄然的風</span> 多學點知識,多研究下技術對自己有好處<br /></li></ul></div>

--------------------------------

css對應的定義:

ul{
margin-left: 15px;margin-bottom: 0px;
}
li{
list-style-type:disc;
}

----------------

參考資料:

list-style-type的用法

語法:
list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin
取值:
disc : CSS1 默認值。實心圓
circle : CSS1 空心圓
square : CSS1 實心方塊
decimal : CSS1 阿拉伯數字
lower-roman : CSS1 小寫羅馬數字
upper-roman : CSS1 大寫羅馬數字
lower-alpha : CSS1 小寫英文字母
upper-alpha : CSS1 大寫英文字母
none : CSS1 不使用項目符號
armenianl : CSS2 未支持。傳統的亞美尼亞數字
cjk-ideographic : CSS2 未支持。淺白的表意數字
georgian : CSS2 未支持。傳統的喬治數字
lower-greek : CSS2 未支持。基本的希臘小寫字母
hebrew : CSS2 未支持。傳統的希伯萊數字
hiragana : CSS2 未支持。日文平假名字符
hiragana-iroha : CSS2 未支持。日文平假名序號
katakana : CSS2 未支持。日文片假名字符
katakana-iroha : CSS2 未支持。日文片假名序號
lower-latin : CSS2 未支持。小寫拉丁字母
upper-latin : CSS2 未支持。大寫拉丁字母

-------------------

LI代碼的格式化:

A).運用CSS格式化列表符:

ul li{
list-style-type:none;
}

B).如果你想將列表符換成圖像,則:

ul li{
list-style-type:none;
list-style-image: url(images/icon.gif);
}

C).為了左對齊,可以用如下代碼:

ul{
list-style-type:none;
margin:0px;
}

D).如果想給列表加背景色,可以用如下代碼:

ul{
list-style-type: none;
margin:0px;
}
ul li{
background:#CCC;
}

E).如果想給列表加MOUSEOVER背景變色效果,可以用如下代碼:

ul{ list-style-type: none; margin:0px; }
ul li a{ display:block; width: 100%; background:#ccc; }
ul li a:hover{ background:#999; }

說明:display:block;這一行必須要加的,這樣才能塊狀顯示!

F).LI中的元素水平排列,關鍵FLOAT:LEFT:

ul{
list-style-type:none;
width:100%;
}
ul li{
width:80px;
float:left;
}

 

例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ul和li應用</title>
<style type="text/css">
#menu{width:1000px;height:35px;float:right;margin:0px; clear:both; vertical-align: bottom;}
#ft li{list-style-type:none; clear:both;width:100px;display:inline; font-size: larger;}
#myul li{float:left;width:100px;}
#fit li{list-style-type:decimal;}
</style>
</head>
<body>
<div id="menu">
<ul id="ft">
<li><a title="" href="http://localhost:1435/BookShop/index.aspx">首頁 </a></li>
<li><a title="" href="http://localhost:1435/BookShop/hybooks.aspx">圖書 </a></li>
<li><a title="" href="http://localhost:1435/BookShop/Clothing.aspx">服飾 </a></li>
<li><a title="" href="http://localhost:1435/BookShop/">會所 </a></li>
<li><a title="" href="http://localhost:1435/BookShop/">媽咪寶貝 </a></li>
<li><a title="" href="http://localhost:1435/BookShop/">禮品書籍 </a></li>
<li><a title="" href="http://localhost:1435/BookShop/">新聞資訊 </a></li>
<li><a title="" href="http://localhost:1435/BookShop/">用戶留言 </a></li>
<li><a title="" href="http://localhost:1435/BookShop/">聯系我們 </a></li>
</ul>
</div>
<div>fit的應用
<ul id="fit">
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
</div>
<div>
<ul>
<li style="list-style-type:none;">去掉圓點</li>
<li style="display:inline;">hello</li>
<li>hello</li>
<li style="display:inline;">hello</li>
</ul>
</div>
<!--橫向的方法,如果要居中,需要設置寬度才可以,這個寬度要和里面的li總長度一樣。-->
<div style="text-align:center;background:#def">
<ul style="width:150px;background:#eee;">
<li style="float:left;">hello</li>
<li style="float:left;">hello</li>
<li style="float:left;">hello</li>
<li style="float:left;">hello</li>
<li style="float:left;">hello</li>
</ul>
</div>
<!--制作表格的原理,ul寬度為300px,li寬度為100px,則成三列-->
<div style="text-align:center;background:#eef">
<ul id="myul" style="width:300px;background:#eee">
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
</div>
</body>
</html>

作者:admin | Categories:設計問題 | Tags:

一條評論

  1. 為什么在網頁編輯器中加編輯器中顯示點點,實際效果不顯示。

發表評論

電子郵件地址不會被公開。 必填項已用*標注

*

澳洲f1赛车b盘开奖套路 北京快三玩法介绍 b站股票代码 广西快乐双彩开奖情况 陕西11选5规则 北京11选5一小时开几期 极速赛车计划 广东好彩1玩法说明 股票行情300138 贵州快三推荐号码专家 杨方配资 贵州快3开奖结果爱彩乐 九鼎新材股票股吧 河北十一选五怎样买中 北京11选五开奖结果走势图 鑫发配资 河北快3app