1) 创建外部CSS文件,采用链接方式应用到“新闻版块.html”中,按下述要求编写CSS样式设计页面布局;
(2) 设置页面宽度为浏览器窗口宽度的96%,最小宽度为380px,默认字体大小为14px;
(3) 分别使用ul-li结构设计首行“新闻 首页 娱乐 财经”文本导航链接和“国内 国际 军事 体育 文化”图片导航链接;
(4) 文本导航链接使用浮动定位,字体浅蓝色,“体育”链接字体大小为默认字体大小的1.2倍并加粗显示;
(5) 图片导航链接采用弹性盒布局,采用flex-grow或flex设置各项目的宽度能随浏览器窗口自适应变化,但最大宽度不能超过100px,各项目分散对齐,如图2所示;
(6) 每个图片导航项目中的图片也能自适应变化,最大宽度为65个像素;
(7) 从第三行开始插入多条新闻主题,包括图片、标题和评论数和评论图标,每一条新闻采用dl-dt-dd标签结构来设计,每一个dl标签的高度为80个像素,隐藏图片溢出部分,请采用弹性盒布局进行设计,dt和dd元素的宽度应能自适应调整,如图2所示;
(8) 设置新闻标题的行间距为1.5倍,评论数字体大小为默认字体的70%;
(9) 在多条新闻之后插入“展开更多”导航及其图标,要求图标和文字垂直居中对齐。
(10) 注意:“新闻版块-姓名.html”中的HTML代码,除了给标签添加类名或ID号之外,不能做其它修改!
源代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.2,minimum-scale=0.8">
<title>新闻板块布局</title>
<link href="新闻板块css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="xinwen" class="body">
<ul type="none" class="shortcut">
<li id="first" class="left">新闻</li>
<li class="right">财经</li>
<li class="right">娱乐</li>
<li class="right">首页</li>
</ul>
<hr noshade/>
<ul type="none" class="container">
<li class="tudao">
<div><img src="images/gn_news_logo.png" alt=""></div>
<div class="wendao">国内</div>
</li>
<li class="tudao">
<div ><img src="images/gj_news_logo.png" alt=""></div>
<div class="fs">国际</div>
</li>
<li class="tudao">
<div><img src="images/junshi.png" alt=""></div>
<div class="wendao">军事</div>
</li>
<li class="tudao">
<div><img src="images/cba.jpg" alt=""></div>
<div class="wendao">体育</div>
</li>
<li class="tudao">
<div><img src="images/wenhua.png" alt=""></div>
<div class="wendao">文化</div>
</li>
</ul>
<hr noshade/>
<dl class="container2">
<dt><img src="images/news_01.jpg" alt=""></dt>
<dd>
<h1>祝贺!中国女排晋级世晋赛八强</h1>
<div><span>683 人民日报<img src="images/timg.jpg" alt=""></span></div>
</dd>
</dl>
<hr noshade/>
<dl class="container2">
<dt><img src="images/news_02.jpg" alt=""></dt>
<dd>
<h1>比亚迪拿下欧洲最大租车公司10万辆订单,分六年交付</h1>
<div><span>8 界面新闻<img src="images/timg.jpg" alt=""></span></div>
</dd>
</dl>
<hr noshade/>
<dl class="container2">
<dt><img src="images/news_03.jpg" alt=""></dt>
<dd>
<h1>新变异株BF.7有哪些特点?湖北疾控专家解答</h1>
<div><span>41 澎湃新闻<img src="images/timg.jpg" alt=""></span></div>
</dd>
</dl>
<hr noshade/>
<dl class="container2">
<dt><img src="images/news_04.jpg" alt=""></dt>
<dd>
<h1>国庆露营让预制菜翻红 预制菜赛道春天来了?</h1>
<div><span>1万 成都商报<img src="images/timg.jpg" alt=""></span></div>
</dd>
</dl>
<hr noshade/>
<dl class="container2">
<dt><img src="images/news_05.jpg" alt=""></dt>
<dd>
<h1>浙江发现全球新物种!网友关注点亮了</h1>
<div><span>685 钱江晚报<img src="images/timg.jpg" alt=""></span></div>
</dd>
</dl>
<hr noshade/>
<div id="ext" class="foot">展开更多<img src="images/xiala.jpg" alt=""></div>
</div>
</body>
</html>
CSS代码:
@charset "utf-8";
/* CSS Document */
.body{
width:96%;
min-width: 380px;
margin: 0 auto;
}
*{
padding:0;
font-size: 14px;
}
.shortcut{
height:31px;
line-height: 31px;
padding-bottom: 8px;
padding-top: 30px;
list-style: none;
}
.left{
float:left;
font-size: 1.2rem;
padding-left:20px;
height: 31px;
width: 60px;
color:#0C1D81;
font-weight: bold;
}
.right{
float: right;
font-size: 14px;
height: 31px;
width: 50px;
color:#0EA4E7;
}
.container{
padding-top: 10px;
padding-bottom: 10px;
height: 100px;
margin: auto;
display: flex;
justify-content: space-around;
}
.tudao img{
width: 100%;
max-width: 65px;
height: 80px;
margin: 0 auto;
flex: 1;
display: block;
overflow: hidden
}
.body.tudao{
height: 200px;
width: 324px;
list-style: none;
flex: 1;
}
.wendao{
font-size: 14px;
text-align: center;
padding-top: 8px;
}
.container2{
width: 100%;
height: 80px;
display: flex;
justify-content: space-between;
overflow:hidden;
}
.container2 dt{
width: 30%;
}
.container2 dd{
display: flex;
width: 70%;
text-align: right;
height: 80px;
flex-direction: column;
flex: 1;
margin: 0;
flex-wrap: wrap;
}
.container2 dd h1{
flex: 1;
text-align: left;
margin: 0;
line-height: 1.5rem;
padding-top: 10px;
flex-wrap: wrap;
}
.foot{
font-size: 14px;
height: 40px;
color:rgba(15,34,168,1.00);
text-align: center;
line-height: 40px;
}
dl dd div{
text-align: right;
flex: 1;
}
dl dd div span{
display: block;
font-size: 70%;
padding-top: 20px;
}
dl dd div img{
height: 23px;
width: 18px;
vertical-align: -10px;
}
.body.foot img{
height: 15px;
width: 18px;
vertical-align: middle;
}