DIV+CSS網頁標準化佈局(一)

来源:http://www.cnblogs.com/ckyo/archive/2016/09/14/5871446.html
-Advertisement-
Play Games

1、DIV+CSS定義及優勢 Div+css 是什麼? Div+css 是一種目前比較流行的網頁佈局技術 Div 來存放需要顯示的數據(文字,圖表..) , css 就是用來指定怎樣顯示, 從而做到數據和顯示相互的效果 Div+css 優勢 採用DIV+CSS模式的網站具有以下優勢: 表現和內容相分 ...


1、DIV+CSS定義及優勢

Div+css 是什麼?

Div+css 是一種目前比較流行的網頁佈局技術

Div 來存放需要顯示的數據(文字,圖表..) , css 就是用來指定怎樣顯示, 從而做到數據和顯示相互的效果

Div+css 優勢

  • 採用DIV+CSS模式的網站具有以下優勢:
  • 表現和內容相分離
  • 代碼簡潔,提高頁面瀏覽速度
  • 易於維護和改版
  • 提高搜索引擎對網頁的索引效率

我們可以簡單的這樣理解div+css:

div 是用於存放內容(文字,圖片,元素)的容器。

css 是用於指定放在div中的內容如何顯示,包括這些內容的位置和外觀.

 

2、“無意義”的HTML元素div和span

  • HTML只是賦予內容的手段,大部分HTML標簽都有其意義(例如,標簽p創建段落,h1標簽創建標題等等)的,然而divspan標簽似乎沒有任何內容上的意義,聽起來就像一個泡沫做成的錘子一樣無用。但實際上,與CSS結合起來後,它們被用得十分廣泛。你所需要記住的是span和div是“無意義”的標簽。它們的存在純粹是應用樣式,所以當樣式表失效時它就沒有任何的作用
  • 它們被用來組合成一大塊的HTML代碼並賦予一定的信息,大部分用類屬性class和標識屬性id與元素聯繫起來。span和div的不同之處在於span是內聯的,用在一小塊的內聯HTML中。而div(division)元素是塊級的(簡單地說,它等同於其前後有斷行),用於組合一大塊的代碼,為HTML 文檔內大塊的內容提供結構和背景的元素,可以包含段落、標題、表格甚至其他部分,這使div便於建立不同集成的類。
  • div的起始標簽和結束標簽之間的所有內容都是用來構成這個塊的,其中所包含元素的特性由div標簽的屬性來控制,或者是通過使用樣式表格式化這個塊來進行控制

 3、頁面佈局的盒子模型

(1)盒子模型的相關屬性

  • margin(外邊距/邊界)
  • border(邊框)
  • padding(內邊距/填充 )

     我們看圖理解一下各屬性作用:

     

     以上屬性又分為上、右、下、左四個方向
     
     問題:頁面元素的寬度width、高度height如何計算?
     答案:元素的實際占位尺寸 = 元素尺寸 + padding + 邊框寬度
     比如:元素實際占位高度 = height屬性 + 上下padding + 上下邊框寬度


  

(2)盒模型的層次關係

    我們通過一個經典的盒模型3D立體結構圖來理解,如圖:
    

     從上往下看,層次關係如下:

     第1層:盒子的邊框(border),
     第2層:元素的內容(content)、內邊距(padding)
     第3層:背景圖(background-image)
     第4層:背景色(background-color)
     第5層:盒子的外邊距(margin)

     從這個層次關係中可以看出,當同時設置背景圖和背景色時,背景
     圖將在背景色的上方顯示

 

4、聲明盒子模型的CSS屬性

例如:

 1 <html>
 2     <head>
 3         <title>盒子模型</title>
 4         <style>
 5             #box {                               /* ID為box的盒子模型     */
 6                 width:200px;                     /* 盒子的寬度為200px     */
 7                 height:200px;                    /* 盒子的高度為200px     */
 8                 border:5px solid #ccc;           /* 盒子邊框實線各邊寬5px */
 9                 padding:10px;                    /* 盒子的4個內填充為10px */
10                 margin:20px;                     /* 盒子的4個外邊距為10px */
11             }
12         </style>
13     </head>
14     <body>
15         <div id="box">                           <!-- 使用DIV聲明一個盒子    -->
16             內容區                                <!-- 盒子內容可再嵌套個盒子 -->
17         </div>
18     </body>
19 </html>

 

  • 水平居中和垂直居中

    水平居中包含兩種情況:
 塊級元素的水平居中:margin:0px auto;
        文字內容的水平居中:text-align: center;

    垂直居中:
        常見的單行文字的垂直居中可設置文字所在行的height與
        行高樣式屬性一致,比如:
        div{
            width: 400px;
            height: 400px;
            line-height: 400px;/*行高與div高度一致*/
        }

5、和頁面佈局有關的CSS屬性

 

 1 #box {                              /* 聲明ID選擇器,名稱為box           */         
 2     position:absolute;              /* 設置層的定位為絕對定位            */ 
 3     top:30px;                       /* 層距離頂點縱向坐標的距離為30個像素  */ 
 4     left:100px;                     /* 層距離左點橫向坐標的距離為100個像素 */ 
 5     width:300px;                    /* 設置層的寬度為300個像素           */ 
 6     height:150px;                   /* 設置層的高度為150個像素           */ 
 7     overflow:auto;                  /* 當內容超出層的範圍時顯示滾動條     */ 
 8     z-index:1;                      /* 設置層的先後順序為覆蓋關係        */ 
 9     visibility:visible;            /* 無論父層是否可見,子層都可見       */ 
10 }

 

 

6、盒子區塊框的定位

層模型--絕對定位

如果想為元素設置層模型中的絕對定位,需要設置position:absolute(表示絕對定位),這條語句的作用將元素從文檔流中拖出來,然後使用left、right、top、bottom屬性相對於其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊,則相對於body元素,即相對於瀏覽器視窗

如下麵代碼可以實現div元素相對於瀏覽器視窗向右移動100px,向下移動50px。

1 div{
2     width:200px;
3     height:200px;
4     border:2px red solid;
5     position:absolute;
6     left:100px;
7     top:50px;
8 }
9 <div id="div1"></div>

 

效果如下:

 

層模型--相對定位

如果想為元素設置層模型中的相對定位,需要設置position:relative(表示相對定位),它通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一個元素(並且元素像層一樣浮動了起來),然後相對於以前的位置移動,移動的方向和幅度由left、right、top、bottom屬性確定,偏移前的位置保留不動。

如下代碼實現相對於以前位置向下移動50px,向右移動100px;

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:relative;
    left:100px;
    top:50px;
}

<div id="div1"></div>


效果圖:

什麼叫做“偏移前的位置保留不動”呢?

大家可以做一個實驗,在右側代碼編輯器的19行div標簽的後面加入一個span標簽,在標併在span標簽中寫入一些文字。如下代碼:

<body>
    <div id="div1"></div><span>偏移前的位置還保留不動,覆蓋不了前面的div沒有偏移前的位置</span>
</body>

效果圖:

從效果圖中可以明顯的看出,雖然div元素相對於以前的位置產生了偏移,但是div元素以前的位置還是保留著,所以後面的span元素是顯示在了div元素以前位置的後面。

 

層模型--固定定位

fixed:表示固定定位,與absolute定位類型類似,但它的相對移動的坐標是視圖(屏幕內的網頁視窗)本身。由於視圖本身是固定的,它不會隨瀏覽器視窗的滾動條滾動而變化,除非你在屏幕中移動瀏覽器視窗的屏幕位置,或改變瀏覽器視窗的顯示大小,因此固定定位的元素會始終位於瀏覽器視窗內視圖的某個位置,不會受文檔流動影響,這與background-attachment:fixed;屬性功能相同。以下代碼可以實現相對於瀏覽器視圖向右移動100px,向下移動50px。並且拖動滾動條時位置固定不變。

 1 #div1{
 2     width:200px;
 3     height:200px;
 4     border:2px red solid;
 5     position:fixed;
 6     left:100px;
 7     top:50px;
 8 }
 9 <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
10 ....
11  

 

 

7、盒子模型的浮動佈局

  理解浮動屬性首先要搞清楚,什麼是文檔流?
    文檔流:瀏覽器根據元素在html文檔中出現的順序,
        從左向右,從上到下依次排列
    
    浮動屬性是CSS中的定位屬性,用法如下:
        float: 浮動方向(left、right、none);

    left為左浮動、right為右浮動、none是預設值表示不浮動
    ,設置元素的浮動,該元素將脫離文檔流,向左或向右移動
    直到它的外邊距碰到父元素的邊框或另一個浮動元素的邊
    框為止


    浮動示例,沒有使用浮動的3個DIV:
    HTML結構代碼:
        <div id="first">第1塊div</div>
        <div id="second">第2塊div</div>
        <div id="third">第3塊div</div>

    CSS樣式代碼:
        #first, #second, #third{
                width:100px;
                height:50px;
                border:1px #333 solid;
                margin:5px;
        }

    執行效果如圖:
    


    樣式中加入 float:left;
    執行效果如圖:
    
    
    你再修改為 float: right試試右浮動是什麼效果
    
16、讓商品分類DIV、內容DIV和右側DIV併排放置

    HTML結構代碼:
    

1 <div id="container"> 
2     <div id="header">頂部(header)</div> 
3     <div id="main"> 
4         <div class="cat">商品分類(cat)</div> 
5         <div class="content">內容(content)</div> 
6         <div class="sidebar">右側(sidebar)</div> 
7     </div> 
8     <div id="footer">底部(footer)</div> 
9 </div> 

 

1 <div id="container">  
2     <div id="header">頂部(header)</div>  
3     <div id="main">  
4         <div class="cat">商品分類(cat)</div>  
5         <div class="content">內容(content)</div>  
6         <div class="sidebar">右側(sidebar)</div>  
7     </div>  
8     <div id="footer">底部(footer)</div>  
9 </div>  

 

   CSS樣式代碼(在第13節CSS代碼基礎上加入):

 1 .cat, .sidebar {
 2         float:left;
 3         width:20%;
 4         height:100%;
 5     }
 6  .content {
 7         float:left;
 8         width:60%;
 9         height:100%;
10     }

 

 

17、clear清除

    clear只對塊級元素有效,表示如果前一個元素存在左浮動或右浮動,則換行
    clear屬性的取值:rigth、left、both、none

 部分內容轉自Mercop的專欄慕課網


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 有序列表 無序列表 定義列表 定義列表由 定義條件(definition term) 和 定義描述(definition description) 構成 ``標記後面添加要解釋的名詞 ``標記後面添加名詞的具體解釋 慄子: 輸出效果: ...
  • 標題 `` 對齊方式有left,center,right三種,預設表示left 段落 段落標記的結束標記''可以省略,一個新的段落開始標記就意味著上一個段落的結束 換行 不換行 當一段很長的時候,瀏覽器一般會自動進行換行處理,如果不希望瀏覽器這麼做,可以使用``標記 水平線 使用``可以在網頁中插入 ...
  • [1]刪除節點 [2]插入節點 [3]特性節點 [4]文本節點 ...
  • 這次和大家分享的是自己寫的一個table常用幾種展示格式的js插件取名為(table-shenniu),樣式使用的是bootstrap.min.css,還需要引用jquery.min.js包,這個插件由來的目的是項目中需要一個table格式的提交數據的頁面,功能有合併單元格,只能提交選中行數據,全選 ...
  • JavaScript的函數定義有個特點,它會先掃描整個函數體的語句,把所有申明的變數“提升”到函數頂部: 雖然是strict模式,但語句var x = 'Hello, ' + y;並不報錯,原因是變數y在稍後申明瞭。但是alert顯示Hello, undefined,說明變數y的值為undefine ...
  • screen.width screen.height screen.availHeight //獲取去除狀態欄後的屏幕高度 screen.availWidth //獲取去除狀態欄後的屏幕高度 一、通過瀏覽器獲得屏幕的尺寸 二、獲取瀏覽器視窗內容的尺寸 //高度 window.innerHeight ...
  • 簡單說明 這篇文章是我學習react一個多月來的總結,從基礎開始(包括編輯器設置,構建工具搭建),一步一步走向react開發。相信我,看完這篇文章,跟著文章的步驟走,保證讓你入門react並愛上react,掌握react-router,redux。本文遵循由淺入深的原則。 一、編輯器開始 這裡介紹的 ...
  • 回調函數 在javascript中,當一個函數A作為另外一個函數B的其中一個參數時,則稱A函數為回調函數,即A可以在函數B的運行周期內執行(開始,中間,結束)。 舉例來說,有一個函數用於生成node. 又有一個findNodes函數聲明用於查找所有節點,然後通過callback回調進行執行代碼。 關 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...