手机新闻网页
点击 这里 查看手机新闻网页的最终效果图。
源码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>手机新闻网页</title>
<style>
ul {
margin: 0;
padding: 0;
list-style: none;
}
img {
vertical-align: middle;
max-width: 100%;
}
p {
margin: 0;
}
h4 {
margin: 0;
font-weight: normal;
}
a {
text-decoration: none;
}
body {
margin: 0;
font-family: STXihei, Helvetica, serif;
font-size: 14px;
line-height: 1.4286;
color: #333;
}
.full-width {
width: 100% !important;
}
#news .nav {
display: flex;
justify-content: space-around;
align-items: center;
height: 44px;
background: #fafafa;
border-bottom: 1px solid #e8e8e8;
padding: 0 2%;
font-size: 13px;
}
#news .nav a {
display: block;
color: #969696;
}
#news .nav .active a {
color: #ba1d14;
font-weight: bold;
}
#news .con {
width: 90%;
margin: 0 auto;
}
#news .con li {
overflow: hidden;
padding: 12px 0;
border-bottom: 1px solid #f3f3f3;
position: relative;
}
#news .con .detail {
float: left;
width: 68%;
}
#news .con h4 {
margin-bottom: 5px;
}
#news .con p {
line-height: 1;
}
#news .con span {
font-size: 12px;
margin-right: 6px;
color: #969696;
}
#news .con .image {
float: right;
width: 30%;
height: 57px;
border-radius: 2px;
overflow: hidden;
position: relative;
}
#news .con .image.full-width {
min-height: 182px;
}
#news .con .desc {
position: absolute;
left: 0;
right: 0;
bottom: 0;
color: #fff;
padding: 0 6px 10px;
}
#news .con .desc span {
color: inherit;
}
#news .con .cover-link {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#news .con .images {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
}
#news .loading {
text-align: center;
}
#news .loading a {
display: block;
line-height: 32px;
color: #969696;
}
</style>
</head>
<body>
<div id="news">
<ul class="nav">
<li class="active"><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>
<li><a href="#">汽车</a></li>
</ul>
<ul class="con">
<li>
<div class="detail">
<h4>通用汽车CEO：我们正准备推出第四代无人驾驶汽车</h4>
<p><span>腾讯科技</span><span>2评</span></p>
</div>
<div class="image">
<img src="./images/xiada.jpg">
</div>
<a href="#" class="cover-link"></a>
</li>
<li>
<div class="detail">
<h4>富士康对夏普寄予厚望：希望手机称为世界前五</h4>
<p><span>中国村在线</span></p>
</div>
<div class="image">
<img src="./images/xiada.jpg">
</div>
<a href="#" class="cover-link"></a>
</li>
<li>
<div class="detail">
<h4>伦敦市长：建议就英国脱欧问题再次进行公投</h4>
<p><span>海外网</span></p>
</div>
<div class="image">
<img src="./images/xiada.jpg">
</div>
<a href="#" class="cover-link"></a>
</li>
<li>
<div class="detail">
<h4>大众柴油车升级方案获批准"排放丑闻"已花300亿美元</h4>
<p><span>盖世汽车</span><span>2评</span></p>
</div>
<div class="image">
<img src="./images/xiada.jpg">
</div>
<a href="#" class="cover-link"></a>
</li>
<li>
<div class="image full-width">
<img src="./images/xiada.jpg">
<div class="desc">
<h4>考古学家用卫星地图发现了神秘的古代沙特"门"</h4>
<p><span>蜜蜂国际</span></p>
</div>
</div>
<a href="#" class="cover-link"></a>
</li>
<li>
<div class="detail">
<h4>拟三管齐下筹集巨资 十三集团股价两日跌去近六成</h4>
<p><span>每日经济新闻</span></p>
</div>
<div class="image">
<img src="./images/xiada.jpg">
</div>
<a href="#" class="cover-link"></a>
</li>
<li>
<div class="detail">
<h4>穆里奇：斯帅已和恒大球员告别 不了解高拉特转会</h4>
<p><span>腾讯体育</span><span>219评</span></p>
</div>
<div class="image">
<img src="./images/xiada.jpg">
</div>
<a href="#" class="cover-link"></a>
</li>
<li>
<div class="detail full-width">
<h4>卧室带卫生户型好吗？看看专家怎么说</h4>
</div>
<div class="images full-width">
<div class="image">
<img src="./images/xiada.jpg">
</div>
<div class="image">
<img src="./images/xiada.jpg">
</div>
<div class="image">
<img src="./images/xiada.jpg">
</div>
</div>
<p><span>综合整理</span><span>2评</span></p>
<a href="#" class="cover-link"></a>
</li>
<li>
<div class="detail">
<h4>为什么现在准时下班，到让人有愧疚感了？</h4>
<p><span>书单</span></p>
</div>
<div class="image">
<img src="./images/xiada.jpg">
</div>
<a href="#" class="cover-link"></a>
</li>
<li>
<div class="detail">
<h4>中国哪些方面还应该向英美图书馆学习？</h4>
<p><span>英伦故事会</span></p>
</div>
<div class="image">
<img src="./images/xiada.jpg">
</div>
<a href="#" class="cover-link"></a>
</li>
<li>
<div class="loading">
<p><a href="#">加载更多</a></p>
</div>
</li>
</ul>
</div>
</body>
</html>
