今天的排版
HTML代码
<!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>
<div class="box">
<!--头部开始-->
<div class="header">
<div class="top"><span class="blue1"> 专业的JavaNet、PHP、CC++、网页设计、平面设计、UI设计、iOS培训机构</span>
<span class="floatR">
<a href="#">网站首页</a>
<a href="#" class="blue">免费公开课</a>
<a href="#" class="blue">校园生活</a>
<a href="#" class="red">传智特刊</a>
<a href="#">人才服务</a>
<a href="#">人才服务</a>
<a href="#" class="border">人才服务</a>
</span>
</div>
<!--logo-->
<div class="logo">
<div class="logoL floatL"><img src="images/logo.gif"></div>
<div class="logoC floatL">
<h2 class="biaoti">PHP学院</h2>
<ul>
<li>北京校区</li>
<li>北京校区</li>
<li>北京校区</li>
<li>北京校区</li>
</ul>
</div>
<div class="logoR floatR">
<img src="images/topword.gif">
</div>
</div>
<!--logo结束-->
<!--导航栏开始-->
<div class="nav">
<ul>
<li><a href="#" class="nav1">首页</a></li>
<li><a href="#" class="nav2">PHP培训课程</a></li>
<li><a href="#" class="nav2">PHP视频下载</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>
<li><a href="#">原创视频</a></li>
<li><a href="#">常见问题</a></li>
<li><a href="#">来校路线</a></li>
<li><a href="#">技术论坛</a></li>
</ul>
</div>
<!--导航栏结束-->
</div>
<!--头部结束-->
<!--分享行开始-->
<div class="fenxiang">
<img src="./images/share.jpg" class="fenxiangL floatL">
<div class="rukou floatL">其他学院入口:</div>
<ul>
<li>php学院</li>
<li>.net学院</li>
<li>ios学院</li>
<li>c/c++学院</li>
<li>网页平面设计学院</li>
</ul>
</div>
<!--分享行结束-->
<!--左部开始-->
<div class="left floatL">
<div class="kaixuele">
<div class="kaixue">
<span class="kaixuela">我们开学啦</span>今天我终于来到了心中向往已久的神圣学府--传智播客，开始了改变命运的征途
</div>
<div class="kaixueC floatL">
<div class="kaixuetu">
<img src="images/ppt1.jpg">
</div>
</div>
<div class="kaixueR floatR">
<ul>
<li class="L"><img src="images/img01.jpg"/><br>陈建利专题-我有我原则</li>
<li><img src="images/img02.jpg" /><br>我有我原则</li>
<li class="L"><img src="images/img03.jpg" /><br>陈建利专题-我有我原则</li>
<li><img src="images/img04.jpg" /><br>陈建利专题-我有我原则</li>
</ul>
</div>
</div>
<div class="xiaoxi">
<div class="kaixuexiaoxi1"><img src="images/college.jpg"></div>
<div class="kaixuexiaoxi2">
<ul>
<li><a href="#">2013年限时钜惠,PHP基础班免费学!</a><img src="images/hot.gif"></li>
<li><a href="#">2013年限时钜惠,PHP基础班免费学!</a></li>
<li><a href="#">2013年限时钜惠,PHP基础班免费学!</a></li>
<li><a href="#">2013年限时钜惠,PHP基础班免费学!</a></li>
<li><a href="#">2013年限时钜惠,PHP基础班免费学!</a></li>
<li><a href="#">2013年限时钜惠,PHP基础班免费学!</a></li>
<li><a href="#">2013年限时钜惠,PHP基础班免费学!</a></li>
<li><a href="#">2013年限时钜惠,PHP基础班免费学!</a></li>
<li><a href="#">2013年限时钜惠,PHP基础班免费学!</a></li>
<li><a href="#">2013年限时钜惠,PHP基础班免费学!</a></li>
</ul>
</div>
<div class="clear"></div>
<div class="kaixuexiaoxi3">
<img src="images/more01.gif" align="right" class="img" />
</div>
</div>
</div>
<!--左部结束-->
<!--右部开始-->
<div class="right floatR">
<div class="title">
<h3>PHP班开班信息</h3>
</div>
<div>
<h5 class="jichuban">PHP16期</h5>
<ul>
<li><a href="#">北京--11月12号</a><span class="kaoyou">爆满已开班</span></li>
<li><a href="#">北京--11月12号</a><span class="kaoyou">爆满已开班</span></li>
</ul>
<h5 class="jichuban">PHP16期</h5>
<ul>
<li><a href="#">北京--11月12号</a><span class="kaoyou">爆满已开班</span></li>
<li><a href="#">北京--11月12号</a><span class="kaoyou">爆满已开班</span></li>
</ul>
<h5 class="jichuban">PHP16期</h5>
<ul>
<li><a href="#">北京--11月12号</a><span class="kaoyou">爆满已开班</span></li>
<li><a href="#">北京--11月12号</a><span class="kaoyou">爆满已开班</span></li>
</ul>
</div>
</div>
<div class="clear"></div>
<!--右部结束-->
</div>
<div class="footer"></div>
</body>
</html>
CSS代码
/*网页初始化*/
body,ul,li,p,img,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
body{
font-style: 14px;
color:#444;
background: url(../images/bg-body.gif) repeat-x #F3F3F3;
}
.box{
width:973px;
margin:0 auto;
}
.box .header{
height:196px;
}
.header .top{/*最顶部的样式*/
height: 27px;
line-height:27px;
font-size: 12px;
}
.head .top span{
display: block;
}
.header .top span a{
border-right: 1px dotted #888888;
padding-right: 9px;
}
.header .top a:link,a:visited{
text-decoration: none;
color: #888888;
}
.header .top a:hover{
color:red !important;
}
.blue1{/*最顶部前面的字体*/
color:blue;
}
.header .top span .blue{
color:blue;
}
.header .top span .red{
color:#BA4545;
}
.header .top span .border{
padding-right: 0;
border-right: none;
}
.header .logo{
height: 120px;
background: url(../images/bg-logo.jpg) no-repeat right bottom;
}
.header .logoL{
padding-left: 25px;
padding-top: 21px;
}
.header .logoC{
padding-top: 33px;
margin-left: 12px;
}
.header .logo .biaoti{
font-size: 30px;
font-weight: bold;
font-family: "黑体";
}
.header .logo ul li{
color:#fff;
width: 78px;
height: 20px;
line-height: 20px;
list-style: none;
float: left;
background: url(../images/li01.png) no-repeat;
padding-right: 5px;
margin-right: 7px;
margin-top: 5px;
}
.header .logo .logoR{
width:370px;
margin-top: 14px;
}
.header .nav{
height:50px;
line-height:50px;
}
.header .nav ul li{
list-style:none;
float:left;
text-align: center;
display:block;
padding-right:5px;
}
.header .nav ul li a{
display: block;
height: 47px;
width:73px;
}
.header .nav ul li a:link,.header .nav ul li a:visited{
color:#fff;
text-decoration:none;
}
.header .nav ul li a:hover{
background:url(../images/menu2.gif);
}
.header .nav ul li .nav2{
width:85px;
height: 47px;
}
.header .nav ul li .nav2:hover{
background: url(../images/menu1.gif);
}
.fenxiang{
width: 973px;
height: 35px;
line-height: 35px;
background: #F3F3F3;
}
.fenxiang .rukou{
padding-left: 35px;
}
.fenxiang ul li{
list-style: none;
float: left;
background: url(../images/li02.jpg) no-repeat 5px 13px;
font-size: 13px;
padding-left: 12px;
}
.box .left{
width:660px;
background: #fff;
}
.left .kaixue{
border-bottom:1px solid #E0E0E0;
font-size: 14px;
height: 40px;
line-height: 40px;
background: url(../images/jiantou.jpg)no-repeat 615px 14px;
margin-bottom: 10px;
margin-left: 10px;
}
.left .kaixue .kaixuela{
font-size: 22px;
font-family: "黑体";
color:blue;
}
.left .kaixueR{
width: 310px;
font-size: 12px;
padding-right: 10px;
}
.left .kaixuele .kaixueR ul li{
list-style: none;
display: block;
margin-right: 11px;
/*margin-bottom:6px;*/
text-align: center;
}
/*.left .kaixuele{
border: 1px solid #000;
}*/
.left .kaixuele .kaixueR ul .L{
float:left;
}
.left .kaixuele .kaixueR ul img{
margin-bottom: 7px;
}
.left .kaixuele .kaixuetu{
padding-left: 10px;
}
/*开学消息*/
/*.left .xiaoxi .kaixuexiaoxi1{
padding-left: 10px;
}*/
.left .xiaoxi{
margin-left: 13px;
}
.left .xiaoxi .kaixuexiaoxi2 ul li{
height: 20px;
line-height: 20px;
list-style: none;
background: url(../images/li03.jpg) no-repeat;
padding-left: 10px;
display: block;
float: left;
padding-left: 15px;
margin-right: 10px;
width: 290px;
}
.left .xiaoxi .kaixuexiaoxi2 ul a:link,.left .xiaoxi .kaixuexiaoxi2 ul a:visited{
/*color:black;有问题*/
text-decoration:none;
}
/*问题点*/
.left .xiaoxi .kaixuexiaoxi2 ul a:hover{
color:orange;
text-decoration: underline;
}
.left .xiaoxi .kaixuexiaoxi3{
height: 30px;
}
.left .xiaoxi .kaixuexiaoxi3 img{
padding-right: 18px;
padding-top: 10px;
}
/*右边开始*/
.box .right{
width:295px;
height:500px;
background: #fff;
}
.box .right .title{
height: 35px;
line-height: 35px;
background: url(../images/righttitle.gif) no-repeat;
}
.box .right .title h3{
padding-left: 36px;
}
.box .right .jichuban{
margin-left: 10px;
margin-top: 10px;
margin-bottom: 8px;
}
.box .right ul li{
list-style: none;
font-size: 12px;
padding-left: 10px;
padding-right: 10px;
height: 20px;
line-height: 20px;
border-bottom: 1px dotted #ccc;
}
.box .right ul span{
display: block;
float: right;
color: red;
}
.box .right ul li a:link,a:visited{
text-decoration: none;
}
.box .right ul li a:hover{
color:orange;
}
.footer{
width:100%;
height:200px;
background:#000;
}
.floatL{
float:left;
}
.floatR{
float: right;
}
.clear{
clear: both;
}
运行结果
