CSS开发案例【新闻热榜】
效果展示
核心处理代码
1. 除去默认内外边框
html的许多标签都是盒子模型，需要除去它默认的内外边距margin和padding
body,h3,ul{margin: 0;padding: 0;}2. 盒子居中
.news{margin: 50px auto 0px;/*上 左右 下（auto水平左右默认相等居中）*/
}3. 文字上下居中
当<li>标签的高度=文本行高的时候文字就会达到上下居中的效果。
.news ul li{height: 35px;/*每一条新闻的高度*/line-height: 35px;/*行高=高度时 文字上下居中*/}4. 去除超链接下划线
.news ul li a{text-decoration: none;/*去掉下划线*/}5. 序号颜色
通过给span标签设置class可以单独设置热榜前三的新闻序号颜色。
/*通过span标签可以灵活控制序号的属性*/.news ul li a span{margin-right: 10px;font-weight: bold;}.color1{color: red;}.color2{color: #ff5c55;}.color3{color: #ffa552;}
完整代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>02-新闻列表</title><style type="text/css">/*清楚body默认边距 */body,h3,ul{margin: 0;padding: 0;}.news{width: 360px;height: 400px;/*background-color: red;*/margin: 50px auto 0px;/*上 左右 下（auto水平左右默认相等居中）*/border: 1px solid #ddd;/*灰色外边框*/padding: 15px;/*内边距 内边距会把盒子撑大 宽度-=内边距*2*/}.news h3{/*border: 1px solid red;*/font-size: 20px;margin-bottom: 20px;/*下边距*/}.news ul{list-style: none;/*去掉圆点*/}.news ul li{border-bottom: 1px dotted #ddd;/*灰色li下划线-点*/height: 35px;/*每一条新闻的高度*/line-height: 35px;/*行高=高度时 文字上下居中*/font-size: 16px;}.news ul li a{color: #333;text-decoration: none;/*去掉下划线*/}.news ul li a:hover{color: red;}/*通过span标签可以灵活控制序号的属性*/.news ul li a span{margin-right: 10px;font-weight: bold;}.color1{color: red;}.color2{color: #ff5c55;}.color3{color: #ffa552;}</style>
</head>
<body><!-- 绘制长方形div区域-->
<div class="news"><h3>百度新闻热榜</h3>
<ul><li><a href="#"><span class="color1">1</span>印度列车相撞事故已致207死900伤 </a></li><li><a href="#"><span class="color2">2</span>美防长跨越2座位主动与中国防长握手 </a></li><li><a href="#"><span class="color3">3</span>高考前心理调适指南请查收 </a></li><li><a href="#"><span>4</span>张雪峰公司将实行4天工作制 </a></li><li><a href="#"><span>5</span>多个账号网暴被撞小学生母亲被封 </a></li><li><a href="#"><span>6</span>校内被撞身亡小学生母亲坠楼身亡 </a></li><li><a href="#"><span>7</span>科技大佬排队来华:不能失去中国市场 </a></li><li><a href="#"><span>8</span>律师：网暴被撞男孩母亲者可负刑责 </a></li><li><a href="#"><span>9</span>河南多县抢收小麦 人休息机器不休息 </a></li>
</ul>
</div>
</body>
</html>