考试需求
请完善
css/style.css
样式文件，让知乎日报首页呈现如下所示的效果（页面整体宽度
1024px
）：
关键尺寸批注如下：（可以通过在图片上右键-》“在新标签页打开图片”，或在右键-》复制图片地址后到浏览器新标签页打开并放大图片，查看关键尺寸）
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>知乎日报 - 每天 3 次，每次 7 分钟</title>
<link href="css/style.css" rel="stylesheet" />
</head>
<body id="body">
<!--header start-->
<header class="headerbox">
<!--nav start-->
<nav class="navbox">
<h1>知乎日报</h1>
<div class="navright">
<a class="on" href="#body">app下载</a>
<a href="#tabtitle">浏览内容</a>
</div>
</nav>
<!--nav end-->
</header>
<!--header end-->
<!--banner start-->
<section class="banner">
<div class="container">
<div class="">
<img
src="images/phone_sample.png"
alt="知乎日报应用截屏"
class="phoneimg loaded"
/>
</div>
<div class="content">
<h2>每天三次 每次七分钟</h2>
<div class="info">
在中国，资讯类移动应用的人均阅读时长是 5
分钟，而在知乎日报，这个数字是 21。
</div>
</div>
</div>
</section>
<!--banner end-->
<!--tabtitle start-->
<section class="tabtitle" id="tabtitle">
<h3>浏览内容</h3>
<h4>最新内容</h4>
</section>
<!--tabtitle end-->
<!--list start-->
<section class="list">
<ul>
<li>
<a href="#">
<img src="images/1.jpg" alt="" />
<p>怎样使金属变得很脆？</p>
</a>
</li>
<li>
<a href="#">
<img src="images/2.jpg" alt="" />
<p>有哪些对你很有冲击力的设计？</p>
</a>
</li>
<li>
<a href="#">
<img src="images/3.jpg" alt="" />
<p>有哪些很重要，教练却没有教的驾驶技巧？</p>
</a>
</li>
<li>
<a href="#">
<img src="images/5.jpg" alt="" />
<p>谢谢天上掉的玩具</p>
</a>
</li>
<li>
<a href="#">
<img src="images/6.jpg" alt="" />
<p>火车上的「最大上沙量」标识是什么意思？</p>
</a>
</li>
<li>
<a href="#">
<img src="images/7.jpg" alt="" />
<p>翼龙可以当飞行坐骑么？</p>
</a>
</li>
<li>
<a href="#">
<img src="images/1.jpg" alt="" />
<p>怎样使金属变得很脆？</p>
</a>
</li>
<li>
<a href="#">
<img src="images/2.jpg" alt="" />
<p>有哪些对你很有冲击力的设计？</p>
</a>
</li>
<li>
<a href="#">
<img src="images/3.jpg" alt="" />
<p>有哪些很重要，教练却没有教的驾驶技巧？</p>
</a>
</li>
<li>
<a href="#">
<img src="images/5.jpg" alt="" />
<p>谢谢天上掉的玩具</p>
</a>
</li>
<li>
<a href="#">
<img src="images/6.jpg" alt="" />
<p>火车上的「最大上沙量」标识是什么意思？</p>
</a>
</li>
<li>
<a href="#">
<img src="images/7.jpg" alt="" />
<p>翼龙可以当飞行坐骑么？</p>
</a>
</li>
</ul>
<div class="more">
<a href="#">更多精彩内容请在APP中查看</a>
</div>
</section>
<!--list end-->
<!--footer start-->
<footer class="footer">
<div class="footerBox">
<div class="footerL">
<p>
知乎日报是一款拥有千万用户的资讯类客户端，每日提供来自知乎社区的精选问答，还有国内一流媒体的专栏特稿。
</p>
<p>
主题日报包括动漫、设计、大公司、游戏、财经、电影、电子音乐、互联网安全等丰富内容，为业内人和资深爱好
者推荐各领域最精彩文章，满足高质量阅读需求。
</p>
<p>在知乎日报，告别浮躁，重获阅读的愉悦。</p>
<p>© 2020 知乎</p>
</div>
<div class="footerR">
<img src="images/qr.png" alt="" />
<p>扫描下载客户端</p>
</div>
</div>
</footer>
<!--footer end-->
</body>
</html>
CSS：
*{
padding:0;
margin:0;
}
a{
text-decoration: none;
color: #000000;
}
li{
list-style: none;
}
body{
width: 1024px;
margin: auto;
}
.navbox{
height: 78px;
line-height: 78px;
}
.navbox h1{
/*将h1里的字体大小调整为0px，设置h1宽高，再插入背景图片*/
font-size: 0px;
float: left;
height: 50px;
width: 145px;
background-image:url('../images/logo.png');
}
.navright{
float: right;
}
.navright a{
/* 将a标签设置宽高，并且使文字居中 */
display: inline-block;
width: 120px;
height: 32px;
line-height: 32px;
text-align: center;
}
.navright .on{
color: #0099F2;
background-color: #F0F9FF;
}
.banner{
background-color: #008BED;
}
.container{
position: relative;
}
.content{
/* 不是很懂移动的距离怎么看出来的 */
width: 410px;
position: absolute;
top:120px;
left: 500px;
}
.content h2{
font-size: 40px;
line-height: 40px;
color: #fdfdfd;
}
.content .info{
font-size: 16px;
line-height: 26px;
color: #99d1f8;
}
.tabtitle{
width: 960px;
height: 100px;
line-height: 100px;
margin: 0 auto;
}
.tabtitle h3{
/* 单独只写h4float：right，h4会到下面，加上h3float：left才有效果 */
font-size: 24px;
float: left;
color: #000000;
}
.tabtitle h4{
font-size: 24px;
color: #cccccc;
float: right;
}
.list{
margin: auto;
display: flex;
flex-wrap: wrap;
flex-direction: column;
width: 960px;
}
.list ul{
background-color: #f9f9f9;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.list ul li{
width: 300px;
height: 374px;
margin-bottom: 20px;
background-color: #ffffff;
}
.list li a{
margin-left: 20px;
}
.list li img{
width: 260px;
height: 260px;
margin-top: 20px;
}
.list li p{
font-size: 14px;
color:#333333;
margin-left: 20px;
}
.more{
color: #59abdf;
height: 62px;
line-height: 62px;
font-size: 20px;
text-align:center;
background-color: #e8eef2;
}
.more a{
color: #59abdf
}
.footer{
overflow: hidden;
width: 1024px;
height: 265px;
background-color: #E5E5E5;
margin-top:30px;
}
.footerBox{
display: flex;
justify-content: space-around;
}
.footerL{
width:710px;
height: 210px;
color: #000000;
font-size: 14px;
line-height: 25px;
margin-top: 32px;
}
.footerL p{
margin-bottom: 15px;
}
.footerR{
margin-top: 30px;
text-align: center;
}
.footerR img{
width: 141px;
height:162px;
}
版权声明：本文为weixin_51167834原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。