li的简单应用

编辑：rootadmin

作者:eoe 虽然自己天天写CSS~~ 可是来了原创文章这里~~不知道要写什么~~ 今天就先写个LI 的简单应用~~以后慢慢加好了这是一个普通的LI <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <html xmlns=" <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;等~ 可参考 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <html xmlns=" <head> <title>li的简单应用</title> <style type="text/css"> *{margin:0;padding:0;} #test { width:px; 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 # solid; background: #fefefe url(' no-repeat left center; padding-left:px; } </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" " <html xmlns=" <head> <title>li的简单应用</title> <style type="text/css"> *{margin:0;padding:0;} #test { width:px; 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 # solid; background: #fefefe url(' no-repeat left center; padding-left:px; } #test ul li span { margin:0px 5px; float:right; } </style> </head> <body> <div id="test"> <ul> <li><span>-</span>测试列表的 </li> <li><span>-</span>测试列表的 </li> <li><span>-</span>测试列表的 </li> <li><span>-</span>测试列表的 </li> </ul> </div> </body> </html> 提示：你可以先修改部分代码再运行再加更多的内容 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <html xmlns=" <head> <title>li的简单应用</title> <style type="text/css"> *{margin:0;padding:0;} #test { width:px; 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 # solid; } #test ul li h4 { font:normal normal normal &#;px/2em helvetica,Arial, verdana; padding-left:px; background: #fefefe url(' 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>-</span>测试列表的</h4> <p>测试列表的测试列表的测试列表的测试列表的测试列表的</p> </li> <li><h4><span>-</span>测试列表的</h4> <p>测试列表的测试列表的测试列表的</p> </li> <li><h4><span>-</span>测试列表的</h4> <p>测试列表的测试列表的测试列表的</p> </li> <li><h4><span>-</span>测试列表的</h4> <p>测试列表的测试列表的测试列表的</p> </li> </ul> </div> </body> </html>

推荐整理分享li的简单应用，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

让人不得不佩服的CSS效果作者：eoe1.寻寻觅觅先要找个到好效果~才能抄如

web打印的另类方法 web打印的另类方法选择自wfmazhenhai的Blog关键字web打印的另类方法出处相信用B/S方式做过应用的人都可能会遇到这样一个问题，如何方便、美观地实现报

用CSS实现的一张图完成的按钮效果 [Ctrl+A全选注:如需引入外部Js需刷新才能执行]用CSS实现的一张图完成的导航条游戏娱乐菜单好玩[Ctrl+A全选注:如需引入外部Js需刷新才能执行]