第十三届蓝桥杯（web组），第五题【页面布局】制作网站首页

页面布局主要使用的是flex布局，justify-content和align-item可以让内容居中，这两个属性使用较多。

html里面也添加了相应了类名（注意看哈），这个页面布局有点小瑕疵，浏览内容下面的图片，最外面的背景色（灰色）没有显示（属实不知道为啥），有小伙伴知道的告诉我一下。

html:

<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<link rel="stylesheet" href="./css/style.css"><body id="body"><!--header start--><header class="headerbox"><!--nav start--><nav class="navbox"><img src="./images/logo.png" alt=""><div class="navright"><a class="on" href="#body">app下载</a><a href="#tabtitle">浏览内容</a></div></nav><!--nav end--></header><!--header end--><!--banner start--><section class="banner"><div class="container"><div class=""><imgsrc="./images/phone_sample.png"alt="知乎日报应用截屏"class="phoneimg loaded"/></div><div class="content"><h2>每天三次 每次七分钟</h2><div class="info">在中国，资讯类移动应用的人均阅读时长是 5分钟，而在知乎日报，这个数字是 21。</div></div></div></section><!--banner end--><!--tabtitle start--><section class="tabtitle" id="tabtitle"><h3>浏览内容</h3><h4>最新内容</h4></section><!--tabtitle end--><!--list start--><section class="list"><ul><li style="margin-top: 0;"><a href="#"><img src="data:images/1.jpg" alt="" /><p>怎样使金属变得很脆？</p></a></li><li class="ma-le" style="margin-top: 0;"><a href="#"><img src="data:images/2.jpg" alt="" /><p>有哪些对你很有冲击力的设计？</p></a></li><li class="ma-le" style="margin-top: 0;"><a href="#"><img src="data:images/3.jpg" alt="" /><p>有哪些很重要，教练却没有教的驾驶技巧？</p></a></li><li><a href="#"><img src="data:images/5.jpg" alt="" /><p>谢谢天上掉的玩具</p></a></li><li class="ma-le"><a href="#"><img src="data:images/6.jpg" alt="" /><p>火车上的「最大上沙量」标识是什么意思？</p></a></li><li class="ma-le"><a href="#"><img src="data:images/7.jpg" alt="" /><p>翼龙可以当飞行坐骑么？</p></a></li><li><a href="#"><img src="data:images/1.jpg" alt="" /><p>怎样使金属变得很脆？</p></a></li><li class="ma-le"><a href="#"><img src="data:images/2.jpg" alt="" /><p>有哪些对你很有冲击力的设计？</p></a></li><li class="ma-le"><a href="#"><img src="data:images/3.jpg" alt="" /><p>有哪些很重要，教练却没有教的驾驶技巧？</p></a></li><li><a href="#"><img src="data:images/5.jpg" alt="" /><p>谢谢天上掉的玩具</p></a></li><li class="ma-le"><a href="#"><img src="data:images/6.jpg" alt="" /><p>火车上的「最大上沙量」标识是什么意思？</p></a></li><li class="ma-le"><a href="#"><img src="data:images/7.jpg" alt="" /><p>翼龙可以当飞行坐骑么？</p></a></li></ul><div class="more"><a href="#">更多精彩内容请在APP中查看</a></div></section><!--list end--><!--footer start--><footer class="footer"><div class="footerBox"><div class="footerL"><p style="margin-top: 0;">知乎日报是一款拥有千万用户的资讯类客户端，每日提供来自知乎社区的精选问答，还有国内一流媒体的专栏特稿。</p><p>主题日报包括动漫、设计、大公司、游戏、财经、电影、电子音乐、互联网安全等丰富内容，为业内人和资深爱好者推荐各领域最精彩文章，满足高质量阅读需求。</p><p>在知乎日报，告别浮躁，重获阅读的愉悦。</p><p>© 2020 知乎</p></div><div class="footerR"><img src="data:images/qr.png" alt="" /><p>扫描下载客户端</p></div></div></footer><!--footer end--></body>
</html>

css:

* {margin: 0;padding: 0;text-decoration: none;list-style: none;
}a {color: black
}#body {width: 1024px;margin: 0 auto;
}.navbox {display: flex;height: 78px;width: 1024px;justify-content: space-between;
}.navbox>img {margin-left: 30px;
}.navright {display: flex;align-items: center;width: 250px;margin-right: 30px;justify-content: space-around;
}.on {width: 120px;height: 32px;line-height: 32px;color: #0099f2;background: #F0F9FF;text-align: center;
}.banner {background: #008BED;
}.container {display: flex;justify-content: space-around;
}.content {width: 400px;margin-top: 110px;}.content>h2 {font-size: 40px;line-height: 40px;color: #fdfdfd;}.content>.info {margin-top: 10px;font-size: 16px;line-height: 26px;color: #99d1f8;
}/* tab start */
.tabtitle {margin: 0 auto;width: 960px;height: 100px;display: flex;justify-content: space-between;align-items: center;
}.tabtitle h3 {font-size: 24px;color: #000000;
}.tabtitle h4 {font-size: 24px;color: #cccccc;
}/* list  */
.list {margin: 0 auto;width: 1024px;background-color: #F9F9F9;display: flex;flex-wrap: wrap;
}.list ul {background-color: #F9F9F9;display: flex;flex-wrap: wrap;
}.list li {flex: 1;margin-top: 20px;width: 300px;background-color: white;display: flex;height: 374px;/* align-items: center; */justify-content: center;
}.list li a {justify-content: center;margin-top: 20px;
}.list img {width: 260px;height: 260px;}.ma-le {margin-left: 30px;
}.more {margin-top: 20px;width: 100%;font-size: 20px;line-height: 62px;background-color: #E8EEF2;display: flex;justify-content: center;align-items: center;
}.more a {justify-content: center;color: #59ABDF;
}.footer {margin-top: 30px;width: 100%;height: 265px;background-color: #E5E5E5;
}.footerBox {display: flex;margin-left: 15px;
}.footerL {width: 710px;height: 210px;margin-top: 32px;
}.footerL p {font-size: 14px;line-height: 25px;color: #000000;
}.footerR {height: 152px;margin-left: 100px;margin-top: 25px;display: flex;flex-wrap: wrap;justify-content: center;
}.footerR img {height: 141px;width: 141px;
}

第十三届蓝桥杯（web组），第五题【页面布局】制作网站首页相关推荐

【蓝桥系列】——十三届蓝桥杯PythonB组第五题E题蜂巢（AC代码）
大家好,我是普通小明,初入学习博客,一起加油! 首先,感谢小蓝刷题对我的鼓励,我也希望加入学习算法这个大家庭. 第一篇文章,有些不完美,还请多多指教. 目录 (好像我并不会用锚点T-T) 省赛心得 ...
2022.4.9第十三届蓝桥杯web组省赛个人题解
2022第十三届蓝桥杯第一次开放了web组赛道,博主作为一名前端小白,参加了这次比赛.一共十个题目,目的均是实现特定的网页效果,考点包含三件套.jQuery和vue,这里简单的进行一下个人的题解记录. ...
2022第十三届蓝桥杯web组题解
文章目录 01水果拼盘题目解答 02展开你的扇子题目解答 03和手机相处的时光题目解答 04灯的颜色变化题目解答 05冬奥大抽奖题目解答 06蓝桥知识网题目解答 07布局切换 ...
第十三届蓝桥杯Java-C组2022年考题个人解析
目录前言第一题-排序字母第二题-特殊时间第三题-纸张尺寸第四题-求和第五题-矩形拼接(未解决) 第六题-选数异或第七题-GCD 第八题-青蛙过河(未解决) 第九题-因数平方和第十题-最 ...
【蓝桥杯Web】2022年第十三届蓝桥杯Web大学组国赛真题解析
前言省赛真题解析见: 2022年第十三届蓝桥杯Web大学组省赛真题解析(完整版) 2022年第十三届蓝桥杯Web大学组省赛真题解析(精华版) 更多蓝桥杯题解请查阅专栏:蓝桥杯之前写省赛解析时篇幅过 ...
2022第十三届蓝桥杯JAVAB组省赛总结
2022年第十三届蓝桥杯JAVAB组省赛蓝桥杯准备了好久,毕竟学校还是认可,如果能进国赛还能有保研加分. 今年真是可惜了,题太难了,从去年买了Acwing的课,一直在学,没想到到最后是这么个情况. ...
十三届蓝桥杯单片机组省赛真题程序解析
第一次参加蓝桥杯,线上比赛,记录一下比赛刚开始了十分钟才做上客观题,做上了之后才发现看一次题警告一次,当时就蚌埠住了,随便做了做就交了,手册也没怎么查(查一下直接给了3次黄牌,就没敢查了)其实老师1 ...
第十三届“蓝桥杯”单片机省赛——程序设计题
第十三届"蓝桥杯"单片机省赛--程序设计题在比赛时候编写,代码仅供参考如有不足,多多指教 1.题目 2.代码 main.c程序 #include "reg52.h&q ...
第十三届蓝桥杯Web应用开发（大学组）
文章目录前言 01.水果盘 **题目:** **解答:** 02.展开你的扇子题目解答: 03.和手机相处的时光题目解答 04.灯的颜色变化题目解答 05.冬奥大抽奖题目解答 06蓝 ...
2018年第九届蓝桥杯B组第四题:摔手机题解
摔手机摔手机动态规划在蓝桥杯的时候遇到一次当时没有做对看了题解也没明白如今再次遇到这个类似的题目于是拿出来补补吧摔手机题目如下: 星球的居民脾气不太好,但好在他们生气的时候唯一的 ...

第十三届蓝桥杯（web组），第五题【页面布局】制作网站首页

第十三届蓝桥杯（web组），第五题【页面布局】制作网站首页相关推荐

最新文章

热门文章