li的简单应用 - 站长资源库


答案：作者:eoe 
虽然自己天天写CSS~~ 
可是来了原创文章这里~~不知道要写什么~~ 

今天就先写个LI 的简单应用~~以后慢慢加好了 

这是一个普通的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的简单应用</title> 
</head> 
<body> 
<div id="test"> 
<ul> 
  <li>测试列表的 
</li> 
  <li>测试列表的 
</li> 
  <li>测试列表的 
</li> 
  <li>测试列表的 
</li> 
</ul> 
</div> 
</body> 
</html> 
   提示：你可以先修改部分代码再运行 

加了点CSS样式定义可以这样 


  引用:  
*{margin:0;padding:0;} 习惯性把所有的元素的内补丁外补丁定义为0 
0可以没有单位~~理论上是要单位的~不过0px 0pt 0em 都是0 所以~懒了~~ 

#test ul li 是 包含选择符 
定义ID为test 里面的ul里的li 
margin:~在基本所有的浏览器解析都是一样~ 
这里之所有要写两个是因为~ 
在li里面有我用到border,IE5.x对border的解析与其他浏览器不一样 
margin/**/: 这样的话~IE5.x是不认识的~~ 
当然还有其他的写法如: 
voice-family :   "\"}\"";voice-family :inherit;等~ 
可参考http://bbs.51js.com/viewthread.php?tid=50475&fpage=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的简单应用</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 ಌ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> 
   提示：你可以先修改部分代码再运行 

再加上类如日期之类的内容 


  引用:  
span定义为float:right 他会跟在后面  




<!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的简单应用</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 ಌ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> 
   提示：你可以先修改部分代码再运行 

再加更多的内容 
<!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的简单应用</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 ಌpx/1em  helvetica,Arial, verdana; 
border:1px #004080 solid; 
} 
#test ul li h4 
{ 
font:normal  normal normal ಌ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>
上一个：什么是XHTML?
下一个：CSS条件注释的使用详解教材
更多图片编程知识: