<!DOCTYPE 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>幸福·和谐·平安夜</title>
<link rel="stylesheet" href="css/base.css">
<meta key="2022年11月18日09:20:08 老师付 H5考核练习题">
</head>
<body>
<!--top-->
<div class="col-12" style="background-color: lightgray;height: 3vh;">
<div class="col-1" style="height: 3vh;"></div>
<div class="col-10" style="height: 3vh;">
<ul class="left-ul">
<style>
.left-ul {
width: 100%;
}
.left-ul li {
width: 20%;
float: left;
text-align: center;
line-height: 3vh;
}
.left-ul li:last-child:hover {
cursor: pointer;
color: #fff;
background-color: #000;
}
</style>
<li>《幸福·和谐·平安夜》</li>
<li>Happiness·harmonious·Christmas Eve</li>
<li>商务电话：0533-8888888</li>
<li>全国订购热线：400-800-1314</li>
<li>下载：APP</li>
</ul>
</div>
<div class="col-1" style="height: 3vh;"></div>
</div>
<!-- 分隔符 -->
<div class="col-12" style="background-color: #fff;height: 2vh;"></div>
<!-- logo -->
<div class="col-12" style="height: 10vh;">
<div class="col-1" style="background-color: #fff;height: 10vh;"></div>
<div class="col-10" style="background-color: skyblue;height: 10vh;">
<div class="col-1" style="background-image: url('imgs/logo.png');background-size: 100% 100%;background-repeat: no-repeat;height: 10vh;"></div>
<div class="col-10" style="height: 10vh;line-height: 10vh;text-align: center;font-size: 2.5rem;font-family: '华文行楷';font-weight: bolder;">
礼包装满"好运" 火炉燃烧"吉祥" 烟囱飘走是"愁云" 圣诞树照亮"幸福"
</div>
<div class="col-1" style="background-image: url('imgs/logo.png');background-size: 100% 100%;background-repeat: no-repeat;height: 10vh;"></div>
</div>
<div class="col-1" style="background-color: #fff;height: 10vh;"></div>
</div>
<!-- banner -->
<div class="col-12" style="height: 50vh;">
<div class="col-1" style="background-color: #fff;height: 50vh;"></div>
<div class="col-10" style="background-image: url('imgs/banner.jpeg');background-size: 100% 110%;height: 50vh;text-align: center;line-height: 50vh;font-size: 4rem;font-family: '宋体';">
老师付·祝学生们·平安夜幸福
</div>
<div class="col-1" style="background-color: #fff;height: 50vh;"></div>
</div>
<!-- 列表 -->
<div class="col-12" style="height: 30vh;">
<div class="col-1" style="background-color: #fff;height: 30vh;"></div>
<div class="col-10" style="background-color: #fff;height: 30vh;">
<style>
.list-box {
border: 1px solid gray;
box-shadow: 2px 2px 2px gray;
height: 28vh;
border-radius: 12px;
margin-right: 1.5%;
margin-left: 1.5%;
text-align: center;
}
.list-box:hover {
box-shadow: 4px 4px 4px black;
}
.list-box dl {
width: 100%;
height: 28vh;
}
.list-box dl img {
border-radius: 12px;
width: 100%;
height: 25vh;
}
</style>
<div class="list-box col-2">
<dl>
<dt><img src="imgs/list1.jpeg"/></dt>
<dd>爱心Apple</dd>
</dl>
</div>
<div class="list-box col-2">
<dl>
<dt><img src="imgs/list2.jpeg"/></dt>
<dd>爱的礼盒</dd>
</dl>
</div>
<div class="list-box col-2">
<dl>
<dt><img src="imgs/list3.jpeg"/></dt>
<dd>幸福手办</dd>
</dl>
</div>
<div class="list-box col-2">
<dl>
<dt><img src="imgs/list4.jpeg"/></dt>
<dd>诉说爱巢</dd>
</dl>
</div>
<div class="list-box col-2">
<dl>
<dt><img src="imgs/list5.jpeg"/></dt>
<dd>私人订制</dd>
</dl>
</div>
</div>
<div class="col-1" style="background-color: #fff;height: 30vh;"></div>
</div>
<!-- 网站备案信息 -->
<div class="col-12" style="height: 5vh;">
<div class="col-1" style="background-color: #fff;height: 5vh;"></div>
<div class="col-10" style="background-color: #000;height: 5vh;color: #fff;line-height: 5vh;text-align: center;">
某平安夜社团 某某社团干事 ICP经营许可证：222-222222222 | ICP备22222222号 公网安备0000000000号 Copyright © 0000-2222
</div>
<div class="col-1" style="background-color: #fff;height: 5vh;"></div>
</div>
</body>
</html>
HTML5响应式网页设计-核心技能考核示例(用于2022年11月H5考核)，素材
需积分: 0 110 浏览量
2022-11-18
13:37:50
上传
评论
收藏 2.25MB RAR 举报
H5_Test_平安夜示例.rar （9个子文件） 
css 
base.css 733B
index.html 6KB imgs banner.jpeg 476KB list2.jpeg 97KB list5.jpeg 198KB list4.jpeg 161KB list3.jpeg 186KB
logo.png 1.09MB list1.jpeg 121KB资源评论
