01-王者荣耀新闻tab栏
闲来无事，练练静态网页，css代码没有优化，比较粗糙
1.效果展示
2.HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 引入初始化样式 reset.css -->
<link rel="stylesheet" href="css/reset.css" />
<!-- 引入本页自定义样式 index.css-->
<link rel="stylesheet" href="css/index.css" />
<title>王者荣耀热门榜</title>
</head>
<body>
<div class="news-box">
<!-- 标题tabs start -->
<div class="news-tabs">
<ul>
<li><a href="#">热门</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">公告</a></li>
<li><a href="#">活动</a></li>
<li><a href="#">赛事</a></li>
<li><a href="#">...</a></li>
</ul>
</div>
<!-- 标题标题tabs end -->
<!-- 内容主体 start -->
<div class="news-content">
<div class="news-title">
<a href="#">狄某有话说 |这一切要从一次反野失败说起</a>
</div>
<!-- 公告列表 start -->
<ul class="news-list">
<li>
<span class="notice com-notice">公告</span>
<span class="txt">12月16日体验服停机更新公告</span>
<span class="notice-time">12/16</span>
</li>
<li>
<span class="notice com-hot">热门</span>
<span class="txt">成为快手荣耀萤火计划签约主播，千万奖金等你瓜分!</span
>
<span class="notice-time">12/16</span>
</li>
<li>
<span class="notice com-hot">热门</span>
<span class="txt">貂蝉五五开黑节皮肤原画共创开启</span>
<span class="notice-time">12/16</span>
</li>
<li>
<span class="notice com-notice">公告</span>
<span class="txt">峡谷冬日聚，好礼享不停</span>
<span class="notice-time">12/14</span>
</li>
<li>
<span class="notice com-hot">热门</span>
<span class="txt">元歌皮肤设计大赛精彩创意赏析第一期</span>
<span class="notice-time">12/13</span>
</li>
<li>
<span class="notice com-hot">热门</span>
<span class="txt">狄某有话说 |坑队友三件套：逛街、挂机、闪现送人头</span
>
<span class="notice-time">12/09</span>
</li>
<li>
<span class="notice com-notice">公告</span>
<span class="txt">12月9日体验服停机更新公告</span>
<span class="notice-time">12/09</span>
</li>
</ul>
<!-- 公告列表 end -->
</div>
<!-- 内容主体 end -->
</div>
</body>
</html>
3.CSS代码
1.初始化样式reset.css
/* 初始化样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
input,
textarea {
outline: none;
}
button {
border: none;
}
2.主要样式index.css
/* 通用样式 */
/* 用于热门的样式 */
.com-hot {
color: #ff3636 !important;
width: 38px;
text-align: center;
border: 1px solid #ff3636;
border-radius: 3px;
margin-right: 5px;
}
/* 用于公告的样式 */
.com-notice {
color: #f3b645 !important;
width: 38px;
text-align: center;
border: 1px solid #f3b645;
border-radius: 3px;
margin-right: 5px;
}
/* 最外层box，不要修改此样式 */
.news-box {
margin: 300px auto;
padding: 0 15px;
width: 360px;
height: 343px;
background: #303139;
}
/* 从下面开始 */
/* news-tabs标题标题tabs start */
.news-box .news-tabs {
height: 48px;
line-height: 48px;
text-align: center;
}
/* tabs列表项li标签样式 */
.news-box .news-tabs ul li {
float: left;
width: 52px;
height: 46px;
border-bottom: 1px solid black;
}
/* ‘tabs项前5个a标签样式 */
.news-box .news-tabs ul li:nth-child(-n + 5) a {
display: inline-block;
width: 100%;
height: 100%;
}
.news-box .news-tabs ul li a {
font-size: 14px;
color: #b8b9c5;
}
/* 鼠标经过a标签的样式*/
.news-box .news-tabs ul li:nth-child(-n + 5):hover a {
color: #f3b645;
border-bottom: 3px solid #f3b645;
}
/* news-tabs标题列表 end */
/* 内容主体 start */
.news-box .news-content {
padding: 20px 0;
width: 100%;
height: 293px;
}
/* 内容主体部分 标题 news-title */
.news-box .news-content .news-title {
padding: 0 82px 0 15px;
margin-bottom: 15px;
height: 37px;
line-height: 37px;
color: #f3b645;
background-color: #414046;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.news-box .news-content .news-title a {
font-size: 18px;
color: #f3b645;
}
/* 内容主体部分的 公告和热门 */
.news-box .news-content .news-list li {
width: 100%;
height: 21px;
line-height: 21px;
margin-bottom: 10px;
color: #b8b9c5;
font-size: 12px;
}
/* 最左侧的日期 */
.news-box .news-content .news-list li .notice-time {
float: right;
color: #999;
}
/* 公告 信息 日期的通用样式 */
.news-box .news-content .news-list li span {
display: inline-block;
}
/* 中间的信息部分 */
.news-box .news-content .news-list li .txt {
display: inline-block;
width: 230px;
line-height: 12px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
/* 内容主体 end */
若有收获，就点个赞吧
