收藏
批改状态：合格
老师批语：作业中的配图是亮点, 理解得很深刻
0704作业
写一个盒子, 要求用到margin,padding,border, 并用到它们的完整语法, 简写语法
<!DOCTYPE html>
<html lang="us">
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style>
div{
width: 500px;
height: 500px;
border: 1px red solid;/*这是一个1像素，红色，实现的边框*/
margin: 30px 50px;/*外边距是上下30像素 左右50像素*/
padding: 10px;/*内边距是上下左右都为10像素*/
}
p{
width: 200px;
height: 200px;
color: aliceblue;
background-color: aqua;/*背景颜色*/
/*上下左右的边框样式属性值*/
border-top-style: solid;
border-top-color:red;
border-top-width: 5px;
border-right-style: dashed;
border-right-color:blue;
border-right-width:20px;
border-bottom-style: groove;
border-bottom-color:pink;
border-bottom-width: 8px;
border-left-style: inset;
border-left-color:green;
border-left-width: 10px;
text-align: center;/*文字居中*/
line-height: 200px;/*设置文字垂直居中*/
/*外边距的像素值*/
margin-top: 20px;
margin-right: 30px;
margin-bottom: 20px;
margin-left: 30px;
/*内边距的像素值*/
padding-left: 10px;
padding-right:30px;
padding-bottom:40px;
padding-top:20px;
}
</style>
</head>
<body>
<div>
<p>我是一个box</p>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2.模仿课堂案例, 熟悉基本选择器的用法: 属性, 兄弟, 类型, 伪类等,自己举例完成,例如商品列表等来完成它, 重点放在nth-child, nth-of-type的理解上, 一定要多练多想为什么,并能分析执行的结果
*{
margin: 0;
padding: 0;
}
ul li{
/*后代选择器*/
color: #000;
background-color: aqua;
text-align: center;
line-height:50px;
border-radius: 25px;
box-shadow: 5px 5px 5px olive;
list-style: none;
width: 50px;
height: 50px;
border: 1px red solid;
display: inline-block;
margin-left: 10px;
margin-top: 20px;
}
/*id选择器*/
#four{
color: azure;
}
/*类选择器*/
.head{
color:pink;
}
/*属性选择器*/
li[class="two"]{
color: springgreen;
}
/*暂时没搞懂*/
.head ~ *{
color: red;
}
/*伪类选择器*/
ul :first-child{/*ul下的第一个元素*/
/*last-child是最后一个*/
color: moccasin;
}
ul :nth-child(2){/*定位到ul下第二个元素加样式*/
}
ul :nth-child(2n-1){/*选择偶数修改样式*/
}
p:only-of-type {
background-color: pink;
}点击 "运行实例" 按钮查看在线实例
3. 写出你对常用选择器的使用体会, 重点放在标签, class, id, 后代, 群组, 以及常用伪类上
答：标签选择器：例如p,li,ul,input等等这些都是，作用是可以在html中所有的同样的标签统一加上样式。
类选择器：.class 可以同时定义一个或多个标签 加上样式
id选择器：#id 级别最高>类选择器>标签选择器 可以给任何标签加样式
后代选择器：ul li 意是ul下的li的样式会改变
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
