今天的排版

Posted 做人胃口要大,梦想也要大

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了今天的排版相关的知识,希望对你有一定的参考价值。

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;
}

运行结果

 

以上是关于今天的排版的主要内容,如果未能解决你的问题,请参考以下文章

论文排版有啥要求呢?

简单实用的CSS网页布局中文排版技巧

BootStrap框架---1.页面排版

网站制作之网页文字排版技巧

错题集不同进制影响富文本的排版

网站内容排版可用性分析