本练习训练了孩子们的栅格化布局,H5标签,CSS样式,并对列表与菜单进行了强化训练。使孩子们更好的掌握H5布局,为后面的框架教学打好基础。
链接:https://pan.baidu.com/s/1VBniK_1n2xw8oHm1PMZ4iw 提取码:1111
重点单词涉及:
1、box-sizing: border-box;免计算边框像素 2、banner横幅 3、background-image: url("imgs/bg.png");设置背景图片 4、background-size: 100% 100%;拉伸背景图片填充整个容器 5、©是©符号的写法 6、border-radius: 12px;圆角设置 7、box-shadow: 2px 2px 2px 2px gray;设置阴影 8、font-size: 3rem;设置字体大小为浏览器默认大小的3倍 9、height: 10vh;设置高度为浏览器高度的百分比数值,支持浮点数 10、hover;伪类选择器
先创建base.css文件以及编码,之后创建正式的index.htmlwen文件,通过link引入base.css
css文件夹是放置base.css文件的,在外层是index.html
我们要处理,内外边距,ul样式,十二分之一列宽,十二分之十列宽,还有100%列宽三个就够了。
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
ul{
list-style: none;
}
.col-1{
width: 8.33%;
float: left;
}
.col-10{
width: 83.33%;
float: left;
}
.col-12{
width: 100%;
float: left;
}
直接通过link引入css文件,这里路径是【css/base.css】
<link rel="stylesheet" href="css/base.css">
引入位置
这里是确认考生信息,确认学生自行完成。
拼接方式:考场 姓名 时间
<meta key="实训室一 老师付 2022年12月3日10:53:58">
示例源码:
<!--top-->
<div class="col-12" style="background-color: lightgray;height: 5vh;"></div>
<!-- banner_text -->
<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>
<div class="col-1" style="background-color: #fff;height: 10vh;"></div>
</div>
<!-- banner_img -->
<div class="col-12" style="height: 50vh;">
<div class="col-1" style="background-color: #fff;height: 50vh;"></div>
<div class="col-10" style="background-color: lightblue;height: 50vh;"></div>
<div class="col-1" style="background-color: #fff;height: 50vh;"></div>
</div>
<!-- list_info -->
<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: lightpink;height: 30vh;"></div>
<div class="col-1" style="background-color: #fff;height: 30vh;"></div>
</div>
<!-- footer -->
<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;"></div>
<div class="col-1" style="background-color: #fff;height: 5vh;"></div>
</div>
1、top顶部菜单,这里水平分为5个选项,每个20%,内容居中对齐,添加鼠标悬停事件,悬停效果如图【API接口工具】。
2、banner_text文本水平居中,垂直居中高度10vh,大小2倍浏览器默认大小,加粗。
3、banner_img文本水平居中,垂直居中高度50vh,大小3倍浏览器默认大小,加粗。
4、footer文本水平居中,垂直居中高度5vh,文字颜色为黑色。其中【©】符号为2分。
源码示例:
<!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">
<body>
<!--top-->
<div class="col-12" style="background-color: lightgray;height: 5vh;">
<style>
.top_ul{
width: 100%;
text-align: center;
}
.top_ul li{
width: 20%;
float: left;
line-height: 5vh;
cursor: pointer;
}
.top_ul li:hover{
background-color: #000;
color: #fff;
}
</style>
<ul class="top_ul">
<li>DB开发工具</li>
<li>Java开发工具</li>
<li>.Net开发工具</li>
<li>Python开发工具</li>
<li>API接口工具</li>
</ul>
</div>
<!-- banner_text -->
<div class="col-12" style="height: 10vh;">
<div class="col-1" style="background-color: #fff;height: 10vh;"></div>
<style>
.banner_text{
text-align: center;
line-height: 10vh;
font-size: 2rem;
font-weight: bolder;
}
</style>
<div class="col-10 banner_text" style="background-color: skyblue;height: 10vh;">
合适的开发工具——项目成功的开始
</div>
<div class="col-1" style="background-color: #fff;height: 10vh;"></div>
</div>
<!-- banner_img -->
<div class="col-12" style="height: 50vh;">
<div class="col-1" style="background-color: #fff;height: 50vh;"></div>
<style>
.banner_img{
text-align: center;
line-height: 50vh;
font-size: 3rem;
font-weight: bolder;
background-image: url("imgs/bg.png");
background-size: 100% 100%;
}
</style>
<div class="col-10 banner_img" style="background-color: lightblue;height: 50vh;">
根据不同项目选择不同的工具
</div>
<div class="col-1" style="background-color: #fff;height: 50vh;"></div>
</div>
<!-- list_info -->
<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: lightpink;height: 30vh;"></div>
<div class="col-1" style="background-color: #fff;height: 30vh;"></div>
</div>
<!-- footer -->
<div class="col-12" style="height: 5vh;">
<div class="col-1" style="background-color: #fff;height: 5vh;"></div>
<style>
.footer_text{
text-align: center;
color: white;
line-height: 5vh;
}
</style>
<div class="col-10 footer_text" style="background-color: #000;height: 5vh;">
某社团某某干事ICP经营许可证: 222 22222222 | ICP备22222222号公网安备000000000号Copyright©0000 2222
</div>
<div class="col-1" style="background-color: #fff;height: 5vh;"></div>
</div>
</body>
</html>
设置背景图片,背景素材名为【bg.png】,要求充拉伸满整个div容器。
源码示例:
background-image: url("imgs/bg.png");
background-size: 100% 100%;
添加位置:
我们这里是展示我们要使用的工具:
我们使用dl、dt、dd来遍历我们的常用工具,遍历完成后给最外层的父类div容器添加一个hover伪类选择器,添加box-shadow属性,阴影单位都是2px,颜色为gray灰色。
有详细的注释(2分) 有比较规范的类名命名(3分)
源码:
<!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" />
</head>
<body>
<!--top-->
<div class="col-12" style="background-color: lightgray;height: 5vh;">
<style>
.top_ul {
width: 100%;
text-align: center;
}
.top_ul li {
width: 20%;
float: left;
line-height: 5vh;
cursor: pointer;
}
.top_ul li:hover {
background-color: #000;
color: #fff;
}
</style>
<ul class="top_ul">
<li>DB开发工具</li>
<li>Java开发工具</li>
<li>.Net开发工具</li>
<li>Python开发工具</li>
<li>API接口工具</li>
</ul>
</div>
</div>
<!-- banner_text -->
<div class="col-12" style="height: 10vh">
<div class="col-1" style="background-color: #fff; height: 10vh"></div>
<style>
.banner_text {
text-align: center;
line-height: 10vh;
font-size: 2rem;
font-weight: bolder;
}
</style>
<div class="col-10 banner_text" style="background-color: skyblue; height: 10vh">
合适的开发工具——项目成功的开始
</div>
<div class="col-1" style="background-color: #fff; height: 10vh"></div>
</div>
<!-- banner_img -->
<div class="col-12" style="height: 50vh">
<div class="col-1" style="background-color: #fff; height: 50vh"></div>
<style>
.banner_img {
text-align: center;
line-height: 50vh;
font-size: 3rem;
font-weight: bolder;
background-image: url("imgs/bg.png");
background-size: 100% 100%;
}
</style>
<div class="col-10 banner_img" style="background-color: lightblue; height: 50vh">
根据不同项目选择不同的工具
</div>
<div class="col-1" style="background-color: #fff; height: 50vh"></div>
</div>
<!-- list_info -->
<div class="col-12" style="height: 30vh">
<div class="col-1" style="background-color: #fff; height: 30vh"></div>
<div class="col-10" style="height: 30vh">
<style>
.list_box {
text-align: center;
width: 18%;
height: 28vh;
float: left;
border: 1px solid black;
margin: 1%;
border-radius: 12px;
}
.list_box:hover {
box-shadow: 2px 2px 2px 2px gray;
}
.list_box img {
width: 90%;
height: 23vh;
}
</style>
<div class="list_box">
<dl>
<dt><img src="imgs/list1.png" /></dt>
<dd>Java开发工具</dd>
</dl>
</div>
<div class="list_box">
<dl>
<dt><img src="imgs/list2.png" /></dt>
<dd>.Net开发工具</dd>
</dl>
</div>
<div class="list_box">
<dl>
<dt><img src="imgs/list3.png" /></dt>
<dd>Python开发工具</dd>
</dl>
</div>
<div class="list_box">
<dl>
<dt><img src="imgs/list4.png" /></dt>
<dd>API开发工具</dd>
</dl>
</div>
<div class="list_box">
<dl>
<dt><img src="imgs/list5.png" /></dt>
<dd>DB开发工具</dd>
</dl>
</div>
</div>
<div class="col-1" style="background-color: #fff; height: 30vh"></div>
</div>
<!-- footer -->
<div class="col-12" style="height: 5vh">
<div class="col-1" style="background-color: #fff; height: 5vh"></div>
<style>
.footer_text {
text-align: center;
color: white;
line-height: 5vh;
}
</style>
<div class="col-10 footer_text" style="background-color: #000; height: 5vh">
某社团某某干事ICP经营许可证: 222 22222222 |
ICP备22222222号公网安备000000000号Copyright©0000 2222
</div>
<div class="col-1" style="background-color: #fff; height: 5vh"></div>
</div>
</body>
</html>