收藏
批改状态：合格
老师批语：你的进度有点慢了, 请尽快跟上大部队
一，写一个盒子, 要求用到margin,padding,border, 并用到它们的完整语法, 简写语法
盒子代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style1.css"> <title>盒子</title> </head> <body> <div class="box1"></div> </body> </html>
style.css代码
.box1 {
width: 300px;
height:300px;
hackground-color: lightblue;
/*内边距全写*/
/*padding-top: 20px;*/
/*padding-right: 30px;*/
/*padding-bottom: 40px;*/
/*padding-left: 50px;*/
/*简写*/
/*padding: 20px 30px 40px 50px;*/
/*左=右：30*/
/*padding: 20px 30px 50px;*/
/*左=右：30；上=下：50*/
/*padding: 30px 40px;*/
/*左=右=上=下*/
padding: 30px;
/*外边距规则同上*/
margin: 20px;
/*边框全写*/
/*border-top-width: 5px;*/
/*border-top-color: red;*/
/*border-top-style: solid;*/
/*边框简写：color和style可不按顺序*/
/*border-top: 5px red solid;*/
/*按住alt键，选择要修改的对象，可同时修改多个对象*/
border-ringht-width: 5px;
border-ringht-color: green;
border-ringht-style: solid;
border-right: 5px solid green;
border-bottom-width: 15px;
border-bottom-color: blue;
border-bottom-style: solid;
border-bottom: 15px solid blue;
border-left-width: 25px;
border-left-color: cyan;
border-left-style: solid;
border-left: 25px cyan solid;
/*border: 5px solid black;*/
/*边框圆角是内外边距，边框和内容的px（像素）总和，也可用百分比代替数值*/
border-radius: 50%;
}下图为运行结果
二，基本选择器的用法
先写一个盒子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>基本选择器</title>
</head>
<body>
宝马一共有9系。分别是1，3，5，6，7，8，X，Z，M系
<!--ul>li{$}*9然后按tab键生成-->
<ul>
<li class="bg-green">1系，小型车，一般为两门四坐，运动车型，操控性极佳，动力较强，配制比较一般，价格在20万到30万之间。</li>
<li id="bg-blue">3系，中级车，一般为四门四座，运动车型，操控性极佳，动力较强，配制比较一般，价格在30万到50万之间。另有两门四座的Ci版价格在70万左右。</li>
<li class="bg-green">5系，中级车，均为四门四座，属于商务车型，豪华配置，动力较强，操控性一般。价格在50万到70万之间。</li>
<li>6系，豪华跑车，两门四座，价格在140万到220万之间。</li>
<li>7系，豪华轿车，四门四座，属于商务车型，豪华配置，动力较强，操控性一般。价格在90万到200万之间。</li>
<li>i系，分别是i3，i8，是宝马电动车以及混合动力系列。价格是30万到200万之间。</li>
<li>X系，分为X3 ，X5和X6，都是宝马的SUV车系。价格在60万到150万之间。</li>
<li>M系，各轿车及跑车系列的高性能版本，目前有M3,M5,M6，Z4M等，普遍比普通版本贵一倍以上。</li>
<li>Z系，小型豪华跑车，两门四座，目前主要是Z4。Z3，Z8已停产。价格在60万到80万之间。</li>
</ul>
<div>
<p>唐僧</p>
<li>孙悟空</li>
<p>猪悟能</p>
</div>
<div>
<p>沙悟净</p>
<li>白龙马</li>
</div>
</body>
</html>然后再建一个stylesheeet，在里面编写选择器
1，标签选择器
ul {
/*margin-top: 0;*/
/*margin-bottom: 0;*/
/*padding-left: 0;*/
/*border: 1px solid red;*/
}2，后代选择器，选择ul的后代元素
ul li {
/*清除样式点*/
list-style: none;
width: 900px;
height:40px;
background-color: wheat;
border: 1px solid black;
box-shadow: 2px 2px 2px #888;
/*右 下 扩散 灰色*/
}3，id选择器
#bg-blue {
background-color: lightblue;
}4类选择器
.bg-green {
background-color: lightgreen;
}5属性选择器
li[id] {
border: 2px solid red;
}6群组选择器
#bg-blue, .bg-green {
border: 2px solid blue;
}7相邻选择器
#bg-blue + .bg-green
/*+：只选中相邻的同级元素*/
{
background-color: yellow;
}8兄弟选择器
#bg-blue ~ * {
background-color: yellow;
}9伪类选择器：子选择器
/*选中第一个子元素*/
ul :first-child {
background-color: coral;
}
/*选中最后一个子元素*/
ul :last-child {
background-color: coral;
}
/*选中某一个子元素*/
ul :nth-child(5) {
background-color: coral;
}
/*选中偶数元素：2n或者even*/
ul :nth-child(2n) {
background-color: coral;
}
/*选中奇数元素：2n+1或者add*/
ul :nth-child(2n+1) {
background-color: coral;
}
/*选中倒数元素*/
ul :nth-last-child(3) {
background-color: coral;
}10伪类选择器：类型选择器
重点： :nth-child(n):只关注位置
:nth-of-type(m):除了关注位置外，还要关注元素的类型
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-type(m):除了关注位置外，还要关注元素的类型*/
div :nth-child(2) {
background-color: darkviolet;
}
div:first-of-type :nth-child(3) {
background-color: hotpink;
}
/*等同于上一步*/
p:nth-of-type(2) {
background-color: hotpink;
}三,选择器的编写符合叠加原理，同一级别中后写的会覆盖先写的样式
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
