给某门户网站移动版首页的新闻版块进行布局设计

搬砖小李ii

已于 2023-11-13 13:43:53 修改

阅读量1k

点赞数 3

文章标签： html5

于 2023-11-03 13:04:58 首次发布

本文链接：https://blog.csdn.net/2301_80648401/article/details/134200752

版权

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;
}

搬砖小李ii

关注

3
点赞
踩
16

收藏

觉得还不错? 一键收藏
3
评论
给某门户网站移动版首页的新闻版块进行布局设计

(7) 从第三行开始插入多条新闻主题，包括图片、标题和评论数和评论图标，每一条新闻采用dl-dt-dd标签结构来设计，每一个dl标签的高度为80个像素，隐藏图片溢出部分，请采用弹性盒布局进行设计，dt和dd元素的宽度应能自适应调整，如图2所示；(5) 图片导航链接采用弹性盒布局，采用flex-grow或flex设置各项目的宽度能随浏览器窗口自适应变化，但最大宽度不能超过100px，各项目分散对齐，如图2所示；(2) 设置页面宽度为浏览器窗口宽度的96%，最小宽度为380px，默认字体大小为14px；
复制链接

扫一扫