前端：复习，表单，视屏和音频，CSS3选择器，新属性圆角，过渡，动画，多背景，旋转的立方体，小米水平导航，登录，注册，结构性伪类 E:nth-child(n)

0. 复习

1.表单

2.视屏和音频

您的浏览器不支持video元素




您的浏览器不支持audio元素

3.CSS3选择器

/* div[class]{
width: 100px;
height: 100px;
background:green;
}*/
div[class*=u]{
width: 100px;
height: 100px;
background:green;
}
div[class^=u]{
background: red;
}
div[class|= ‘p’]{
width: 100px;
height: 100px;
background: red;
}
div[class$=u]{
background: yellow;
}
input:disabled{
width: 200px;
height: 50px;
}
/input:enabled{/
/width: 250px;/
/height: 60px;/
/}/
input:checked{

}

4、新属性圆角

.box1{
width: 100px;
height: 100px;
background: pink;
border:1px solid green;
/border-radius:50px;/
border-radius: 50% 50%;

    box-shadow:0 0 30px 2px red;
}
#box{
    width: 900px;
    height: 550px;
    border: 1px solid black;
   /* background-color:pink; 背景颜色
    background-image:url("img.jpg"); 背景图片
    background-repeat:no-repeat; 背景是否重复 repeat/no-repeat/repeat-x/repeat-y
    !*background-size:900px 550px;*!图片的放大或缩小
    background-position:center   center;背景图片的定位*/

    background:no-repeat green url("img.jpg") top;
}

5、过渡

6、动画

动画

7、多背景

多背景

8、旋转的立方体

旋转的立方体

9、小米水平导航

Title

*{
margin: 0;
padding: 0;
}
#nav{
background: black;
}
#nav .wrap{
width: 1226px;
height: 40px;
margin: 0 auto;
}
#nav ul{
list-style: none;
}
#nav .left{
float: left;
}
#nav .right{
float: right;
}
#nav ul li{
float: left;
line-height: 40px;
/margin-right: 20px;/
}
#nav ul li a{
color: #d6d6d6;
text-decoration: none;
height: 40px;
padding: 0 10px;
display: block;
}
#nav ul li a:hover{
color: #fff;
background-color: green;
}
/商品列表/
#proList{
list-style: none;
width:1226px ;
margin: 50px auto;
/height: 340px;/
}
.clear:after{
content: ”;
display: block;
clear: both;
}
.clear{
*zoom:1;
}
#proList li{
float: left;
width: 234px;
height: 300px;
margin-right: 14px;
background-color: #fafafa;
text-align: center;
padding-top: 40px;
}
#proList li.li1{
border-top:1px solid blue;
}
#proList li.li2{
border-top:1px solid yellow;
}
#proList li.li3{
border-top:1px solid red;
}
#proList li.li4{
border-top:1px solid green;
}
#proList li.last{
margin-right: 0;
border-top:1px solid orange;
}
#proList li img{
width: 160px;
height: 160px;
}
#proList li .p1{
font-size: 14px;
color: #212121;
line-height: 30px;
margin-top: 20px;
}
#proList li .p2{
font-size: 12px;
color: #b0b0b0;
}
#proList li .p3{
font-size: 14px;
color: #ff6709;
line-height: 50px;
}
.box{
height: 600px;
background: red;
}
/*
清除浮动：解决浮动的元素不能撑开父级元素高度的问题
解决方案：在浮动元素后面添加一个文档流内的元素，给这个元素添加clear:both
.clear:after{
content: ”;
display: block;
clear: both;
}
.clear{
*zoom:1;
}
*/

• 
  
• 小米商城
• MIUI
• 米聊
• 游戏
• 多看阅读
• 金融
• 小米商城手机版
• 问题反馈
• Select Region

• 
  
• 登录
• 注册
• 消息通知

• 
  
• 
  
  

  米家智能摄像机云台版

  
  

  红外夜视，720P分辨率

  
  

  199元

  
  
• 
  
  

  米家智能摄像机云台版

  
  

  红外夜视，720P分辨率

  
  

  199元

  
  
• 
  
  

  米家智能摄像机云台版

  
  

  红外夜视，720P分辨率

  
  

  199元

  
  
• 
  
  

  米家智能摄像机云台版

  
  

  红外夜视，720P分辨率

  
  

  199元

  
  
• 
  
  

  米家智能摄像机云台版

  
  

  红外夜视，720P分辨率

  
  

  199元

  
  
• 
  
  

  米家智能摄像机云台版

  
  

  红外夜视，720P分辨率

  
  

  199元

  
  
• 
  
  

  米家智能摄像机云台版

  
  

  红外夜视，720P分辨率

  
  

  199元

  
  
• 
  
  

  米家智能摄像机云台版

  
  

  红外夜视，720P分辨率

  
  

  199元

  
  
• 
  
  

  米家智能摄像机云台版

  
  

  红外夜视，720P分辨率

  
  

  199元

  
  
• 
  
  

  米家智能摄像机云台版

  
  

  红外夜视，720P分辨率

  
  

  199元

  
  
• 
  

10、登录

Title


登录

#11、注册 Title 注册 #12、>结构性伪类 E:nth-child(n) 结构性伪类 E:nth-child(n)

匹配父元素中的第n个子元素E

匹配父元素中的第n个子元素E

匹配父元素中的第n个子元素E