查看: 325|回复: 2

[HTML代码] html 标签ul、li网页布局基础应用

发表于 2017-4-17 18:13:09
一直分享了前端的学习模块,今天来看看最基本的
一、html 标签ul、li语法
html 标签ul、li语法很简单,在最外层必须用ul闭包,ul里面是li:
<ul>
<li>返回首页</li>
<li>前端资讯</li>
<li>网站优化</li>
<li>前端开发</li>
</ul>
当然li里面还可以b包ul:
<ul>
<li>返回首页
<ul>
<li>前端资讯</li>
<li>网站优化</li>
<li>前端开发</li>
</ul>
</li>
<li>前端资讯
<ul>
<li>前端资讯</li>
<li>网站优化</li>
<li>前端开发</li>
</ul>
</li>
<li>网站优化</li>
<li>前端开发</li>
</ul>
二、html 标签ul、li布局和应用
一般我们常常使用在文章标题列表、图片列表等有规律列表类内容排版布局
新闻列表布局
div部分:
<div class="box">
<ul>
<li><span>05/11</span>▪ jquery九宫格抽奖转盘效果 jquery老虎机抽奖效果</li>
<li><span>05/10</span>▪ jquery抽奖大转盘 jquery移动端抽奖旋转特效 html5抽奖效果</li>
<li><span>05/10</span>▪ jquery刮刮奖效果 html5实现刮刮奖效果</li>
<li><span>05/10</span>▪ 纯js鼠标滑过tab选项卡切换效果</li>
<li><span>05/11</span>▪ jquery九宫格抽奖转盘效果 jquery老虎机抽奖效果</li>
<li><span>05/10</span>▪ jquery抽奖大转盘 jquery移动端抽奖旋转特效 html5抽奖效果</li>
<li><span>05/10</span>▪ jquery刮刮奖效果 html5实现刮刮奖效果</li>
<li><span>05/10</span>▪ 纯js鼠标滑过tab选项卡切换效果</li>
</ul>
</div>
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部分
<div class="box1">
<ul>
<li><img src="http://www.bird100.cn/wp-content/uploads/2016/05/2016051102.jpg" alt="html 标签ul、li网页布局基础应用" /><span>前端菜鸟</span></li>
<li><img src="http://www.bird100.cn/wp-content/uploads/2016/05/2016051102.jpg" alt="html 标签ul、li网页布局基础应用" /><span>前端菜鸟</span></li>
<li><img src="http://www.bird100.cn/wp-content/uploads/2016/05/2016051102.jpg" alt="html 标签ul、li网页布局基础应用" /><span>前端菜鸟</span></li>
<li><img src="http://www.bird100.cn/wp-content/uploads/2016/05/2016051102.jpg" alt="html 标签ul、li网页布局基础应用" /><span>前端菜鸟</span></li>
<li><img src="http://www.bird100.cn/wp-content/uploads/2016/05/2016051102.jpg" alt="html 标签ul、li网页布局基础应用" /><span>前端菜鸟</span></li>
<li><img src="http://www.bird100.cn/wp-content/uploads/2016/05/2016051102.jpg" alt="html 标签ul、li网页布局基础应用" /><span>前端菜鸟</span></li>
</ul>
</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;}

点评

web 前端免费学习资源,线上视频课免费学啦! 进群领取: 172994155 ,回复 ww 验证  发表于 2017-4-19 15:06


回复

使用道具 举报

发表于 7 天前
高级vip 学习交流平台,业内高手云集,只为你疑惑解忧
回复 支持 反对

使用道具 举报