1. 写一个盒子, 要求用到margin,padding,border, 并用到它们的完整语法, 简写语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div1{
width: 100px;
background-color: red;
height:100px;
margin-top:20px;
margin-left:30px;
margin-bottom:20px;
margin-right:30px;
padding-top:10px;
padding-bottom: :10px;
padding-left: :20px;
padding-right: :20px;
border-top:1px solid green;
border-bottom:2px dashed yellow;
border-left:3px double pink;
border-right:4px dotted black;
}
.div2{
width: 100px;
background-color: green;
height:100px;
margin: 10px 20px;
padding: 10px 20px 10px;
border:1px solid red;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>运行实例 »
2. 模仿课堂案例, 熟悉基本选择器的用法: 属性, 兄弟, 类型, 伪类等,自己举例完成,例如商品列表等来完成它, 重点放在nth-child, nth-of-type的理解上, 一定要多练多想为什么,并能分析执行的结果
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/*//标签选择器*/
ul{
margin-top: 0;
margin-bottom: 0;
padding-left:0;
}
/**层级选择器:*!*/
ul li{
width:40px;
height:40px;
background-color: wheat;
list-style:none;
border:1px solid black;
border-radius: 50%;
margin-left:5px;
box-shadow:5px 5px 2px #ccc;
/*设置文本水平居中*/
text-align:center;
line-height:40px;/*文本垂直居中*/
/*内联块:即是块又可以并排显示;块元素:块元素默认独占一行,行内元素:并排元素;*/
display: inline-block;
}
/*id选择器*/
#bg-blue{
background-color: lightblue;
}
/*类选择器*/
.bg-green{
background: lightgoldenrodyellow;
}
/*属性选择器*/
li[id]{
border:2px solid #fff580;
}
/*群组选择器*/
#bg-blue, .bg-green {
border: 2px solid blue;
}
/*常用的样式重置*/
/*body,h1,h2,h3,p,ul{*/
/*margin: 0;*/
/*padding: 0;*/
/**/
/*}*/
/*相邻选择器*/
#bg-blue +.bg-green{
/*选中下一个*/
/*background-color:red;*/
}
#bg-blue ~*{
/*选中下面所有的*/
/*background-color: red;*/
}
/*伪类:子元素选择器,*/
ul:first-child{
/*选中第一个子元素,还有last-child*/
/*background-color: coral;*/
}
/*选中第六个*/
ul:nth-child(6){
/*background-color: coral;*/
}
/*偶数或者括号里用even*/
ul:nth-child(2n){
/*background-color: coral;*/
}
/*奇数或者括号里用odd*/
ul:nth-child(2n-1){
/*background-color: coral;*/
}
/*倒数第三个*/
ul:nth-last-child(3){
/*background-color: coral;*/
}
/*伪类:类型选择器*/
/*ul下的li的第几个选择器 */
ul li:first-of-type{
/*background-color: coral;*/
}
ul li:last-of-type{
/*background-color: coral;*/
}
ul li:nth-of-type(5){
/*background-color: coral;*/
}
/*nth-child(n)关注位置
nth-of-style:除了关注位置外,还要元素的类型匹配
*/
</style>
<title>Document</title>
</head>
<body>
<ul>
<li class="bg-green">1</li>
<li id="bg-blue">2</li>
<li class="bg-green">3</li>
<li class="bg-green">4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3. 写出你对常用选择器的使用体会, 重点放在标签, class, id, 后代, 群组, 以及常用伪类上
选择器是css的核心，使用好选择器是学好网页前台的所必须的。标签选择器简单，但同一个网页有很多相似的标签很容易混稀，因此一般不会大量使用；class选择器是最长用的好处就是可以定义同种类型的属性，进行样式的渲染，很方便。id选择器对一些唯一的标签进行定义，在表单等控件中经常使用。群组选择器可以同时使用很多不同样式的选择器一同进行样式的渲染。伪类选择器使用很复杂，关键是有主要有两类子类选择器和类型选择器，分别侧重点不同，子类选择器对一个类或者标签的子类进行选择设定；类型选择器主要针对标签属性的类型进行设定。