<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="textl.css"/> <link rel="stylesheet" href="textr.css"/> </head> <body> <div class="all"> <div class="page"> <div class="nav"> <div class="head"> <div class="icon"> <ul> <li><i></i></li> <li><i></i></li> <li><i></i></li> <li><i></i></li> <li><i></i></li> <li><i></i></li> <li><i></i></li> <li><i></i></li> </ul> </div> <div class="list"> <div class="logo"></div> <div class="tool"> <ul> <li><a href="">HOME</a></li> <li><a href="">ABOUT</a></li> <li><a href="">PORTFOLIO</a></li> <li><a href="">BLOG</a></li> <li><a href="">CONTACT</a></li> </ul> </div> </div> </div> <div class="content"> <ul> <li> <img src="img/image_01.png" alt="#"/> <p>MAGAZINE FOLD DESIGN</p></li> <li> <img src="img/image_02.png" alt="#"/> <p>CREATIVE CD DESIGN PACKAGE</p></li> <li> <img src="img/image_03.png" alt="#"/> <p>MODERN TAG LAYOUT</p></li> <li> <img src="img/image_04.png" alt="#"/> <p>CREATIVE LAYOUT GRAPHICS</p></li> <li> <img src="img/image_05.png" alt="#"/> <p>MODERN MAGAZINE LAYOUT</p></li> <li> <img src="img/image_06.png" alt="#"/> <p>CREATIVE BOX MOCKUP</p></li> </ul> </div> <div class="foot"> <a href="#top"><img alt="" src="img/loading-button.png" class="load"/></a> <p>© 2015 Rights Reserved.Developed by Dessign,net</p> </div> </div> </div> </div> <div class="box"> <div class="boxall"> <div class="heada"> <img src="img/QC}%J8U2.png" alt="#"/> <div class="icona"> <ul> <li><i></i></li> <li><i></i></li> <li><i></i></li> <li><i></i></li> <li><i></i></li> <li><i></i></li> <li><i></i></li> <li><i></i></li> </ul> </div> <div class="logoa"></div> </div> <div class="contenta"> <ul> <li> <img src="img/image_01.png" alt="#" width="300px" height="180px"/> <p>MAGAZINE FOLD DESIGN</p></li> <li> <img src="img/image_02.png" alt="#" width="300px" height="180px"/> <p>CREATIVE CD DESIGN <br/> PACKAGE</p></li> <li> <img src="img/image_03.png" alt="#" width="300px" height="180px"/> <p>MODERN TAG LAYOUT</p></li> <li> <img src="img/image_04.png" alt="#" width="300px" height="180px"/> <p>CREATIVE LAYOUT <br/> GRAPHICS</p></li> <li> <img src="img/image_05.png" alt="#" width="300px" height="180px"/> <p>MODERN MAGAZINE <br/> LAYOUT</p></li> <li> <img src="img/image_06.png" alt="#" width="300px" height="180px"/> <p>CREATIVE BOX MOCKUP</p></li> </ul> </div> <div class="foota"> <a href="#top"><img alt="" src="img/loading-button.png" class="load"/></a> <p>© 2015 Rights Reserved.Developed by Dessign,net</p> </div> </div> </div> </body> </html>
@media screen and (min-width: 1300px) {
* {
margin: 0;
padding: 0;
}
.all {
width: 1260px;
height: 1600px;
background: gray;
margin: auto;
position: relative;
/*overflow: hidden;*/
}
.box {
display: none;
}
.page {
width: 1200px;
height: 1540px;
background: white;
position: absolute;
top: 30px;
left: 30px;
}
.nav {
width: 1180px;
height: 1440px;
margin: auto;
padding: 10px;
}
.head {
width: 100%;
height: 100px;
}
.icon {
width: 272px;
height: 30px;
float: right;
}
.icon ul {
list-style: none;
}
.icon ul li {
float: left;
width: 25px;
height: 25px;
margin-top: 3px;
padding-left: 9px;
}
.icon ul li:hover i {
transform: scale(1.2);
}
.icon ul li:nth-child(1) i {
width: 25px;
height: 25px;
display: inline-block;
background: url("img/twitter-icon.png") no-repeat;
}
.icon ul li:nth-child(2) i {
width: 25px;
height: 25px;
display: inline-block;
background: url("img/facebook-icon.png") no-repeat;
}
.icon ul li:nth-child(3) i {
width: 25px;
height: 25px;
display: inline-block;
background: url("img/google-plus-icon.png") no-repeat;
}
.icon ul li:nth-child(4) i {
width: 25px;
height: 25px;
display: inline-block;
background: url("img/picasa-icon.png") no-repeat;
}
.icon ul li:nth-child(5) i {
width: 25px;
height: 25px;
display: inline-block;
background: url("img/pinterest-icon.png") no-repeat;
}
.icon ul li:nth-child(6) i {
width: 25px;
height: 25px;
display: inline-block;
background: url("img/vimeo-icon.png") no-repeat;
}
.icon ul li:nth-child(7) i {
width: 25px;
height: 25px;
display: inline-block;
background: url("img/youtube-icon.png") no-repeat;
}
.icon ul li:nth-child(8) i {
width: 25px;
height: 25px;
display: inline-block;
background: url("img/flickr-icon.png") no-repeat;
}
.list ul li:hover a {
color: red;
}
.list {
width: 100%;
height: 59px;
clear: both;
padding-top: 5px;
/*父级元素清除浮动*/
}
.logo {
background: url("img/logo.png") no-repeat;
width: 201px;
height: 59px;
float: left;
}
.tool {
float: right;
width: 540px;
height: 59px;
}
.tool ul {
list-style: none;
}
.tool ul li {
float: left;
line-height: 59px;
padding-left: 62px;
}
.tool ul li:nth-child(1) {
padding-left: 0;
}
.tool ul li a {
text-decoration: none;
font-size: 16px;
letter-spacing: 2px;
}
/*词间距*/
.content {
width: 100%;
height: 1210px;
clear: both;
margin-top: 10px;
}
.content ul {
list-style: none;
}
.content ul li {
float: left;
width: 589px;
height: 420px;
}
.content ul li p {
text-align: center;
letter-spacing: 2px;
font-size: 16px;
margin-top: 15px;
}
.content ul li:hover p {
text-decoration: underline;
}
.foot {
text-align: center;
}
.load:hover {
cursor: pointer;
}
.foot p {
margin-top: 60px;
}
}
@media screen and (max-width: 1329px){
*{
margin: 0;
padding: 0;
/*outline: 1px solid red;*/
}
.all{
display: none;
}
.box{
width: 330px;
height: 1900px;
margin: auto;
/*overflow: hidden;*/
}
.boxall{
width: 300px;
height: 1900px;
margin: auto;
}
.heada{
width: 100%;
height: 190px;
margin-top: 5px;
}
.heada img{
float: right;
margin-top: 5px;
}
.icona{
clear: both;
width: 270px;
height: 30px;
padding-top: 30px;
}
.icona ul{
list-style: none;
}
.icona ul li{
width: 30px;
height: 30px;
float: left;
padding-left: 3px;
}
.icona ul li:nth-child(1){
background: url("img/twitter-icon@2x.png") no-repeat;
}
.icona ul li:nth-child(2){
background: url("img/facebook-icon@2x.png") no-repeat;
}
.icona ul li:nth-child(3){
background: url("img/google-plus-icon@2x.png") no-repeat;
}
.icona ul li:nth-child(4){
background: url("img/picasa-icon@2x.png") no-repeat;
}
.icona ul li:nth-child(5){
background: url("img/pinterest-icon@2x.png") no-repeat;
}
.icona ul li:nth-child(6){
background: url("img/vimeo-icon@2x.png") no-repeat;
}
.icona ul li:nth-child(7){
background: url("img/youtube-icon@2x.png") no-repeat;
}
.icona ul li:nth-child(8){
background: url("img/flickr-icon@2x.png") no-repeat;
}
.logoa{
background-image: url("img/logo@2x.png");
background-repeat: no-repeat;
background-size: contain;
width: 200px;
height: 70px;
margin-top: 25px;
}
.contenta ul{
list-style: none;
}
.contenta ul li{
margin-top: 20px;
}
.contenta ul li p{
text-align: center;
font-size: 16px;
margin-top: 20px;
}
.foota img{
margin-top: 30px;
}
.foota p{
margin-top: 60px;
}
.foota{
text-align: center;
}
}
这刚开始，路很长，，不知道搞得对不对，望高手指教。。。
原文：http://www.cnblogs.com/520Lei/p/5634649.html