5.網(wǎng)頁簡(jiǎn)單布局之結(jié)構(gòu)與表現(xiàn)原則

** 1.結(jié)構(gòu)與表現(xiàn)相關(guān)內(nèi)容簡(jiǎn)介**

網(wǎng)頁制作中 結(jié)構(gòu)（HTML)、表現(xiàn)(CSS)、行為分離(JavaScript)

原則：先不管樣式（CSS),重點(diǎn)放在HTML的結(jié)構(gòu)和語義化上

拿到一個(gè)網(wǎng)頁設(shè)計(jì)圖的時(shí)候，首先關(guān)注網(wǎng)頁的文字內(nèi)容以及內(nèi)容模塊間的關(guān)系。

把重點(diǎn)放在編寫語義化的html代碼上，而不要過多考慮設(shè)計(jì)圖上的樣式，

等到html按內(nèi)容編寫完成之后，再考慮樣式的實(shí)現(xiàn)。

在不改變現(xiàn)有結(jié)構(gòu)的基礎(chǔ)上，完成設(shè)計(jì)圖要求的視覺效果.

利用margin屬性來移動(dòng)設(shè)置html結(jié)構(gòu).

想考慮內(nèi)容完整性，在考慮樣式，在視覺上達(dá)到目的要求后，在進(jìn)行修正

拋開樣式，先寫結(jié)構(gòu)，實(shí)現(xiàn)結(jié)構(gòu)與樣式分離

  • 初級(jí)的人員思路及制作方法：div層層嵌套。
  • 中級(jí)的人員思路及制作方法：去掉多余的div，進(jìn)行簡(jiǎn)化。
  • 高級(jí)的人員思路及制作方法：簡(jiǎn)化結(jié)構(gòu)，并在現(xiàn)有結(jié)構(gòu)基礎(chǔ)上，只通過樣式去改變它的布局，就完成了一個(gè)視覺效果。

步驟：

先按結(jié)構(gòu)和語義編寫代碼

然后進(jìn)行css樣式設(shè)置

減少HTML與CSS契合度

margin-left：100px表示塊元素的左側(cè)外邊距是100px，即與其左側(cè)相鄰塊元素的間距增加100px,直接表現(xiàn)就是向右移動(dòng)100px；加負(fù)號(hào)后表示與其左側(cè)相鄰塊元素的間距減小100px，直接表現(xiàn)就是向左移動(dòng)100px.

總結(jié)：

核心思想：結(jié)構(gòu)和表現(xiàn)分離。

示例：

微博用戶發(fā)言信息列表制作：

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}


    /*初級(jí)*/
    .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}

    /*中級(jí)*/
    .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}

   /*高級(jí)*/
    .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月批準(zhǔn)立項(xiàng)試點(diǎn)，2005年4月正式批準(zhǔn)運(yùn)營(yíng)的遠(yuǎn)程教育公共服務(wù)體系，為遍布全國(guó)的學(xué)員提供學(xué)歷(專升本，高起專)和非學(xué)歷教育咨詢、報(bào)名、學(xué)習(xí)輔導(dǎo)、課程考試、交費(fèi)等7X24小時(shí)學(xué)習(xí)支持服務(wù)400-810-6736。</p>
        </div>
     </div>

    <!---demo02----------------------------------->    
      <div class="demo02">
        [站外圖片上傳中……(5)]
       <div class="right">
          <span class="pubTime">10分鐘前</span>
          <h6>櫻桃小丸子</h6>
          <p>奧鵬教育是由教育部高等教育司2001年12月批準(zhǔn)立項(xiàng)試點(diǎn)，2005年4月正式批準(zhǔn)運(yùn)營(yíng)的遠(yuǎn)程教育公共服務(wù)體系，為遍布全國(guó)的學(xué)員提供學(xué)歷(專升本，高起專)和非學(xué)歷教育咨詢、報(bào)名、學(xué)習(xí)輔導(dǎo)、課程考試、交費(fèi)等7X24小時(shí)學(xué)習(xí)支持服務(wù)400-810-6736。</p>
       </div>
      </div>

    <!---demo03----------------------------------->    
      <div class="demo03">
        [站外圖片上傳中……(6)]
        <h5>櫻桃小丸子</h5>
        <p>奧鵬教育是由教育部高等教育司2001年12月批準(zhǔn)立項(xiàng)試點(diǎn)，2005年4月正式批準(zhǔn)運(yùn)營(yíng)的遠(yuǎn)程教育公共服務(wù)體系，為遍布全國(guó)的學(xué)員提供學(xué)歷(專升本，高起專)和非學(xué)歷教育咨詢、報(bào)名、學(xué)習(xí)輔導(dǎo)、課程考試、交費(fèi)等7X24小時(shí)學(xué)習(xí)支持服務(wù)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}

實(shí)際效果如下：

2.網(wǎng)頁換膚

相同的HTML,不同的CSS

在網(wǎng)頁制作中，面對(duì)設(shè)計(jì)圖，網(wǎng)頁制作人員一般要遵循的原則是:先考慮設(shè)計(jì)圖中的文字內(nèi)容和內(nèi)容模塊之間的關(guān)系，重點(diǎn)放在編寫html結(jié)構(gòu)和語義化，然后考慮布局和表現(xiàn)形式。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,796評(píng)論 1贊 92
  • ?前端面試題匯總 一、HTML和CSS 21 你做的頁面在哪些流覽器測(cè)試過？這些瀏覽器的內(nèi)核分別是什么? ...
    Simon_s閱讀 2,228評(píng)論 0贊 8
  • 第一部分HTML&CSS整理答案1.什么是HTML5？ 答：HTML5是最新的HTML標(biāo)準(zhǔn)。 注意：講述HTML5...
    Programmer客棧閱讀 2,035評(píng)論 0贊 12
  • 恍恍惚惚，晃晃悠悠。 明明還在外婆祖屋消夏，在土地裡奔跑著抓蟲子，那四個(gè)小小少年?似乎是忘了時(shí)間，爾等回想起來，那...
    小王子胖閱讀 199評(píng)論 0贊 1
  • 昨晚的睡眠很好，沒有早醒，估計(jì)跟白天有很大關(guān)系。 每天上班都出現(xiàn)分神、注意力不集中，腦子里面想的事物與眼前的工作內(nèi)...
    饒恕與恩典閱讀 185評(píng)論 0贊 0