CSS網頁布局基礎教程

2020-12-06 鎮上寶塔

網頁布局基礎教程

網頁的布局有很多種方式，一般分為以下幾個部分：

頭部區域部分菜單導航區域部分內容區域部分底部區域部分

一般網頁的布局

網頁頭部區域部分

頭部區域部分位於整個網頁的頂部，一般用於設置網頁的標題或者網頁的圖標：

實例如下：

代碼1

效果1

代碼2

效果2

部分代碼：

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>CSS網頁布局教程</title> <style> body { margin: 0; } /* 頭部樣式 */ .header { background-color:darkslategrey; padding: 25px; text-align: center; } h1 { color: aliceblue; } </style></head><body><div> <h1>頭部區域部分</h1></div></body></html>菜單導航區域

菜單導航條包含了一些連結，可以引導用戶瀏覽其他頁面：

代碼1

代碼1

效果

實現代碼：

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>CSS 網頁布局 </title> <style> * { box-sizing: border-box; } body { margin: 0; } /* 頭部樣式 */ .header { background-color: #f1f1f1; padding: 20px; text-align: center; } /* 導航條 */ .topnav { overflow: hidden; background-color:midnightblue; } /* 導航連結 */ .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } /* 連結 - 修改顏色 */ .topnav a:hover { background-color: #ddd; color: black; } </style></head><body><div> <h1>頭部區域</h1></div><div> <a href="#">導航連結</a> <a href="#">導航連結</a> <a href="#">導航連結</a></div></body></html>內容區域

內容區域一般形式（根據屏幕解析度和舒適的視覺體驗）:

1 例：用於移動端2 例：用於平板設備3 例：用於 PC 桌面設備

內容區域一般形式

創建一個響應式布局PC和以設備有不一樣的布局，如下：

部分代碼

PC 換顯示

移送設備顯示

IPad顯示

實現代碼：

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>CSS 網頁布局(runoob.com)</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } body { margin: 0; } /* 頭部樣式 */ .header { background-color: #f1f1f1; padding: 20px; text-align: center; } /* 導航條 */ .topnav { overflow: hidden; background-color: #333; } /* 導航連結 */ .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } /* 連結 - 修改顏色 */ .topnav a:hover { background-color: #ddd; color: black; } /* 創建三個不相等的列 */ .column { float: left; padding: 10px; } /* 左右兩側寬度 */ .column.side { width: 25%; } /* 中間區域寬度 */ .column.middle { width: 50%; } /* 列後面清除浮動 */ .row:after { content: ""; display: table; clear: both; } /* 響應式布局 - 寬度小於600px時設置上下布局 */ @media screen and (max-width: 600px) { .column.side, .column.middle { width: 100%; } } </style></head><body><div> <h1>頭部區域</h1> <p>重置瀏覽器大小查看效果。</p></div><div> <a href="#">連結</a> <a href="#">連結</a> <a href="#">連結</a></div><div> <div> <h2>左側欄</h2> <p>網頁布局教程 - 網頁布局教程</p> </div> <div> <h2>主區域內容</h2> <p>網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程</p> <p>網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程網頁布局教程 - 網頁布局教程</p> </div> <div> <h2>右側欄</h2> <p>網頁布局教程 - 網頁布局教程</p> </div></div></body></html>底部區域部門

底部區域部分在網頁的最下方，一般包含版權資訊，爬蟲信息和聯繫方式等。

HTML代碼

CSS代碼

效果

實例代碼：

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>CSS 網頁布局 </title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } body { margin: 0; } /* 頭部樣式 */ .header { background-color: #f1f1f1; padding: 20px; text-align: center; } /* 導航條 */ .topnav { overflow: hidden; background-color: #333; } /* 導航連結 */ .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } /* 連結 - 修改顏色 */ .topnav a:hover { background-color: #ddd; color: black; } /* 創建三個相等的列 */ .column { float: left; padding: 10px; } /* 左右兩側寬度 */ .column.side { width: 25%; } /* 中間區域寬度 */ .column.middle { width: 50%; } /* 列後面清除浮動 */ .row:after { content: ""; display: table; clear: both; } /* 響應式布局 - 寬度小於600px時設置上下布局 */ @media screen and (max-width: 600px) { .column.side, .column.middle { width: 100%; } } /* 底部樣式 */ .footer { background-color:black; padding: 10px; text-align: center; } p { color:white; } </style></head><body><div> <h1>頭部區域</h1> <p>重置瀏覽器大小查看效果。</p></div><div> <a href="#">連結</a> <a href="#">連結</a> <a href="#">連結</a></div><div> <div> <h2>左側欄</h2> <p>菜鳥教程 - 學的不僅是技術，更是夢想！</p> </div> <div> <h2>主區域內容</h2> <p>菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！</p> <p>菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！菜鳥教程 - 學的不僅是技術，更是夢想！</p> </div> <div> <h2>右側欄</h2> <p>菜鳥教程 - 學的不僅是技術，更是夢想！</p> </div></div><div> <p>底部區域</p></div></body></html>下次詳細講解另一種響應式網頁的實現，感謝點讚助力！

另一種響應式頁面

相關焦點

  • 需要掌握的八個CSS布局技巧
    6.若有疑問，先減少百分比　　有時候某些錯誤會使50%+50%成為100.1%，使網頁出現問題。這時請嘗試將這些值改為49%，甚至49.9%。（唯一的例外是line-height） 您可能還對以下內容感興趣：實例學習CSS網頁技術的基本語法   根據解析度不同調用不同的css文件CSS技巧！像table一樣布局div
  • HTML+CSS:css定位詳解之相對定位、絕對定位和固定定位
    本篇文章我們主要給大家說一下css的定位。css的定位是我們以後網頁製作中比較常用的屬性，也是很重要的知識點。了解各個定位的作用以及層級關係對以後的頁面布局至關重要。css定位主要有四種，靜態定位、相對定位、絕對定位和固定定位。其中靜態定位這個是元素的默認定位方式，不能使用top，bottom，left，right和z-index屬性，其它三種定位可以使用以上幾個屬性。我們這裡主要介紹後邊的這三個定位。
  • 網頁設計的黃金比例
    作為一個網頁設計師開始一個項目時經常會考慮到網頁的布局，雖然現在很多人傾向使用Grid css框架（如960，blueprint），但有時也需要設計一些獨特的布局本文我們要探討如何將黃金分割理論運用到網頁設計中，大部分涉及到的技術也同樣適用於其他的設計或藝術類工作，當然主要還是針對於網站設計布局。
  • 網頁製作的布局方法
    在製作網頁前，可以先設計出網頁的草圖。網頁布局的方法有兩種：一種為紙上布局，另一種為軟體布局。紙上布局法許多網頁設計人員喜歡先畫出頁面布局的草圖，然後在網頁編輯工具裡根據草圖進行布局。軟體布局法如果不喜歡用紙來畫出布局示意圖，那麼可以利用 Photoshop、 Fireworks等軟體來。完成這些工作。這樣可以方便地使用顏色、圖形，並且可以利用圖層的功能設計出用紙張無法實現的布局意念。
  • 網頁布局設計與色彩搭配
    網頁是網站構成的基本元素，精彩的網頁離不開網頁設計。在網頁設計的眾多環節中，頁面布局和色彩搭配是重要的環節之一。 1. 網頁的布局類型。 在網上瀏覽能看到許多精美的主頁和布局。
  • 全面掌握CSS基本知識點
    important 最高權值css選擇器符號表示, 選擇器分組，每組的樣式一致* 通配符，表示可以與任何元素匹配# ID選擇器[] 屬性選擇器 ，例如：[href],[title]div p 定義後代選擇器div > p 定義子元素選擇器p + li 相鄰兄弟選擇器，兩者有相同元素，選擇的是前一個選擇器相鄰的後一個選擇器講一下css3的彈性布局答案解析：
  • Meta CSS框架發布
    對此，通常有4種解決方法：　　1.每種不同款式，定義一個css。按鈕A一個css，按鈕B雖然長得跟A一樣，但是在右邊，那就copy下A的css代碼，然後改成在右邊。　　規則1：非定義尺寸的css定義，以css屬性名的首字母+屬性值的首字母組合而成。例如：font-weight:bold，css類名就是fwb。text-align:center，css類名就是tac。float:left，css類名就是fl。　　規則2：定義尺寸的css，以css屬性名的首字母+屬性值+屬性值單位的首字母。
  • 網頁設計布局包括哪些類型?
    建站離不開網頁設計，而網頁布局則是重中之重，其實布局可以說是一個網站的基礎，網頁設計布局是為了吸引用戶和提高網站的用戶體驗。在進行網頁設計布局時網頁內容是需要進行有機整合和分布的，以此來達到某種視覺效果。而設計網頁的目的不同，就有不同的網頁布局，那麼網頁設計布局都包括哪些類型呢？
  • Semantic:來自未來的CSS布局框架
    讓我們感到幸運的是，先進技術為我們引入了新的方法去布局網頁。在我們前往了解先進技術前，我們必須首先了解當前影響CSS網格樣式的三個看似不可克服的缺陷。從grid_x的CSS類到HTML元素，表象信息與其他語義標記都是混合在一起，這些，都需要網頁設計師自行添加。浮動元素也必須同時清除，因為它常常會把不必要的元素添加到網頁上。
  • UI設計CSS網頁基本單位知多少?奇酷學院告訴你
    想要成為一名合格的前端工程師，會寫頁面絕對不能少，而如果想要頁面寫得出彩，你必須要知道一些網頁常用的基本單位。在傳統的項目開發中，我們常常會用到px、%、em這幾個單位，因為它能適用於大部分的項目開發，而且擁有比較良好的兼容性。但素，你造嗎？
  • CSS常考知識點
    2.2 布局常用單位面試官：請列舉一下我們css布局常用的單位及區別（基礎題）px：絕對單位，頁面按精確像素展示%：相對單位，根據父容器進行百分比計算em：相對單位，基準點為父節點字體的大小，如果自身定義了font-size
  • 什麼是css,css選擇器簡介
    什麼是CSScss是 Cascading（層疊 ）Style（樣式） Sheet（表）的簡稱，及層疊樣式表，CSS技術用來美化html頁面，html相當於蓋房子，CSS相當於裝修，使用CSS可以把樣式代碼和html分離
  • 教大家如何編寫一個網頁導航條
    導航條簡單地說就是對你整個網站模塊的簡單介紹，你可以直接點擊導航條某一個按鈕或板塊便可進入其相應的界面，如：網頁、新聞、貼吧等 。在企業網站上，導航條上常見的有：產品介紹，公司簡介，最新產品，聯繫我們。而現在導航條的編寫方式多種多樣，如：CSS、Jquery、Bootstrap等。
  • CSS3 transform之scale縮放|transition之過渡動畫調整手記
    既然是滑鼠移上去後再發生變化，那首先需在css文件中，針對圖片的hover增加個樣式，縮放比例為1.1。css代碼如下：.notice .tab-pal .imgarea {width: 28%;position: relative;display: inline-block;overflow: hidden;}css是個神奇的東西，如同一個大寶庫取之不盡用之不竭，從我從事網頁製作工作接觸css開始，一直以為css很簡單，現在已經超過十五年過去了，我卻發現：還有好多的css
  • 怎麼在網頁中播放視頻之一:HTML5視頻嵌入
    在信息量越來越大的今天，越來越多的網站重視數據信息的多樣化與個性化，隨著多媒體技術逐漸發展提高，在線展示視頻、音頻、PPT、圖表等技術也越來越多地應用到了各行各業中，無論是企業還是個人，都在改變著自己的網站風格，下面就來談談怎麼在網頁中播放視頻。
  • 加速全球化布局,保利威推出網頁直播英文版
    作為國內領先的企業級視頻雲服務商，保利威致力於以視頻賦能客戶全球化布局，洞察到這個海外企業的需求缺口，保利威迅速上線了網頁開播英文版，依託領先的視頻雲技術，為客戶提供更友好、更便捷的視頻直播解決方案，助力中國企業更好地開拓海外市場，為全球企業提供抗疫支持。
  • CSS 編碼中超級有用的工具集合 - OSCHINA - 中文開源技術交流社區
    主頁: http://purecss.io/ CSS only responsive navigation 主頁: http://valdelama.com/css-responsive-navigation CSS Trashman
  • pc端的rem布局專題及常見問題 - CSDN
    PC則採用flexflex布局原理flex是flexible box的縮寫，意為彈性布局，用來為盒狀模型提供最大的靈活性，任何一個容器都可以指定為flex布局當我們為父盒子設為flex布局以後，子元素的float、clear和vertical-align屬性將失效flex布局又叫伸縮布局、彈性布局、伸縮布局、彈性盒子布局採用flex
  • 輕輕鬆鬆學CSS:position
    position屬性表示元素的定位類型，在CSS布局中，position發揮著非常重要的作用，一些元素的布局就是用position完成的，鑑於此，本文結合一些小實例詳細講解一下。position屬性在通常情況下有4個可選值，分別是：static、fixed、relative、absolute。