一、html 标签ul、li语法
html 标签ul、li语法很简单，在最外层必须用ul闭包，ul里面是li：

返回首页
前端资讯
网站优化
前端开发

当然li里面还可以b包ul:

返回首页

前端资讯
网站优化
前端开发


前端资讯

前端资讯
网站优化
前端开发


网站优化
前端开发

二、html 标签ul、li布局和应用
一般我们常常使用在文章标题列表、图片列表等有规律列表类内容排版布局
新闻列表布局
div部分：


05/11▪ jquery九宫格抽奖转盘效果 jquery老虎机抽奖效果
05/10▪ jquery抽奖大转盘 jquery移动端抽奖旋转特效 html5抽奖效果
05/10▪ jquery刮刮奖效果 html5实现刮刮奖效果
05/10▪ 纯js鼠标滑过tab选项卡切换效果
05/11▪ jquery九宫格抽奖转盘效果 jquery老虎机抽奖效果
05/10▪ jquery抽奖大转盘 jquery移动端抽奖旋转特效 html5抽奖效果
05/10▪ jquery刮刮奖效果 html5实现刮刮奖效果
05/10▪ 纯js鼠标滑过tab选项卡切换效果


css部分：
div,ul,li,a,span{margin:0;padding:0;}
ul,li{ outline:none; list-style:none;}
.box{width:500px; margin:100px auto;}
.box ul li{height:24px; line-height:24px; text-align:left; display:block;font-size:12px;color:
#333;border-bottom:solid 1px #
eee;margin-bottom:5px;}
.box ul li span{float:right; display:block;color:#999;}
图片列表布局
div部分


前端菜鸟
前端菜鸟
前端菜鸟
前端菜鸟
前端菜鸟
前端菜鸟


css部分：
.box1{width:500px; margin:100px auto;}
.box1 ul li{width:240px;float:left; display:block;margin:5px;}
.box1 ul li img{width:240px; overflow:hidden; display:block;}
.box1 ul li span{ display:block; text-align:center;color:#999;font-size:14px;padding-top:5px;}
前端菜鸟：http://www.bird100.cn/7714.html