ul 响应式 布局_Css3做响应式布局案列

Css3操作响应式布局

*{padding: 0;margin: 0;}

html,body{width: 100%;height: 100%;background:url(img/bj.jpg) ;background-size: 100% 100%;}

#nav{width: 560px;height:40px ;margin: 10px auto;}

ul,li{list-style: none;}

.list{width: 560px;height: 40px;background: #fff;}

.list li{width: 50px;height: 40px;margin: 0 10px;float: left;

transition: all 1s;

}

.list li:nth-child(1){

background: url(img/1.png) top;

}

.list li:nth-child(2){

background: url(img/2.png) top;

}

.list li:nth-child(3){

background: url(img/3.png) top;

}

.list li:nth-child(4){

background: url(img/4.png) top;

}

.list li:nth-child(5){

background: url(img/5.png) top;

}

.list li:nth-child(6){

background: url(img/6.png) top;

}

.list li:nth-child(7){

background: url(img/7.png) top;

}

.list li:nth-child(8){

background: url(img/8.png) top;

}

.list li:hover{

background-position: bottom;

}

@media only screen and (min-width: 640px) and (max-width: 980px) {

#nav{position: fixed;top:100px;left:10px;width: 50px;height:400px ;margin: 10px auto;}

ul,li{list-style: none;}

.list{width: 67px;height: 400px;background: #fff;}

.list li{width: 50px;height: 40px;margin: 0 10px;float: left;

transition: all 1s;

}

}

@media only screen and (min-width: 100px) and (max-width: 640px) {

#nav{position: fixed;top:100px;left:10px;width: 50px;height:400px ;margin: 10px auto;}

ul,li{list-style: none;}

.list{width: 67px;height: 400px;background: red;}

/*.list li{width: 50px;height: 40px;margin: 0 10px;float: left;

transition: all 1s;

background: #fff;

}*/

.list li:nth-child(1){

background: url(img/1.png) top;

}

.list li:nth-child(2){

background: url(img/2.png) top;

}

.list li:nth-child(3){

background: url(img/3.png) top;

}

.list li:nth-child(4){

background: url(img/4.png) top;

}

.list li:nth-child(5){

background: url(img/5.png) top;

}

.list li:nth-child(6){

background: url(img/6.png) top;

}

.list li:nth-child(7){

background: url(img/7.png) top;

}

.list li:nth-child(8){

background: url(img/8.png) top;

}

.list li:hover{

background-position: bottom;

}

.list li{width: 50px;height: 40px;margin: 0 10px;float: left;

transition: all 1s;

border-radius: 50%;

}

}

效果截图