5.网页简单布局之结构与表现原则

** 1.结构与表现相关内容简介**

网页制作中结构（HTML)、表现(CSS)、行为分离(JavaScript)

原则：先不管样式（CSS),重点放在HTML的结构和语义化上

拿到一个网页设计图的时候，首先关注网页的文字内容以及内容模块间的关系。

把重点放在编写语义化的html代码上，而不要过多考虑设计图上的样式，

等到html按内容编写完成之后，再考虑样式的实现。

在不改变现有结构的基础上，完成设计图要求的视觉效果.

利用margin属性来移动设置html结构.

想考虑内容完整性，在考虑样式，在视觉上达到目的要求后，在进行修正

抛开样式，先写结构，实现结构与样式分离

初级的人员思路及制作方法：div层层嵌套。

中级的人员思路及制作方法：去掉多余的div，进行简化。

高级的人员思路及制作方法：简化结构，并在现有结构基础上，只通过样式去改变它的布局，就完成了一个视觉效果。

步骤：

先按结构和语义编写代码

然后进行css样式设置

减少HTML与CSS契合度

margin-left：100px表示块元素的左侧外边距是100px，即与其左侧相邻块元素的间距增加100px,直接表现就是向右移动100px；加负号后表示与其左侧相邻块元素的间距减小100px，直接表现就是向左移动100px.

总结：

核心思想：结构和表现分离。

示例：

微博用户发言信息列表制作：

HTML代码：

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title></title>
     <style type="text/css">
       /*reset*/
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin: 0;padding: 0;list-style: none;font:12px/1.5 "Arial", "sans-serif", "微软雅黑", "宋体", "Tahoma"}

     /*公共样式*/
    body{ padding-top:50px; line-height:20px}
    .userPic{padding:5px; border:1px #ccc solid}
    .demo01, .demo02{ margin-bottom:20px}
    p{ text-indent:2em}


    /*初级*/
    .demo01{width:600px; overflow:hidden}
    .demo01 .left{ width:100px; float:left}
    .demo01 .left .userPic{margin-left:20px}
    .demo01 .right{ width:458px; float:right; padding:20px;background-color: #EEF7FF;border: 1px solid #CCC}
    .demo01 .right h6{ margin-bottom:5px}
    .demo01 .right .pubTime{ float:right;color:#999; margin-top:-8px}

    /*中级*/
    .demo02{width:600px; overflow:hidden}
    .demo02 .userPic{float:left; margin-left:20px}
    .demo02 .right{ width:458px; float:right; padding:20px;background-color: #EEF7FF;border: 1px solid #CCC}
    .demo02 .right h6{ margin-bottom:5px}
    .demo02 .right .pubTime{ float:right;color:#999; margin-top:-8px}

   /*高级*/
    .demo03{width: 460px;padding:20px;position: relative;background-color: #EEF7FF;border: 1px solid #CCC; margin-left:100px}
    .demo03 h6{ margin-bottom:5px}
    .demo03 .dialog p{text-indent: 2em; line-height:20px}
    .demo03 .userPic{ float:left; margin:-20px 0 0 -100px}
    .demo03 .pubTime{position:absolute; top:10px; right:20px; color:#999;}
   </style>
  </head>

  <body>
    <!---demo01----------------------------------->
      <div class="demo01">
        <div class="left">
          [站外图片上传中……(4)]
        </div>
    
        <div class="right">
          <span class="pubTime">10分钟前</span>
          <h6>樱桃小丸子</h6>
          <p>奥鹏教育是由教育部高等教育司2001年12月批准立项试点，2005年4月正式批准运营的远程教育公共服务体系，为遍布全国的学员提供学历(专升本，高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务400-810-6736。</p>
        </div>
     </div>

    <!---demo02----------------------------------->    
      <div class="demo02">
        [站外图片上传中……(5)]
       <div class="right">
          <span class="pubTime">10分钟前</span>
          <h6>樱桃小丸子</h6>
          <p>奥鹏教育是由教育部高等教育司2001年12月批准立项试点，2005年4月正式批准运营的远程教育公共服务体系，为遍布全国的学员提供学历(专升本，高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务400-810-6736。</p>
       </div>
      </div>

    <!---demo03----------------------------------->    
      <div class="demo03">
        [站外图片上传中……(6)]
        <h5>樱桃小丸子</h5>
        <p>奥鹏教育是由教育部高等教育司2001年12月批准立项试点，2005年4月正式批准运营的远程教育公共服务体系，为遍布全国的学员提供学历(专升本，高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务400-810-6736。</p>
        <span class="pubTime">10分钟前</span>
      </div>

 </body>
 </html>

CSS代码：

/*reset*/
 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
margin: 0;
padding: 0;
list-style: none;
font-size: 12px;
font-family: "Arial", "sans-serif", "微软雅黑", "宋体", "Tahoma";
     }
h1{font-size: 24px;}
h2{font-size: 20px;}
h3{font-size: 18px;}
h4{font-size: 16px;}
h5{font-size: 14px;}
h6{font-size: 12px;}
img{vertical-align: middle; border:none 0}
a{cursor: pointer;text-decoration: none}

 /*表&表单*/
table{border-collapse:collapse; border-spacing:0; border:0}
input,select{vertical-align: middle}
textarea{resize:none}
label {vertical-align: middle}
input:focus , textarea:focus {outline: none}    
.text{height:20px;vertical-align: middle; border: 1px solid #CCC}
.radio{ vertical-align:-3px;*vertical-align:-1px;border:none 0; border-top-width: 0px}
.btn {border:none 0;text-align:center;vertical-align: middle}

/*文字排版*/
.fb{font-weight:bold}
.fn{font-weight:normal}
.unl{text-decoration:underline;}
.no_unl{text-decoration:none;}
.strong{font-weight:bold}


/*定位*/
.tl{text-align:left}
.tc{text-align:center}
.tr{text-align:right}
.tb {font-weight: bold;}
.tn {font-weight: normal;}
.fl{float:left;display:inline}
.fr{float:right;display:inline}
.cb{clear:both}
.cl{clear:left}
.cr{clear:right}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
* html .clearfix{height:1%}
.vm{vertical-align:middle}
.pr {position: relative;}
.pa {position: absolute;}
.zoom{zoom:1}
.hidden{visibility:hidden}
.none{display:none}
.w{width:100%}
.h{height:100%}
.mc {margin:0px auto;}
.back {
   height: 18px;
   width: 120px;
   position: absolute;
   top: 0px;
   right: 30px;
   background-image: url(../../../images/backbg.png);
   text-align: center;
   color: #FFF;
       }
.back:hover{ color:#069}

实际效果如下：

2.网页换肤

相同的HTML,不同的CSS

在网页制作中，面对设计图，网页制作人员一般要遵循的原则是:先考虑设计图中的文字内容和内容模块之间的关系，重点放在编写html结构和语义化，然后考虑布局和表现形式。

5.网页简单布局之结构与表现原则

示例：

推荐阅读更多精彩内容