标签：center 不能 缩小 header 网页 样式 meta atl rip
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>博雅练习</title> <meta name="keywords" content="关键字列表" /> <meta name="description" content="网页描述" /> <link rel="stylesheet" type="text/css" href="css/index.css" /> <style type="text/css"></style> <script type="text/javascript"></script> </head> <body > <!--header开始--> <div class="header"> <!--logo开始--> <div class="logo"> <div class="imgl floatL" ><a href="#"><img src="images/logo.png"/></a> </div> <div> <ul> <li class="color1"><a href="#"> 首页 </a></li> <li><a href="#">博雅游戏</a></li> <li><a href="#">博雅新闻</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">客服中心</a></li> <li><a href="#">投资者关系</a></li> </ul> </div> <div class="jiaru floatL"> <a href="#" ><img src="images/jrwm.png"/></a> </div> <div class="clear"></div> </div> <!--logo结束--> <!--中间的大图片--> <div class="img2"></div> <!--中间的大图片--> </div> <!--header结束--> <!--middle开始--> <div class="middle"> <div> <ul > <li> <img src="images/bpt1.jpg" alt="" /> </li> <li> <img src="images/bpt2.jpg" alt="" /> </li> <li> <img src="images/bpt3.jpg" alt="" /></li> <li > <img src="images/bpt4.jpg" alt="" /> </li> </ul> <div class="clear"></div> </div> <div> <ul > <li><h4>BPT宣传片</h4></li> <li><h4>BPT宣传片</h4></li> <li><h4>BPT宣传片</h4></li> <li><h4>BPT宣传片</h4></li> </ul> <div class="clear"></div> </div> <div> <ul class="bofang"> <li><a href="#">点击播放</a></li> <li><a href="#">点击播放</a></li> <li><a href="#">点击播放</a></li> <li><a href="#">点击播放</a></li> </ul> <div class="clear"></div> </div> </div> <!--middle结束--> <!--footer开始--> <div class="footer"> <div class="left floatL"> <ul> <li><a href="#">深圳市政协副主席徐友军一行莅临博雅互动调研</a><span>9/23</span> </li> <li><a href="#">深圳市政协副主席徐友军一行莅临博雅互动调研</a><span>9/23</span> </li> <li><a href="#">深圳市政协副主席徐友军一行莅临博雅互动调研</a><span>9/23</span> </li> <li><a href="#">深圳市政协副主席徐友军一行莅临博雅互动调研</a><span>9/23</span> </li> </ul> </div> <div class="right1 floatL"></div> </div> <!--footer结束--> </body> </html>
/*这里是博雅css文件*/
/*第一件事情将HTML中的一些有默认的内填充与外边距的标签清除*/
body,ul,li,p,img,h1,h2,h3,h4,h5,h6,img{margin:0;padding:0;}
/*设置全局样式*/
.floatL{
float:left;
}
.flloatR{
float:right;
}
.clear{
clear:both;
}
/***导航 开始***/
.header{
width:100%;
height:523px;
background-color:#ccc;
}
.header .img2{
height: 100%;
background:url("../images/banner.jpg") no-repeat top center;
/*让图片居中*/
}
.header .logo{
height:58px;
background-color: #191D3A;
padding-left: 180px;
}
.header .logo .imgl{
margin-right: 30px;
}
.header .logo .color1{
background-color: #252947;
}
.header .logo ul li{
float:left;
height:58px;
line-height:58px;
list-style: none;
padding-right: 20px;
padding-left: 20px;
font-size: 15px;
font-family: "微软雅黑";
border-right:1px solid #252947;
}
.header .logo .jiaru{
margin-top: 12px;
margin-left: 100px;
}
/*
a:link {color: #FF0000} 未访问的链接
a:visited {color: #00FF00} 已访问的链接
a:hover {color: #FF00FF} 鼠标移动到链接上
a:active {color: #0000FF} 选定的链接
*/
.header .logo ul li a:link,.logo ul li a:visited{
color: #818496;
text-decoration: none;
}
.header .logo ul li a:hover{
color: #fff;
}
/***导航 结束***/
/******middle开始*********/
.middle{
width:1200px;
margin:0 auto;
}
.middle ul li{
list-style: none;
float: left;
text-align: center;
width: 218px;
padding-bottom: 10px;
padding-left: 50px;
}
.middle img{
padding-top: 50px;
width: 218px;
height: 130px;
}
.middle .bofang li{
font-size:13px;
}
.middle .bofang a {
background: url("../images/sanjiaoxing.png") no-repeat right center;
padding-right: 12px;
}
.middle .bofang li a:link,.middle .bofang li a:visited {
color:#38B774;
text-decoration: none;
}
/******middle结束*********/
/******footerk开始**********/
.footer{
width:1060px;
margin:0 auto;
padding-top: 70px;
margin-top: 30px;
border-top: 1px solid #DBE1E7;
}
.footer .left{
background: url(../images/bynewsbg.jpg) no-repeat;
height: 310px;
width:500px;
}
.footer .left ul{
margin-top: 120px;
font-size: 18 px;
}
.footer .left ul a{
text-decoration: none;
}
.footer .left ul a:hover{
color: #3FC07D;
}
.footer .left ul span{
color: #AFC4DC;
padding-left: 75px;
}
.footer .right1{
background:url(../images/zczp.jpg) no-repeat;
width: 500px;
height: 310px;
}
.footer .left ul li{
list-style: none;
padding: 13px;
border-bottom: 1px solid #DBE1E7;
/******footer结束********/
刚做完的，修改了很多次，一开始缩小了都不能居中，现在只剩下标题不能居中了，等会再加一些备注，感觉有点乱！
标签：center 不能 缩小 header 网页 样式 meta atl rip
原文地址：http://www.cnblogs.com/czbkhzh/p/6127614.html
