網頁佈局基礎_ZenDei技術網路在線

網頁佈局基礎簡介什麼是網頁佈局？網頁佈局是網頁製作的基礎，使用DIV+CSS佈局網頁是基礎中的基礎。三種基本佈局方式：流式佈局，浮動佈局，絕對定位佈局。網頁設計的特點：1：網頁寬度可變 2頭+內容主體（根據需要分欄）+頁腳（不重要的內容）對長度設置百分比可實現網頁自適應 W3C標準包括結構 ...

網頁佈局基礎

簡介

什麼是網頁佈局？
網頁佈局是網頁製作的基礎，使用DIV+CSS佈局網頁是基礎中的基礎。三種基本佈局方式：流式佈局，浮動佈局，絕對定位佈局。

網頁設計的特點：1：網頁寬度可變 2頭+內容主體（根據需要分欄）+頁腳（不重要的內容）對長度設置百分比可實現網頁自適應

W3C標準包括結構化標準語言，表現標準語言，行為標準語言，倡導結構，樣式，行為分離。

CSS中，存在三種定位機制：標準文檔流，浮動，絕對定位。

標準文檔流：從上到下，從左到右輸出文檔內容，由塊級元素和行級元素組成。

浮動：float屬性left(左浮動) right(右浮動) none(不浮動) 元素會左移或右移，直至碰到容器為止。

關於浮動的詳細介紹參考我轉載的《CSS浮動-float/clear》

絕對定位： position屬性擁有三種定位方式 1.靜態定位(static) 2.相對定位(relative) 3.絕對定位(absolute fixed(固定定位))

參考我前面的《CSS基礎》有詳細解釋。

相對定位的特點：
1.相對自身原有位置進行偏移 2.仍處於標準文檔流中，會占據原來的空間位置 3.擁有偏移屬性和z-index屬性，即空間層疊現象。

    絕對定位特點：
    1.建立以包含塊為基準的定位 2.完全脫離了標準文檔流   3.隨即擁有偏移屬性和z-index屬性
    未設置偏移量時：如position：absolute；
    1.無論是否有已經定位的祖先元素(一個元素設定了相對定位或者絕對定位，就是已經定位的元素)，都會保持在元素的初始位置,寬度隨著內容變化。
    2.脫離標準文檔流
    設置偏移量時：如position：absolute；top:20px;left:50px;
    1.沒有已定位的祖先元素
    ①會以根元素<html>為偏移的參照基準
    2.有已定位的祖先元素
    ①會以最近的已定位祖先元素作為參照基準

盒子模型：網頁佈局的基礎，由四部分組成：邊框(border) 外邊距(margin) 內邊距(padding) 盒子中的內容(content) 盛放網頁中的圖片，內容，音視頻等。

盒子模型的立體圖片，從第一層到第五層依次為：border、content+padding、background-image、background-color、margin。

運用盒子模型製作下圖：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>幾米簡介</title>
 6     <link rel="stylesheet" type="text/css" href="css/style.css"><!--導入外部CSS樣式-->
 7 </head>
 8 <body>
 9     <div class="content book">  <!--導樣追加-->
10         <img src="images/book1.jpg" width="80" height="80">
11         <img src="images/book2.jpg" width="80" height="80">
12         <img src="images/book3.jpg" width="80" height="80">
13         <img src="images/book4.jpg" width="80" height="80">
14         <img src="images/book5.jpg" width="80" height="80">
15     </div>
16 </body>
17 </html>

html代碼

img{
    margin:10px 18px;
    border:1px solid #b1adad;
}
.content{
    border:4px solid #badbdb;
    padding:44px 15px 15px;
    width:700px;
}
.book{
    background: url(../images/t_book.gif) no-repeat #eff9f9;    /*特別註意引用*/

}
*{
    margin:0;
    padding: 0;   /* 消除瀏覽器設置的外填充和內填充 */
}

CSS代碼

心得：

1.引用外部CSS樣式須在<head></head>中添加代碼<link rel="stylesheet" type="text/css" href="CSS路徑">

    2.關於路徑(重要): .\   表示項目文件所在目錄之下的目錄。
                              ..\ 表示項目文件所在目錄向上一級目錄下的目錄。
                              ..\..\表示項目文件所在目錄向上二級目錄之下的目錄。

3.*{margin:0;padding: 0; /* 消除瀏覽器設置的外填充和內填充 */} 消除瀏覽器預設的標簽外填充和內填充

自動居中一列佈局案例

掌握三個技能點：標準文檔流，塊級元素，margin屬性-設置自動居中

心得：圖1三個層每層都把頁面撐滿了，為頁面自動居中，給三個塊設置一個包裹層wrap #wrap{width:700px;margin:0px auto;}

auto會自動根據瀏覽器的寬度自動設置兩邊的外邊距。原理：（瀏覽器的寬度-外包含層的寬度）/2=外邊距如果想讓頁面自動居中，當設置了margin屬性為auto時，不能再設置浮動或絕對定位屬性。

<body>
    <div id="wrap">
    <div id="header"></div>
    <div id="mainbody">
    <div class="content book">  <!--導樣追加-->
        <img src="images/book1.jpg" width="80" height="80">
        <img src="images/book2.jpg" width="80" height="80">
        <img src="images/book3.jpg" width="80" height="80">
        <img src="images/book4.jpg" width="80" height="80">
        <img src="images/book5.jpg" width="80" height="80">
    </div>
    </div>
    <div id="footer"></div>
    </div>
</body>

CSS   塊級元素寬會繼續父級元素寬，自適應     
#header{
    width:100%;
    height:200px;
    border:1px solid red;
}

#mainbody{
    width:100%;
    height:200px;
    border:1px solid black;
}
#footer{
    width:100%;
    height:200px;
    border:1px solid blue;
}
#wrap{width:770px;margin:0 auto;}

View Code

浮動佈局案例 - 橫向多列佈局

主要應用技能：float屬性-使縱向排列的塊級元素，橫向排列。

margin屬性-設置兩列之間的間距。

下圖為未設置浮動前樣式：

添加float屬性使黑色和綠色塊併列排列，為黑色塊和綠色快添加代碼：

.left{width:800px;background: black;height:200px;float:left;}
.right{width:140px;background: green;height:300px;float: left;}

可見，受到浮動影響的有兩部分，第一部分是mainbody的父包含塊，第二部分是緊隨後面的元素（版權部分）。父層未設置浮動，兩個子元素設置了浮動，父層高度無法擴展了。

為mainbody清除浮動影響：清除浮動有兩種做法：1 沒撐開的元素設置：overflow:hidden; 2 跑上去的元素設置clear:both;

當父包含塊縮成一條時；用clear：both方法清除浮動無效；它一般用於緊鄰後面的元素的清除浮動。這時可以用第二種方法：父包含塊增加移除屬性overflow：hidden。

<div>塊高度一般不要設置。

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
     *{margin:0;padding: 0;} 
     #swap{background: #00C;margin:0 auto;width:960px;}
     #header{background:#F30; width:100%;}
     #mainbody{background:#fc0; width:100%;overflow:hidden;/*繼承了父包含塊的寬度*/}
     #footer{background:#639; width:100%;}
     .left{width:800px;background: black;height:200px;float:left;}
     .right{width:140px;background: green;height:300px;float:right;}/*一般間距控制在10-20px*/
    </style>
</head>
<body>
<div id="swap">
    <div id="header">頭部</div>
    <div id="mainbody">
        <div class="left"></div>
        <div class="right"></div>
    </div> 
    <div id="footer">版權部份</div>
</div>
</body>
</html>

View Code

絕對定位佈局案例 - 絕對定位實現橫向的兩列或者多列佈局

    absolute實現橫向兩列佈局不常用，主要用於一列固定寬度，另一列寬度自適應的情況。
    應用技能：父元素相對定位，relative    自適應寬度元素絕對定位（子元素），absolute
    註意：固定寬度列的高度>自適應寬度的列(否則浮動撐不起固定列)

#mainbody {
         width:100%;
         position:relative;
         margin-top:20px;
}

#sidebar {
    width:180px;
    padding-bottom:10px;
}

#content {
position:absolute;
margin-left:200px;
top:0;  /*不設置的話會保留原位置*/

網頁佈局之結構和表現原則

   1、先按照結構和語義編寫代碼；
   2、然後進行CSS樣式設置；
   3、減少HTML與CSS契合度。

   真正意義上的結構與表現分開的思想，就是高級思路的思想。

  結構與表現的分離：
  text-indent：使文本縮進到想要的位置。
  只是一行簡短文字數字，可以用段落排版的思路來“定位”，即用text-indent：**px 縮進來達到目的。
  如果設置一個極小的負值，則可以在瀏覽器上隱藏文本，卻又能被搜索引擎搜索到

1、拿到一個網頁的設計圖時，首先關註網頁的文字內容及內容模塊之間的關係，把重點放在編寫html語義化的代碼上，而不要過多的考慮設計圖上的佈局樣式，等html按內容編寫完以後再考慮樣式如何實現，力求不改變樣式結構的基礎上完成要求的視覺效果。語義化的主要目的就是讓大家直觀的認識標簽(markup)和屬性(attribute)的用途和作用！
2、利用margin屬性來移動設置html結構.margin可以是負值，通過負值，可以使該內容進行移動！實現四個方向的移動。在結構（HTML）和樣式（css）中，可以先把內容通過HTML寫出來，再利用margin移動位置，實現排版，降低樣式和結構的耦合，並且減少代碼。

所以在做設計圖的時候，也可以先單純的考慮需要搭建的主要內容，以及放的位置，然後再想他的樣式風格。力求在不改變html結構的情況下用css調整想要的效果

設置圖片內邊距後：為什麼設置了內邊距背景圖就顯示出來了呢?
根據CSS盒子模型,一個元素,從上到下分為邊框,內容和內邊距,背景圖,外邊距,背景顏色,共5個層次.開始時,因為沒有設置內邊距,盒子內部尺寸等於內容的尺寸,因此,處於第二層的內容將處於第三層的背景圖遮擋住.設置了內邊距之後,盒子的內部空間被擴展,第二層的內容不再占據整個盒內空間,空餘處的背景圖也就被顯示出來了!

1 body{ margin:0;}
2 div{background:#460E29;width:700px;padding:20px}
3 img{background:url(http://img.mukewang.com/5385ac820001905201440133.jpg);}
4 </style>
5 </head>
6 <body>
7 <div><img src="http://img.mukewang.com/5385acb000013b0d00950095.jpg" /><img src="http://img.mukewang.com/5385acb000013b0d00950095.jpg" /><img src="http://img.mukewang.com/5385acb000013b0d00950095.jpg" /><img src="http://img.mukewang.com/5385acb000013b0d00950095.jpg" /> </div>
8 </body>

View Code

實踐：導航條菜單的製作

     1.垂直菜單的製作    一般都使用 “ul\li” 來製作“菜單導航條”    要點：基本的樣式清除： *{margin:0;padding:0}
            無序列表圓點去除： ul{list-style:none}
            鏈接下劃線去除： a{text-decoration:none}
            文本縮進標簽 text-indent 不會影響總體寬度（padding會）
            需要將a標簽設置為塊元素，才能設高寬、hover效果代碼：a{display:block}
            hover格式 a:hover{}

<style type="text/css">
        *{
            margin:0;
            padding:0;
            font-size: 14px;
        }
        ul{
            list-style: none;
            width: 100px;
        }
        a{
            text-decoration: none;display: block;height: 30px;
            line-height: 30px;
            margin-bottom: 1px;
            width:100px;
            background: #ccc;
            text-indent: 20px;
        }
        a:hover{
            background: orange;
        }
    </style>
</head>
<body>
<ul> 
    <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>
</body>

View Code

2.水平菜單的製作

水平菜單的html結構與上面的垂直菜單完全相同，只是css樣式有所變化。

     與垂直菜單相比
     1、li添加了float屬性(主要)
     2、ul的寬度限制去掉了(主要)
     3、a的text-indent換成了text-align

3.1伸縮菜單的製作（改變滑鼠經過的高度）

通過設置背景，改變外觀樣式

通過a:hover,可以為菜單增加交互效果

菜單<li>浮動後，<li>脫離文檔流，導致<ul>將失去高度和寬度；如果需要對<ul>進行整體背景設置，首先要給<ul>定義寬、高。

a{display:block;height:30px;text-align:center; line-height:30px; width:120px; background-color:#ccc;}
a.on, a:hover{ color:#fff;background-color:#F60;height:40px; line-height:40px;margin-top:-10px;}

3.2水平伸縮菜單的製作（可以後學習）

水平方向伸縮菜單：
JavaScript：
1、window.onload //DOM執行完以後在執行其下代碼
2、document.getElementsByTagName('a'); //獲取所有的a標簽
3、object(a).length //說的是a標簽的個數
4、onmouseover、onmouseout //滑鼠移入移出
5、clearInterval(this.time); //實行動畫前要先清除之前的動畫避免動畫累加
6、setInterval(function(){},30); //每30毫秒實行一下此函數
7、This.offsetWidth+8+"px"; //當前的寬度+變寬的速度
jQuery：
1、首先要引入jQuery再寫script標簽及jq代碼 <script type="tt/js" src="....min.js"></script><script> jq代碼 </script>
2、$('a').hover() //選擇所有a標簽 jq封裝的hover方法
3、hover方法自帶移入移出方法 function(){},function(){}
4、$(this).stop().animate({"width":"160px"},200); //實行當前動畫前先停掉上一個動畫；自帶移入移出動畫animate 寬度發生變化延遲200毫秒

導航條菜單製作總結
1、用無序列表構建菜單；ul/li
2、垂直菜單轉變為水平菜單：float:left；
3、在製作圓角菜單時，背景圖片貼在<a>標簽上； -------> 雪碧圖的應用--- background-position
4、在製作改變高度的伸縮菜單時，實現高度向上延伸的技巧： ----> margin-top用負值；
5、用JS製作水平伸縮菜單時，“this”代表當前的<a>標簽。