20190704作业

实例

/*标签选择器*/
ul{
   margin-top: 0px;
   margin-bottom: 0px;
   padding-left: 0px;
   /*border: 1px solid red;*/

}
/*后代选择器*/
ul>li{
   list-style: none;
   width: 40px;
   height: 40px;
   background-color: wheat;
   border: 1px solid black;
   /*居中*/
   text-align: center;
   /*行垂直居中*/
   line-height: 40px;
   /*圆形*/
   border-radius: 50%;
  /*块元素：可以设置宽高
    默认独占一行*/
   display: inline-block;
   margin-left: 5px;
   /*增加阴影*/
   box-shadow: 2px 2px 2px #888;

}
/*ID选择器*/
#bg-blue{
   /*background-color: #0c7df5;*/

}
/*样式选择器*/
.bg-green{
   /*background-color: #00cb6f;*/
}
li[id="bg-blue"]{
   /*border: red;*/
}
/*群组选择器*/
#bg-blue,.bg-green{
   /*border: #2d88f1;*/

}
/*相邻选择器或同级选择器*/
/*#bg-blue +.bg-green{*/
/*    background-color:yellow;*/

/*}*/

/*#bg-blue ~*{*/
/*    background-color:yellow;*/

/*}*/

/*伪类选择器：子元素选择器*/
ul :first-child{
/*选中第一个子元素*/
/*   background-color: coral;*/
}
/*选择最后一个*/
ul :last-child{

   /*background-color: coral;*/
}
/*选择第六个*/
ul :nth-child(6){
   /*background-color: coral;*/

}
/*2n-1 基数也可以用 odd*/
ul :nth-child(2n-1){
   /*background-color: coral;*/
}
/*2n  偶数  也可以even*/
ul :nth-child(2n){
   /*background-color: #3da70d;*/
}
/*倒数*/
ul :nth-last-child(3){
   /*background-color:red;*/

}
/*伪类的类型选择器*/
ul li:first-of-type{
   /*background-color:coral;*/

}
ul li:last-of-type{
   /*background-color:coral;*/

}

ul li:nth-of-type(5){
  /*background-color: #2d88f1;*/
}

/*:nth-child(m):关注位置*/
/*:nth-of-type(n):除了关注位置，还需要关注类型匹配*/
/*li:nth-child(m):如果这样写，那么跟li:nth-of-type(n)功能几乎一样*/


div:nth-child(2){
   /*background-color: green;*/

}
div:first-of-type :nth-child(3){
   /*background-color: green;*/
}

p:nth-of-type(2){
   /*background: gainsboro;*/
}
form:enabled{
   background-color: green;
}

form{
   width: 350px;
   height: 280px;
   border: black;
   text-align: center;
   border-radius: 5px;
   box-shadow: 2px 2px 4px black;
   padding-top: 15px;
   background-color:#888888 ;
   margin-top: 200px;

}

button{
   width: 60px;
   height: 30px;
   background-color: #888888;
   border: none;
   color: black;
   padding-top: 5px;
}
button:hover{
   width: 60px;
   height: 30px;
   background-color: black;
   border: none;
   color: white;
   border-radius: 6px;

}
.save{
   margin-left: 15px;

}
.line{
   border:1px solid beige;
   background-color: #9F9F9F;
   width: 400px;
   height: 20px;
}
.cf:hover{
   background-color: #3da70d;
   padding: 20px;
}
.cf2:hover{
   background-color: green;
   /*padding: 20px;*/
   width: 5px;
   height: 5px;


}
.cf3:hover{
   background-color: #3da70d;
   padding-right: 10px;
}/*标签选择器*/
ul{
   margin-top: 0px;
   margin-bottom: 0px;
   padding-left: 0px;
   /*border: 1px solid red;*/

}
/*后代选择器*/
ul>li{
   list-style: none;
   width: 40px;
   height: 40px;
   background-color: wheat;
   border: 1px solid black;
   /*居中*/
   text-align: center;
   /*行垂直居中*/
   line-height: 40px;
   /*圆形*/
   border-radius: 50%;
  /*块元素：可以设置宽高
    默认独占一行*/
   display: inline-block;
   margin-left: 5px;
   /*增加阴影*/
   box-shadow: 2px 2px 2px #888;

}
/*ID选择器*/
#bg-blue{
   /*background-color: #0c7df5;*/

}
/*样式选择器*/
.bg-green{
   /*background-color: #00cb6f;*/
}
li[id="bg-blue"]{
   /*border: red;*/
}
/*群组选择器*/
#bg-blue,.bg-green{
   /*border: #2d88f1;*/

}
/*相邻选择器或同级选择器*/
/*#bg-blue +.bg-green{*/
/*    background-color:yellow;*/

/*}*/

/*#bg-blue ~*{*/
/*    background-color:yellow;*/

/*}*/

/*伪类选择器：子元素选择器*/
ul :first-child{
/*选中第一个子元素*/
/*   background-color: coral;*/
}
/*选择最后一个*/
ul :last-child{

   /*background-color: coral;*/
}
/*选择第六个*/
ul :nth-child(6){
   /*background-color: coral;*/

}
/*2n-1 基数也可以用 odd*/
ul :nth-child(2n-1){
   /*background-color: coral;*/
}
/*2n  偶数  也可以even*/
ul :nth-child(2n){
   /*background-color: #3da70d;*/
}
/*倒数*/
ul :nth-last-child(3){
   /*background-color:red;*/

}
/*伪类的类型选择器*/
ul li:first-of-type{
   /*background-color:coral;*/

}
ul li:last-of-type{
   /*background-color:coral;*/

}

ul li:nth-of-type(5){
  /*background-color: #2d88f1;*/
}

/*:nth-child(m):关注位置*/
/*:nth-of-type(n):除了关注位置，还需要关注类型匹配*/
/*li:nth-child(m):如果这样写，那么跟li:nth-of-type(n)功能几乎一样*/


div:nth-child(2){
   /*background-color: green;*/

}
div:first-of-type :nth-child(3){
   /*background-color: green;*/
}

p:nth-of-type(2){
   /*background: gainsboro;*/
}
form:enabled{
   background-color: green;
}

form{
   width: 350px;
   height: 280px;
   border: black;
   text-align: center;
   border-radius: 5px;
   box-shadow: 2px 2px 4px black;
   padding-top: 15px;
   background-color:#888888 ;
   margin-top: 200px;

}

button{
   width: 60px;
   height: 30px;
   background-color: #888888;
   border: none;
   color: black;
   padding-top: 5px;
}
button:hover{
   width: 60px;
   height: 30px;
   background-color: black;
   border: none;
   color: white;
   border-radius: 6px;

}
.save{
   margin-left: 15px;

}
.line{
   border:1px solid beige;
   background-color: #9F9F9F;
   width: 400px;
   height: 20px;
}
.cf:hover{
   background-color: #3da70d;
   padding: 20px;
}
.cf2:hover{
   background-color: green;
   /*padding: 20px;*/
   width: 5px;
   height: 5px;


}
.cf3:hover{
   background-color: #3da70d;
   padding-right: 10px;
}

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style1.css">
    <title>Title</title>
</head>
<body>
<ul>
    <li class="bg-green">1</li>
    <li id="bg-blue">2</li>
    <li class="cf">3</li>
    <li>4</li>
    <li class="bg-green">5</li>
    <li class="cf3">6</li>
    <li>7</li>
    <li class="cf">8</li>
    <li class="cf2">9</li>
    <li>10</li>
</ul>
<!--<div>-->
<!--    <p>猪头</p>-->
<!--    <li>朱老师</li>-->
<!--    <p>西门庆</p>-->

<!--</div>-->
<!--<div>-->
<!--    <p>欧克</p>-->
<!--    <li>金莲妹妹</li>-->
<!--</div>-->
<form action="">
    <h2 class="denglu">登录</h2>
    <p><label for="email">邮箱：</label>
    <input type="email" id="email"></p>
    <p><label for="password">密码：</label>
    <input type="password" id="password"></p>
    <p><input type="radio" id="week" name="save" value="7" checked class="save"> <label for="week">保存一周</label></p>
    <p><input type="radio" id="month" name="save" value="30" class="save"><label for="month">保存一个月</label></p>
    <p><button>登录</button></p>
<!--    <P class="line"></P>-->

</form>


</body>
</html>