<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 参考百度新闻 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
ul li, li{
list-style: none;
margin-right: 10px; /* 换一个单位 */
}
a {
text-decoration: none;
}
header,section {
margin: 0;
padding: 0;
}
.dh {
font-size: 18px;
margin-bottom: 10px;
background-color: #1E90FF;
}
.tab1{
margin-left: 10px;
border-spacing: 10px 5px;
}
tr td {
position: relative; /* 可以这样子 */
top: 5px;
line-height: 44px;
}
tr td a{
color: #D9D9D9;
}
.active {
border-bottom: 2px solid #FFFFFF;
position: relative; /* 可以这样子 */
top: 5px;
line-height: 44px;
}
.list {
margin-left: 20px;
margin-right: 20px;
}
</style>
</head>
<body>
<div class="dh">
<div align="center">
网站标题
</div>
<table class="tab1">
<tr>
<td class="active"><a href="1.html" style="color:#FFFFFF;">标题1</a></td>
<td><a href="2.html">标题2</a></td>
<td><a href="3.html">标题3</a></td>
<td><a href="4.html">标题4</a></td>
</tr>
</table>
</div>
<section class="list">
<li>
<div>1111111111111111111</div>
<small>来源1</small>
<small>关键字：啦啦啦</small>
<hr/>
</li>
<li>
<div>2222222222222222222</div>
<small>22222</small>
<hr/>
</li>
<li>
<div>3333333333333333333</div>
<small>33333</small>
<hr/>
</li>
<li>
<div>4444444444444444444</div>
<small>44444</small>
<hr/>
</li>
<li>
<div>5555555555555555555</div>
<small>55555</small>
<hr/>
</li>
<li>
<div>6666666666666666666</div>
<small>66666</small>
<hr/>
</li>
<li>
<div>1111111111111111111</div>
<small>来源1</small>
<small>关键字：啦啦啦</small>
<hr/>
</li>
<li>
<div>2222222222222222222</div>
<small>22222</small>
<hr/>
</li>
<li>
<div>3333333333333333333</div>
<small>33333</small>
<hr/>
</li>
<li>
<div>4444444444444444444</div>
<small>44444</small>
<hr/>
</li>
<li>
<div>5555555555555555555</div>
<small>55555</small>
<hr/>
</li>
<li>
<div>6666666666666666666</div>
<small>66666</small>
<hr/>
</li>
</section>
</body>
</html>注：
1、加注释那里借鉴了优快云后台导航的样式。
2、本意是模仿手机版的百度新闻。如下：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
