收藏
批改状态：合格
老师批语：盒模型是布局的基础, 尽管现在有了许多的变种,例如弹性盒子, 伸缩盒子等,但本质上并未改变
1. 写一个盒子, 要求用到margin,padding,border, 并用到它们的完整语法, 简写语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.box{
width:300px;
height:300px;
background-color: #f21919;
border-top: 2px dashed black;
border-right: 2px dashed black;
border-bottom: 2px dashed black;
border-left: 2px dashed black;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px
/*这是一个宽高:300px border为2px黑色虚线的盒子,padding为5px*/
}
</style>
<title>盒子选择器的用法</title>
</head>
<body>
<div class="box">我是一个盒子</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2. 模仿课堂案例, 熟悉基本选择器的用法: 属性, 兄弟, 类型, 伪类等,自己举例完成,例如商品列表等来完成它, 重点放在nth-child, nth-of-type的理解上, 一定要多练多想为什么,并能分析执行的结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
ul{
/*演示基本选择器*/
border: 1px dashed #f21919;
margin: 0 autopx;
padding-left: 0px;
}
/* 层级选择器: 选择 ul 的后代元素*/
ul li{
list-style:none;
width:40px;
height:40px;
bachkground-color:wheat;
text-align: center;
line-height: 40px;
border-radius: 50%;
display:inline-block;
margin-left: 10px;
box-shadow: 2px 2px 1px #21e207;
}
/* id选择器 */
#bg-blue
{
background-color: yellow;
}
/* 类选择器 */
.bg-reb
{
background-color: aqua;
}
/* 属性选择器 */
li[id=bg-blue]{
border: 2px solid #f21919;
}
/* 兄弟选择器 */
#bg-blue~*{
background-color: yellow;
}
/* 伪类: 子元素选择器 */
ul :first-child {
background-color: coral;
}
ul :last-child {
/* 因优先级问题,需要把前面的兄弟选择器注释掉 */
background-color: coral;
}
/*:nth-last-child(n): 倒数第n个*/
ul :nth-last-child(3) {
background-color: coral;
}
div :nth-child(2) {
background-color: lightgreen;
}
div:first-of-type :nth-child(3){
background-color: -lightblue;
}
p:nth-of-type(2) {
background-color: yellow;
}
p:only-of-type {
background-color: pink;
}
</style>
<title>盒子选择器的用法</title>
</head>
<body>
<!--演示基本选择器-->
<ul>
<li class="bg-red">临</li>
<li id="bg-blue">兵</li>
<li class="bg-reb">斗</li>
<li class="bg-red">者</li>
<li>皆</li>
<li>阵</li>
<li>列</li>
<li>在</li>
<li>前</li>
</ul>
<!-- 演示伪类选择器中的子元素与类型选择器之间的区别与联系 -->
<div>
<p>小明</p>
<li>小华</li>
<p>小花</p>
</div>
<div>
<p>小新</p>
<li>小强</li>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
3. 写出你对常用选择器的使用体会, 重点放在标签, class, id, 后代, 群组, 以及常用伪类上
答:标签选择器可以在html中统一加上样式,伪类中的子元素选择器与类型选择器的功能几乎是一样的,这二种伪类选择器关注点不同, 子元素选择器的重点是 "child" 关键字上,关注的是子元素位置
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
