【页面布局】制作网站首页 第十三届蓝桥杯（Web 应用开发）线上模拟赛

<>【页面布局】制作网站首页

<>考试需求

<>关键尺寸批注如下：

<>解答：

style.css:
body { box-sizing: border-box; width:1024px; margin: auto; background-color:
#F9F9F9; } *{ margin:0;padding:0; } body a { text-decoration:none; } body li {
list-style: none; } .headerbox .navbox{ height: 78px; background-color: #ffffff;
} .navbox img{ margin-top: 14px; margin-left: 30px; } .navright { float: right;
line-height: 78px; margin-right: 50px; } .on{ display: inline-block; line-height
: 32px; text-align: center; width: 120px; height: 32px; margin-right: 30px;
background-color: #F0F9FF; color: #0099F2; } .navright :nth-child(2) { color:
black; } /* 图片 */ .banner { font-size:0; background-color: #008BED; } .banner
.container .img01{ display: inline; margin-left: 30px; margin-bottom: 0px; }
.banner .container .content { float: right; } .content { margin-top: 100px;
margin-right: 30px; } .content h2{ font-size: 40px; line-height: 40px; color:
#fdfdfd; } .content .info { font-size: 16px; line-height: 26px; color: #99d1f8;
width: 418px; } /* 浏览内容 */ .tabtitle { margin: auto; height: 100px; width: 960px
; } .tabtitle h3 { line-height: 100px; display: inline; font-size: 24px; color:
#000000; } .tabtitle h4 { margin: 0 auto; float: right; line-height: 100px;
display: inline; font-size: 24px; color: #CCCCCC; } /* 小盒子 */ .list { margin:
auto; display: flex; flex-wrap: wrap; flex-direction: column; width: 960px; /*
background-color: blue; */ } .list ul { margin: auto; padding: 0;
background-color: #F9F9F9; display: flex; flex-wrap: wrap; justify-content:
space-between; } .list ul li { width: 300px; height: 374px; margin-bottom: 20px;
background-color: #ffffff; } .list ul li a { margin-left: 20px; } .list ul li a
img { margin-top: 20px; width: 260px; height: 260px; } .list ul li a p { color:
#333333; margin-left: 20px; font-size: 14px; } .list .more { text-align: center;
height: 62px; line-height: 62px; font-size: 20px; background-color: #E8EEF2; }
.list .more a { color: #59ABDF; } /* 结尾 */ .footer { overflow: hidden; height:
265px; margin-top: 30px; background-color: #E5E5E5; } .footerBox { display: flex
; margin: auto; justify-content: space-between; color: #000000; width: 960px;
font-size: 14px; line-height: 25px; } .footer .footerL { overflow: hidden; width
: 710px; height: 210px; margin-top: 32px; } .footer .footerL p { margin-bottom:
15px; } .footer .footerR { margin-top: 30px; text-align: center; } .footer img {
width: 141px; height: 152px; }
index.html:（需添加img标签和一个类名）

• « 上一篇：lua时间戳和日期转换
• » 下一篇：layui table组件宽度设置