实例
<!DOCTYPE html> <html lang ="en"> <head> <meta charset="UTF-8"> <link href="0708.css" style="text/css" rel="stylesheet"> </head> <body> <div class="header"> <div class="nav"> <ul class="main"> <li class="item"><a href="#">网站首页</a></li> <li class="item"><a href="#">公司新闻</a></li> <li class="item"><a href="#">网上购物</a></li> <li class="item"><a href="#">产品推荐</a></li> <li class="item"><a href="#">联系我们</a></li> </ul> </div> </div> <div class="content"> <div class="wrap"> <div class="contenter">主体内容区</div> </div> <div class="left">左侧</div> <div class="right">右侧</div> </div> <div class="footer"> <div class="last"> <p> <a href="#">© 郑州楼市网</a> | <a href="#">0371-659345781</a> | <a href="#">豫ICP2016098801-1</a> </p> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
/*****头部样式*******/
body{/**去除顶部空隙**/
margin:0;
}
.header{/*******头部设置大小和背景颜色*******/
height:80px;
background-color:LightGrey
}
.header .nav{/*******导航设置大小和背景颜色*******/
width:1000px;
height:80px;
margin:0 auto;
background-color:black;
}
.header .nav .main{/**去除顶部空隙**/
margin:0;
padding:0;
}
.header .nav .main .item{
list-style:none;
}
.header .nav .main .item a{/***头部样式设置**/
text-decoration:none;
float:left;
text-align:center;
line-height:80px;
color:white;
width:200px;
}
.header .nav .main .item a:hover{/***鼠标事件经过的时候样式***/
font-size:1.1em;
background-color:red;
}
/********主体样式*********/
.content{/*******主体设置大小和背景颜色*******/
margin:5px auto;
width:1000px;
background-color: lightgray;
overflow:hidden;
}
.wrap{/***中间区块设置在wrap容器里面**/
width:inherit;
min-height:800px;
background-color:MediumBlue;
}
.left{/***左侧样式***/
width:200px;
height:800px;
background-color:Violet;
}
.right{/***右侧样式***/
width:200px;
height:800px;
background-color:DeepSkyBlue;
}
.wrap, .left, .right{/****主体区块共同浮动****/
float:left;
}
.left{
margin-left:-100%;
}
.right{
margin-left:-200px;
}
.contenter{
padding-left:200px;
padding-right:200px;
}
.footer{/*******底部设置大小和背景颜色*******/
height:80px;
background-color:LightGrey
}
.footer .last{
width:1000px;
height:80px;
background-color:black;
margin:0 auto;
}
.footer .last p{
line-height:80px;
text-align:center;
}
.footer .last a{
text-decoration:none;
}
.footer .last a:hover{
color:white;
}运行实例 »
点击 "运行实例" 按钮查看在线实例