无序列表练习
模仿下图搜狐新闻网,写出下面前端界面(注意事项:利用无序列表)
第一步 弄清问题
观察到展示部分
就一排文字,第一排文字得到加粗
联想这种效果所对应的HTML标签
ul li
第二步 拟定编码计划
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<ul>
<li><a data-param="_f=index_chan08news_0" href="http://www.sohu.com/a/306487924_114986" target="_blank" title="发改委:100万-300万人口的大城市全面取消落户限制">
<strong>发改委:100万-300万人口的大城市全面取消落户限制</strong>
</a></li>
<li><a data-param="_f=index_chan08news_1" href="http://www.sohu.com/a/306530028_260616" target="_blank" title="国务院关税税则委调整进口税 相关税率降为13%、20%">
国务院关税税则委调整进口税 相关税率降为13%、20%
</a></li>
<li><a data-param="_f=index_chan08news_2" href="http://www.sohu.com/a/306504405_114988" target="_blank" title="陕西:省内会议活动对领导称呼不加“尊敬的”">
陕西:省内会议活动对领导称呼不加“尊敬的”
</a></li>
<li><a data-param="_f=index_chan08news_3" href="http://www.sohu.com/a/306507462_561670" target="_blank" title="A股“醉了”!贵州茅台股价破突破900元 白酒股躁动">
A股“醉了”!贵州茅台股价破突破900元 白酒股躁动
</a></li>
<li><a data-param="_f=index_chan08news_4" href="http://www.sohu.com/a/306538058_255783" target="_blank" title="王旭东接任单霁翔为新任故宫博物院院长">
王旭东接任单霁翔为新任故宫博物院院长
</a></li>
</ul>
</body>
</html>
我们观察一下效果:
我们离我们效果是不是越来越近呢?
我们只需要做一下css样式即可,这里我就不做介绍了。