完美世界有声小说全集,我欲封天耳根小说零,官场小说排行榜

li的簡單應(yīng)用

作者:eoe
雖然自己天天寫CSS~~
可是來了原創(chuàng)文章這里~~不知道要寫什么~~

今天就先寫個(gè)LI 的簡單應(yīng)用~~以后慢慢加好了

這是一個(gè)普通的LI
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
html xmlns="http://www.w3.org/1999/xhtml">
head>
title>li的簡單應(yīng)用/title>
/head>
body>
div id="test">
ul>
  li>測試列表的
/li>
  li>測試列表的
/li>
  li>測試列表的
/li>
  li>測試列表的
/li>
/ul>
/div>
/body>
/html>
   提示：你可以先修改部分代碼再運(yùn)行

加了點(diǎn)CSS樣式定義可以這樣

  引用:
*{margin:0;padding:0;} 習(xí)慣性把所有的元素的內(nèi)補(bǔ)丁外補(bǔ)丁定義為0
0可以沒有單位~~理論上是要單位的~不過0px 0pt 0em 都是0 所以~懶了~~

#test ul li 是包含選擇符
定義ID為test 里面的ul里的li
margin:~在基本所有的瀏覽器解析都是一樣~
這里之所有要寫兩個(gè)是因?yàn)閪
在li里面有我用到border,IE5.x對border的解析與其他瀏覽器不一樣
margin/**/: 這樣的話~IE5.x是不認(rèn)識(shí)的~~
當(dāng)然還有其他的寫法如:
voice-family :   "\"}\"";voice-family :inherit;等~
可參考http://bbs.51js.com/viewthread.php?tid=50475fpage=1

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
html xmlns="http://www.w3.org/1999/xhtml">
head>
title>li的簡單應(yīng)用/title>
style type="text/css">
*{margin:0;padding:0;}
#test
{
width:300px;
margin:5px;
}
#test ul li
{
margin:3px;/* for IE5.x*/
margin/*\*/:1px;
list-style-type:none;
font:normal  normal normal #3212;px/2em  helvetica,Arial, verdana;
border:1px #004080 solid;
background: #fefefe url('http://bbs.51js.com/images/smilies/icon1.gif')  no-repeat left center;
padding-left:20px;

}

/style>
/head>
body>
div id="test">
ul>
  li>測試列表的
/li>
  li>測試列表的
/li>
  li>測試列表的
/li>
  li>測試列表的
/li>
/ul>
/div>
/body>
/html>
   提示：你可以先修改部分代碼再運(yùn)行

再加上類如日期之類的內(nèi)容

  引用:
span定義為float:right 他會(huì)跟在后面

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
html xmlns="http://www.w3.org/1999/xhtml">
head>
title>li的簡單應(yīng)用/title>
style type="text/css">
*{margin:0;padding:0;}
#test
{
width:300px;
margin:5px;
}
#test ul li
{
margin:3px;/* for IE5.x*/
margin/*\*/:1px;
list-style-type:none;
font:normal  normal normal #3212;px/2em  helvetica,Arial, verdana;
border:1px #004080 solid;
background: #fefefe url('http://bbs.51js.com/images/smilies/icon1.gif')  no-repeat left center;
padding-left:20px;

}
#test ul li span
{
margin:0px 5px;
float:right;
}
/style>
/head>
body>
div id="test">
ul>
  li>span>12-11/span>測試列表的
/li>
  li>span>12-11/span>測試列表的
/li>
  li>span>12-11/span>測試列表的
/li>
  li>span>12-11/span>測試列表的
/li>
/ul>
/div>
/body>
/html>
   提示：你可以先修改部分代碼再運(yùn)行

再加更多的內(nèi)容
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
html xmlns="http://www.w3.org/1999/xhtml">
head>
title>li的簡單應(yīng)用/title>
style type="text/css">
*{margin:0;padding:0;}
#test
{
width:300px;
margin:5px;
}
#test ul li
{
margin:3px;/* for IE5.x*/
margin/*\*/:1px;
list-style-type:none;
font:normal  normal normal #3212;px/1em  helvetica,Arial, verdana;
border:1px #004080 solid;
}
#test ul li h4
{
font:normal  normal normal #3212;px/2em  helvetica,Arial, verdana;
padding-left:20px;
background: #fefefe url('http://bbs.51js.com/images/smilies/icon1.gif')  no-repeat left center;

}
#test ul li p
{
padding:2px;
}
#test ul li span
{
margin:0px 5px;
float:right;
}
/style>
/head>
body>
div id="test">
ul>
  li>h4>span>12-11/span>測試列表的/h4>
p>測試列表的測試列表的測試列表的測試列表的測試列表的/p>
/li>
  li>h4>span>12-11/span>測試列表的/h4>
p>測試列表的測試列表的測試列表的/p>
/li>
  li>h4>span>12-11/span>測試列表的/h4>
p>測試列表的測試列表的測試列表的/p>
/li>
  li>h4>span>12-11/span>測試列表的/h4>
p>測試列表的測試列表的測試列表的/p>
/li>
/ul>
/div>
/body>
/html>

標(biāo)簽：海東遼源陽泉南充喀什濱州邯鄲東莞

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《li的簡單應(yīng)用》，本文關(guān)鍵詞的,簡單,應(yīng)用,的,簡單,應(yīng)用,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。

濮阳杆衣贸易有限公司

li的簡單應(yīng)用