<!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结束********/
刚做完的，修改了很多次，一开始缩小了都不能居中，现在只剩下标题不能居中了，等会再加一些备注，感觉有点乱！
时间： 2024-10-25 10:30:53