作业1：写一个盒子, 要求用到margin,padding,border, 并用到它们的完整语法, 简写语法。
html代码如下：
实例
<!--作业1：写一个盒子, 要求用到margin,padding,border, 并用到它们的完整语法, 简写语法--> <p>作业1：写一个盒子, 要求用到margin,padding,border, 并用到它们的完整语法, 简写语法</p> <div class="box1"> <p>盒模型完整语法</p> </div> <div class="box2"> <p>盒模型简写语法</p> </div>
运行实例 »
点击 "运行实例" 按钮查看在线实例
CSS如下：
实例
.box1 {
width: 240px;
height: 30px;
background-color: aqua;
text-align: center;
padding-top: 20px;
padding-right: 30px;
padding-bottom: 40px;
padding-left: 50px;
border-color: blue;
border-top-style:solid;
border-right-style:dashed;
border-bottom-style:solid;
border-left-style:dashed;
border-top-width: 10px;
border-right-width: 10px;
border-bottom-width: 10px;
border-left-width: 10px;
margin-top: 20px;
margin-right: 30px;
margin-bottom: 40px;
margin-left: 50px;
}
.box2 {
width: 240px;
height: 90px;
background-color:chartreuse;
text-align: center;
padding:20px ;
border: 20px blue solid;
margin: 30px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
作业2：模仿课堂案例, 熟悉基本选择器的用法: 属性, 兄弟, 类型, 伪类等,自己举例完成,例如商品列表等来完成它, 重点放在nth-child, nth-of-type的理解上, 一定要多练多想为什么,并能分析执行的结果。
HTML代码如下：
实例
<!--作业2：模仿课堂案例, 熟悉基本选择器的用法: 属性, 兄弟, 类型, 伪类等,自己举例完成,例如商品列表等来完成它, 重点放在nth-child, nth-of-type的理解上, 一定要多练多想为什么,并能分析执行的结果--> <p>作业2：模仿课堂案例, 熟悉基本选择器的用法: 属性, 兄弟, 类型, 伪类等,自己举例完成,例如商品列表等来完成它, 重点放在nth-child, nth-of-type的理解上, 一定要多练多想为什么,并能分析执行的结果</p> <!--1、层级、ID、类、属性、兄弟、群组、伪类、类型选择器--> <p>1、层级、ID、类、属性、兄弟、群组、伪类、类型选择器</p> <p>黑色边框为兄弟选择器</p> <div> <ul> <li id="bg-red">ID选择器</li> <li class="bg-blue">类选择器</li> <li style="font-size : 20px">属性选择器</li> <li style="color: darkgreen">属性选择器</li> <li style="font-style: italic">群组选择器</li> <li>6</li> <li style="font-style: italic">群组选择器</li> <li>伪类选择器</li> <li>9</li> <li>类型选择器</li> </ul> </div> <div> <ul> <li id="bg-yellow">群组选择器</li> <li class="bg-green">群组选择器</li> <li style="font-size : 20px">3</li> <li class="bg-green">群组选择器</li> <li class="bg-green">群组选择器</li> <li>6</li> <li class="bg-green">群组选择器</li> <li>伪类选择器</li> <li>9</li> <li>类型选择器</li> </ul> </div> <br> <br> <!--2、表单选择器--> <p>2、表单选择器</p> <div> <p> <label for="user">账号：</label> <input type="text" id="user" name="user"> </p> <p> <label for="password">密码：</label> <input type="password" id="password" name="password"> </p> <p> <label for="nan">性别：</label> <input type="radio" name="gender" value="nan" id="nan"><label for="nan">男</label> <input type="radio" name="gender" value="nv" id="nv"><label for="nv">女</label> <input type="radio" name="gender" value="baomi" id="baomi"><label for="baomi">保密</label> </p> <p> <button type="button">提交</button> </p> </div>
运行实例 »
点击 "运行实例" 按钮查看在线实例
CSS代码如下：
实例
/*标签选择器*/
ul {
margin-top:0;
margin-bottom:0;
padding-left: 0;
padding-right: 0;
}
/*层级选择器,也叫做后代选择器*/
/*空格后面的元素均会被选中*/
/*如果选择更多的层级，用空格区分*/
ul li {
/*设置背景色*/
background-color: aquamarine;
/*设置圆角，当达到50%就可以变成正圆*/
margin: 20px;
border-radius: 50%;
/*清楚无序列表前面的点*/
list-style: none;
/*给li设置一个宽高*/
width: 120px;
height: 120px;
/*给li设置值边框*/
border: 1px solid red;
/*文本横向居中*/
text-align: center;
/*设置文本行高与li宽高一直，使文本纵向居中*/
line-height: 120px;
/*设置显示属性为内联块使之横向显示*/
display: inline-block;
}
/*ID选择器*/
#bg-red {
background-color: red;
}
/*类选择器*/
.bg-blue {
background-color:lightblue;
}
/*属性选择器*/
/*选择带有style属性的li元素*/
/*标签名与中括号之间不能有空格*/
li[style] {
background-color: coral;
}
/*群组选择器*/
#bg-yellow,.bg-green {
background-color : chartreuse;
}
/*兄弟选择器*/
/* + 号 只选择同级的下一个元素*/
/* ~ 号 可以选择后面同级的所有元素*/
#bg-red + .bg-blue {
border: black 3px solid;
}
#bg-yellow ~ * {
border: black 3px solid;
}
/*伪类选择器*/
/*冒号前必须有空格，冒号后面不能带空格*/
ul :nth-child(8) {
background-color: linen;
}
/*类型选择器*/
/*冒号前后都不能带空格*/
ul li:nth-of-type(10) {
background-color: darkmagenta;
}
/*表单选择器*/
/*冒号前后不能有空格*/
button:hover {
width: 120px;
height: 50px;
color: blue;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
作业3：写出你对常用选择器的使用体会, 重点放在标签, class, id, 后代, 群组, 以及常用伪类上。
答：常用选择器分为以下几种类型：
1、标签选择器：
直接使用html标签进行选择。
2、层级选择器：
直接使用html标签进行选择，并可对一个元素内的多个子元素进行选择，使用空格符将下级元素标签隔开。
3、ID选择器：
html中使用ID关键字进行标记，作为属性出现，CSS中使用#号开头进行标记，一个页面中只能有一个ID号
4、类选择器：
html中使用class关键字进行标记，作为属性出现，CSS中使用“.”作为标记，是最常用的选择器，可以对一组元素进行选择。
5、属性选择器：
使用中标签及括号“[ ]”进行选择，括号内填写元素的属性名称，但不要写属性值，同种属性的元素将会被选中。注意：标签和中括号之间不要有空格符。
6、群组选择器：
可以将多个ID、类、其他属性的元素一次性选中，使用逗号将各属性名称分隔开，这里填写的是属性值。ID名称前加#，类名称前加点
7、兄弟选择器：
用于选择同级的元素，使用“+”号链接相邻的两个元素的属性值，即可以选中主元素的后一个元素，此方法只可以选中后一个元素。
8、相邻选择器：
用于选择同级的元素，使用元素属性值及“+”号链接“*”进行选择，即可以选中主元素的后一个元素，此方法只可以选中后一个相邻的任意属性的元素。
9、同级选择器：
用于选择同级的元素，使用元素属性值及“~”号链接“*”进行选择，即可以选中主元素后所有同级任意属性的元素。
10、伪类选择器：
使用标签加冒号对进行选择，此方法是根据元素的位置进行选择。注意：冒号前必须有空格，冒号后面不能带空格，写错格式无效。
11、类型选择器：
在伪类选择器基础上，冒号之前再加上一个子元素标签，以便对不同标签的子元素进行分类选择。此方法关注的是元素的类型，而不是位置。注意：冒号前后都不能带空格，写错格式无效。格式为：标签 标签:元素类型。
12、表单选择器：
对表单元素进行选择。注意：冒号前后都不能带空格，写错格式无效。
