web前端——给某网站移动版主页的体育板块进行布局设计
给某门户网站移动版主页的体育板块进行布局设计。
- 创建外部CSS文件，采用链接方式应用到“sports.html”中，按下述要求编写CSS样式设计页面布局；
- 设置页面宽度为浏览器窗口宽度的96%，最小宽度为380px，默认字体大小为14px；
- 分别使用ul-li结构设计首行文本导航链接和图片导航链接；
- 文本导航链接使用浮动定位，字体浅蓝色，“体育”链接字体大小为默认字体大小的1.2倍并加粗显示；
- 图片导航链接采用弹性盒布局，采用flex-grow或flex设置各项目的宽度能随浏览器窗口自适应变化，但最大宽度不能超过100px，各项目分散对齐，如图2所示；
- 每个图片导航项目中的图片也能自适应变化，最大宽度为65个像素；
- 从第三行开始插入多条新闻主题，包括图片、标题和评论数和评论图标，每一条新闻采用dl-dt-dd标签结构来设计，每一个dl标签的高度为80个像素，隐藏图片溢出部分，请采用弹性盒布局进行设计，dt和dd元素的宽度应能自适应调整；
- 设置新闻标题的行间距为1.5倍，评论数字体大小为默认字体的70%；
- 在多条新闻之后插入“展开更多”导航及其图标，要求图标和文字垂直居中对齐。
- 注意：“sports.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>
<!--请在此处链接外部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;
}