仿移动门户网站体育板块设计

送江入海

已于 2024-06-11 09:23:28 修改

阅读量507

点赞数 15

分类专栏： Web前端文章标签：前端

于 2024-06-03 11:09:51 首次发布

本文链接：https://blog.csdn.net/m0_74427084/article/details/139409358

版权

Web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

创建外部CSS文件，采用链接方式应用到“体育版块.html”中，按下述要求编写CSS样式设计页面布局；

设置页面宽度为浏览器窗口宽度的96%，最小宽度为380px，默认字体大小为14px；

分别使用ul-li结构设计首行“体育中超、英超、NBA”文本导航链接和“国足、西甲、欧冠、CBA、亚冠”图片导航链接；

文本导航链接使用浮动定位，字体浅蓝色，“体育”链接字体大小为默认字体大小的1.2倍并加粗显示；

图片导航链接采用弹性盒布局，采用flex-grow或flex设置各项目的宽度能随浏览器窗口自适应变化，但最大宽度不能超过100px，各项目分散对齐，如图2所示；

每个图片导航项目中的图片也能自适应变化，最大宽度为65个像素；

从第三行开始插入多条新闻主题，包括图片、标题和评论数和评论图标，每一条新闻采用dl-dt-dd标签结构来设计，每一个dl标签的高度为80个像素，隐藏图片溢出部分，请采用弹性盒布局进行设计，dt和dd元素的宽度应能自适应调整，如图2所示；

设置新闻标题的行间距为1.5倍，评论数字体大小为默认字体的70%；

在多条新闻之后插入“展开更多”导航及其图标，要求图标和文字垂直居中对齐。

html代码


<!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>
<!--请在此处链接外部CSS样式文件-->
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<!--下面的HTML代码中，除了给标签添加类名或ID号之外，不能做其它修改-->
<body>
	<div>
		<ul>
			<li class="text1">体育</li>
			<li class="text2">NBA</li>
			<li class="text2">英超</li>
			<li class="text2">中超</li>
		</ul>
		<hr noshade/>
		<ul class="list">
			<li>
				<div><img src="images/guozu.jpg" class="Img"></div>
				<div class="list_center">国足</div>
			</li>
			<li>
				<div><img src="images/xijia.png" class="Img"></div>
				<div class="list_center">西甲</div>
			</li>
			<li>
				<div><img src="images/ouguan.jpg" class="Img"></div>
				<div class="list_center">欧冠</div>
			</li>
			<li>
				<div><img src="images/cba.jpg" class="Img"></div>
				<div class="list_center">CBA</div>
			</li>
			<li>
				<div><img src="images/yaguan.jpg" ></div>
				<div class="list_center">亚冠</div>
			</li>
		</ul>
		<hr noshade/>
		<dl class="flexbox">
			<dt class="Img2"><img src="images/1.jpg"/></dt>
			<dd>
				<h4>游泳冠军赛孙杨1500自夺冠 豪取五金圆满收官</h4>
				<div class="disscuss"><span> 578 <img src="images/timg.jpg"/></span> </div>
			</dd>
		</dl>
		<hr noshade>
		<dl class="flexbox">
			<dt class="Img2"><img src="images/2.jpg"/></dt>
			<dd>
				<h4>游泳冠军赛刘湘50自折桂 徐嘉余收获第四金</h4>
				<div class="disscuss"><span> 8 <img src="images/timg.jpg"/></span></div>
			</dd>
		</dl>
		<hr noshade/>
		<dl class="flexbox">
			<dt class="Img2"><img src="images/3.jpg"/></dt>
			<dd >
				<h4 >111</h4>
				<div class="disscuss"><span> 4174 <img src="images/timg.jpg"/></span> </div>
			</dd>
		</dl>
		<hr noshade/>
		<dl class="flexbox">
			<dt class="Img2"><img src="images/4.jpg"/></dt>
			<dd>
				<h4 >中超-扎哈维2球雷鸟肖智建功 富力4-1辽足返榜首</h4>
				<div class="disscuss"><span> 1万 <img src="images/timg.jpg"/></span> </div>
			</dd>
		</dl>
		<hr noshade/>
		<dl class="flexbox">
			<dt class="Img2"><img src="images/5.jpg"/></dt>
			<dd>
				<h4>曝齐达内铁定留皇马！没冠军也执教 获111力挺</h4>
				<div class="disscuss"><span> 658 <img src="images/timg.jpg"/></span> </div>
			</dd>
		</dl>
		<hr noshade/>
		<div class="more">展开更多 <img src="images/xiala.jpg"/></div>
	</div>
</body>
</html>

CSS样式

@charset "utf-8";
/* CSS Document */
body{
	width:96%;
	min-width:380px;
	font-size:14px;
}
ul{
	list-style:none;
}
.text1,.text2{
	color:skyblue;
}
.text1{
	float:left;
	font-size:1.2em;
	font-weight:bold;
}
.text2{
	float:right;
}
.list{
	display:flex;
	clear:both;
	justify-content:space-around;
}
.Img{
	max-width:65px;
	width:auto;
}
.list_center{
	text-align:center;
}
.Img2{
	display:inline-block;
	overflow:hidden;
}
.disscuss span{
	display:flex;
	justify-content:center;
}
.flexbox{
	display:flex;
	justify-content:space-between;
}
hr{
	clear:both;
}
dl{
	height:80px;
}
h4{
	line-height:150%;
}
.disscuss{
	float:right;
	font-size:70%;
}
.more{
	text-align:center;
	color:skyblue;
}

送江入海

关注

15
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
仿移动门户网站体育板块设计

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

扫一扫

专栏目录