今天的排版

首页 > 代码库 > 今天的排版

2024-08-24 19:52:35 227人阅读

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="http://www.mamicode.com/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="http://www.mamicode.com/#">网站首页</a>
     <a href="http://www.mamicode.com/#" class="blue">免费公开课</a>
     <a href="http://www.mamicode.com/#" class="blue">校园生活</a>
     <a href="http://www.mamicode.com/#" class="red">传智特刊</a>
     <a href="http://www.mamicode.com/#">人才服务</a>
     <a href="http://www.mamicode.com/#">人才服务</a>
     <a href="http://www.mamicode.com/#" class="border">人才服务</a>
    </span>
   </div>
   
   <div class="logo">
    <div class="logoL floatL"><img src="http://www.mamicode.com/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="http://www.mamicode.com/images/topword.gif">
    </div>
   </div>
   
   
   <div class="nav">
    <ul>
     <li><a href="http://www.mamicode.com/#" class="nav1">首页</a></li>
     <li><a href="http://www.mamicode.com/#" class="nav2">PHP培训课程</a></li>
     <li><a href="http://www.mamicode.com/#" class="nav2">PHP视频下载</a></li>
     <li><a href="http://www.mamicode.com/#">人才服务</a></li>
     <li><a href="http://www.mamicode.com/#">校园生活</a></li>
     <li><a href="http://www.mamicode.com/#">师资力量</a></li>
     <li><a href="http://www.mamicode.com/#">就业信息</a></li>
     <li><a href="http://www.mamicode.com/#">报名流程</a></li>
     <li><a href="http://www.mamicode.com/#">原创视频</a></li>
     <li><a href="http://www.mamicode.com/#">常见问题</a></li>
     <li><a href="http://www.mamicode.com/#">来校路线</a></li>
     <li><a href="http://www.mamicode.com/#">技术论坛</a></li>
    </ul>
   </div>
   
  </div>
  

  
  <div class="fenxiang">
   <img src="http://www.mamicode.com/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="http://www.mamicode.com/images/ppt1.jpg">
     </div>
    </div>
    <div class="kaixueR floatR">
      <ul>
       <li class="L"><img src="http://www.mamicode.com/images/img01.jpg"/><br>陈建利专题-我有我原则</li>
       <li><img src="http://www.mamicode.com/images/img02.jpg" /><br>我有我原则</li>
       <li class="L"><img src="http://www.mamicode.com/images/img03.jpg" /><br>陈建利专题-我有我原则</li>
       <li><img src="http://www.mamicode.com/images/img04.jpg" /><br>陈建利专题-我有我原则</li>
      </ul>
    </div>
   </div>

<div class="xiaoxi">
    <div class="kaixuexiaoxi1"><img src="http://www.mamicode.com/images/college.jpg"></div>
    <div class="kaixuexiaoxi2">
     <ul>
      <li><a href="http://www.mamicode.com/#">2013年限时钜惠,PHP基础班免费学!</a><img src="http://www.mamicode.com/images/hot.gif"></li>
      <li><a href="http://www.mamicode.com/#">2013年限时钜惠,PHP基础班免费学!</a></li>
      <li><a href="http://www.mamicode.com/#">2013年限时钜惠,PHP基础班免费学!</a></li>
      <li><a href="http://www.mamicode.com/#">2013年限时钜惠,PHP基础班免费学!</a></li>
      <li><a href="http://www.mamicode.com/#">2013年限时钜惠,PHP基础班免费学!</a></li>
      <li><a href="http://www.mamicode.com/#">2013年限时钜惠,PHP基础班免费学!</a></li>
      <li><a href="http://www.mamicode.com/#">2013年限时钜惠,PHP基础班免费学!</a></li>
      <li><a href="http://www.mamicode.com/#">2013年限时钜惠,PHP基础班免费学!</a></li>
      <li><a href="http://www.mamicode.com/#">2013年限时钜惠,PHP基础班免费学!</a></li>
      <li><a href="http://www.mamicode.com/#">2013年限时钜惠,PHP基础班免费学!</a></li>
     </ul>
    </div>
    <div class="clear"></div>
    <div class="kaixuexiaoxi3">
     <img src="http://www.mamicode.com/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="http://www.mamicode.com/#">北京--11月12号</a><span class="kaoyou">爆满已开班</span></li>
     <li><a href="http://www.mamicode.com/#">北京--11月12号</a><span class="kaoyou">爆满已开班</span></li>
    </ul>
    <h5 class="jichuban">PHP16期</h5>
    <ul>
     <li><a href="http://www.mamicode.com/#">北京--11月12号</a><span class="kaoyou">爆满已开班</span></li>
     <li><a href="http://www.mamicode.com/#">北京--11月12号</a><span class="kaoyou">爆满已开班</span></li>
    </ul>
    <h5 class="jichuban">PHP16期</h5>
    <ul>
     <li><a href="http://www.mamicode.com/#">北京--11月12号</a><span class="kaoyou">爆满已开班</span></li>
     <li><a href="http://www.mamicode.com/#">北京--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;
}

运行结果

技术分享

今天的排版

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > 今天的排版

今天的排版

看完仍有疑问？有类似问题直接问程序猿