web前端——给某网站移动版主页的体育板块进行布局设计

本文介绍: 从第三行开始插入多条新闻主题，包括图片、标题和评论数和评论图标，每一条新闻采用 dl–dt–d d 标签结构来设计，每一个 dl 标签的高度为8。分别使用 ul–li 结构设计首行“体育中超、英超、NBA”文本导航链接和“国足、西甲、欧冠、CBA、亚冠”图片导航链接；个像素，隐藏图片溢出部分，请采用弹性盒布局进行设计，dt和d d 元素的宽度应能自适应调整，如图2所示；文本导航链接使用浮动定位，字体浅蓝色，“体育”链接字体大小为默认字体大小的1。每个图片导航项目中的图片也能自适应变化，最大宽度为。

给某门户网站移动版主页的体育板块进行布局设计。

创建外部CSS文件，采用链接方式应用到“sp o rt s.html”中，按下述要求编写CSS样式设计页面布局；
设置页面宽度为浏览器窗口宽度的96%，最小宽度为380px，默认字体大小为14px；
分别使用 ul–li 结构设计首行文本导航链接和图片导航链接；
文本导航链接使用浮动定位，字体浅蓝色，“体育”链接字体大小为默认字体大小的1.2倍并加粗显示；
图片导航链接采用弹性盒布局，采用 flex–g row或flex 设置各项目的宽度能随浏览器窗口自适应变化，但最大宽度不能超过100px，各项目分散对齐，如图2所示；
每个图片导航项目中的图片也能自适应变化，最大宽度为65个像素；
从第三行开始插入多条新闻主题，包括图片、标题和评论数和评论图标，每一条新闻采用 dl–dt–d d 标签结构来设计，每一个 dl 标签的高度为80个像素，隐藏图片溢出部分，请采用弹性盒布局进行设计，d t和d d 元素的宽度应能自适应调整；
设置新闻标题的行间距为1.5倍，评论数字体大小为默认字体的70%；
在多条新闻之后插入“展开更多”导航及其图标，要求图标和文字垂直居中对齐。
注意：“sp o rt s.html”中的HTML代码，除了给标签添加类名或ID号之外，不能做其它修改！

&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.2, minimum-scale=0.8">
<title>体育</title>
<!--请在此处链接外部CSS样式文件-->
<link href="mystyle.css" rel="stylesheet" type="text/css">

</head>
<!--下面的HTML代码中，除了给标签添加类名或ID号之外，不能做其它修改-->
<body>
	<div id="sports">
		<ul class="nav_txt">
			<li id="first">体育</li>
			<li>NBA</li>
			<li>名字1</li>
			<li>名字2</li>
		</ul>
		<hr noshade/>
		<ul class="nav_items">
			<li>
				<div><img src="images/guozu.jpg"></div>
				<div>名字3</div>
			</li>
			<li>
				<div><img src="images/xijia.png"></div>
				<div>名字4</div>
			</li>
			<li>
				<div><img src="images/ouguan.jpg"></div>
				<div>名字5</div>
			</li>
			<li>
				<div><img src="images/cba.jpg"></div>
				<div>名字6</div>
			</li>
			<li>
				<div><img src="images/yaguan.jpg"></div>
				<div>名字7</div>
			</li>
		</ul>
		<hr noshade/>
		<dl >
			<dt><img src="images/1.jpg"/></dt>
			<dd>
				<h4>语句1</h4>
				<div><span> 578 <img src="images/timg.jpg"/></span> </div>
			</dd>
		</dl>
		<hr noshade>
		<dl>
			<dt><img src="images/2.jpg"/></dt>
			<dd>
				<h4>语句2</h4>
				<div><span> 8 <img src="images/timg.jpg"/></span></div>
			</dd>
		</dl>
		<hr noshade/>
		<dl>
			<dt><img src="images/3.jpg"/></dt>
			<dd >
				<h4 >语句3</h4>
				<div><span> 4174 <img src="images/timg.jpg"/></span> </div>
			</dd>
		</dl>
		<hr noshade/>
		<dl>
			<dt><img src="images/4.jpg"/></dt>
			<dd>
				<h4 >语句4</h4>
				<div ><span> 1万 <img src="images/timg.jpg"/></span> </div>
			</dd>
		</dl>
		<hr noshade/>
		<dl>
			<dt><img src="images/5.jpg"/></dt>
			<dd>
				<h4>语句5</h4>
				<div><span> 658 <img src="images/timg.jpg"/></span> </div>
			</dd>
		</dl>
		<hr noshade/>
		<div id="ext">展开更多 <img src="images/xiala.jpg"/></div>
	</div>
</body>
</html>

.w{
    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.2em;
    font-weight: bold;
    height: 31px;
    width: 60px;
    padding-left: 20px;
    color:rgb(45, 86, 199);
}
.fr{
    float: right;
    font-size: 14px;
    height: 31px;
    width: 50px;
    color: rgb(66, 131, 243);
}
.photo{
    padding-top: 10px;
    padding-bottom: 10px;
    height: 100px;
    margin: auto;
    display: flex;
    justify-content: space-around
}
.photo .fl img{
    width: 100%;
    max-width: 65px;
    height: 80px;
    margin: 0 auto;
    flex: 1;
    display: block;
}
.w .fl {
    
    height: 200px;
    width: 324px;
    list-style: none;
    flex: 1;
}
.fs{
    font-size: 14px;
    text-align: center;
    padding-top: 8px;
}
.mid{
    width: 100%;
    height: 80px;
    
    display: flex;
    justify-content: space-between;
}
.mid dt{
    width: 30%;
}
.mid dd{
    display: flex;
    width: 70%;
    text-align: right;
    height: 80px;
    flex-direction: column;
    flex: 1;
    margin: 0;
    flex-wrap: wrap;
}
.mid dt img{
    padding-top: 4px;
    max-width: 100px;
    height: 80%;
    flex-basis: 270px;
}
.mid dd h4{
    flex: 1;
    text-align: left;
    margin: 0 ;
    line-height: 1.5em;
    padding-top: 10px;
    flex-wrap: wrap;
}
 .w .foot{ 
    font-size: 14px;
    height: 40px;
    color: rgb(107, 157, 213);
    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;
   
}
.w .foot img{
    height: 15px;
    width: 18px;
    vertical-align:middle;
}