教程 | Web前端教程2:CSS+DIV頁面布局

2022-01-02 GIS研發團隊
CSS化妝，DIV布置，兩者搭配可以做出漂亮的頁面哦！（1）CSS參考

CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明:

選擇器通常是您需要改變樣式的 HTML 元素。

每條聲明由一個屬性和一個值組成。

屬性（property）是您希望設置的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開。

（2）使用 <div> 元素的 HTML 布局

注釋：<div> 元素常用作布局工具，因為能夠輕鬆地通過 CSS 對其進行定位。

參考3school有關div內容學習div+css界面布局得知識。

CSS 盒子模型CSS 盒子模型(Box Model)所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和布局時使用。CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。下面的圖片說明了盒子模型(Box Model)：

https://www.w3school.com.cn/html/html_layout.asp

https://www.runoob.com/html/html-layouts.html

示例：網頁布局

https://www.runoob.com/css/css-website-layout.html

網頁布局有很多種方式，一般分為以下幾個部分：頭部區域、菜單導航區域、內容區域、底部區域。

嘗試製作類似如下布局得頁面。

教程 | Web前端教程1:HTML基礎（1）

教程 | Web前端教程1:HTML基礎（2）

教程 | Web前端教程1:HTML基礎（3）

製作：GIS研發團隊

審核：張興國

相關焦點

  • web前端必學,10分鐘學會css的三大特性
    對於web前端小白來說，可能對CSS還不是很了解。
  • Div+CSS 基礎入門教程
  • Python爬蟲教程,付費歌曲一樣可以免費下載~
    page=searchPage')driver.find_element_by_css_selector('#input').send_keys('張杰')driver.find_element_by_css_selector('#search button:nth-child(2) i').click()"""保存歌曲數據"""def download(name, url): filename
  • Dreamweaver製作個人網頁的全過程(圖文教程第一彈)
    Hi，大家好，2021年來了，送走了艱難的2020年，去年很多場景至今都歷歷在目，仿佛就在昨日，用兩個網流語概括就是，996、我太難了，網上說今年依舊艱難，至於是否如此
  • 【教程】html+css零基礎入門教程(九)
    如:p.normal{font-style:normal;} 頁面上顯示為 F2E.TMING2) italic瀏覽器會顯示一個斜體的字體樣式。如:p{text-transform:none;} 頁面上顯示為 flash2) capitalize文本中的每個單詞以大寫字母開頭。
  • 新年煙花/表白/拜年/情人節/ html+css+js 放一場浪漫煙花秀(含音樂/定製相片)程式設計師表白必備煙花
    2.連接成功將你寫好的頁面部署上線後, 全世界的人都可以愉快的訪問到你的網頁了(永久免費使用哦)❉ 2.關注我~ 每天帶你學習 :各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業設計模板 等! 「在這裡有好多 前端 開發者，會討論 前端 Node 知識，互相學習」！❉ 3.以上內容技術相關問題可以留言/私信交流，也可以關注↓下方公眾號 獲取更多源碼 !
  • 前端進階:css必知的幾個底層知識和技巧
    在介紹完問題學習法之後，進入我們今天的主題，接下來我會介紹css的一些底層的知識的現象，藉此來讓大家對css有更深入的理解。一.css尺寸1.首選最小寬度–實現複雜圖形效果在css中，圖片和文字的權重遠大於布局，因此當width:0時表現出來的寬度就是「首選最小寬度」。中文的最小寬度為每個漢字的寬度，西方文字取決於連續的英文字符單元。
  • 教程《css3的clip-path屬性介紹》
    點擊上方「web前端網頁設計」一鍵關注，更多Html div css HTML5+CSS3、JavaScript、JQuery，PHP、mysql
  • CSS中content屬性的妙用
    在前端日常開發中，content屬性使用頻率並不高，所以開發者一般對它的理解並不深入，通常會在清除浮動、字體圖標時偶爾使用。下面通過各種案例，來一起看看content的妙用。案例1. 清除浮動 1<!
  • CSS 新版網格布局簡述
    網格布局CSS 網格是一個用於 web 的二維布局系統。利用網格，你可以把內容按照行與列的格式進行排版。另外，網格還能非常輕鬆地實現一些複雜的布局。網格是由一系列水平及垂直的線構成的以一種布局模式。根據網格，我們能夠將設計元素進行排列，幫助我們設計一系列具有固定位置以及寬度的元素的頁面，使我們的網站頁面更加統一。一個網格通常具有許多的列（column）與行（row），以及行與行、列與列之間的間隙，這個間隙一般被稱為溝槽（gutter）。
  • div和css
    比如字的屬性可以寫成函數形式，字（五號，宋體，黃色，。。。）等等，屬性是有窮的，也就是屬性的參數是有窮的。屬性的參數組成大部分都是由格式組成的。設置格式就是設置參數，格式是參數的一部分。格式是對象的一種參數設置。樣式與格式的區別，樣式是格式的組合體。比如word裡面，有一種默認的樣式。
  • 【原創】 實戰div css網頁布局
    圍繞怎麼做一個簡易的網頁，回顧其步驟： 1、新建站點 2、打開index.html，按照網頁的六個組成部分，依次創建logo層、導航層、banner層、內容層、友情連結層、版權層 3、 5、通過css控制面板，對每個層進行定義，如它們的寬、高，邊框、背景、填充、邊界等。定義的時候，必須定義左浮動。 在我們通過css來定義div的時候，這個地方一定要對應。
  • 裴琳 · 微成長--web性能優化與前端工程
    ....任性的分割線web性能優化與前端工程 每個參與過開發企業級web應用的前端工程師或許都曾思考過前端性能優化方面的問題。因此在前端工程界，總會看到周期性性能優化工作，辛勤的前端工程師每到月圓之夜就會傾巢出動根據優化原則做一次性能優化。|性能優化是一個工程問題本文將從一個全新的視角來思考web性能優化與前端工程之間的關係，揭示前端性能優化在前端架構及開發工具設計層面的實現思路。
  • 秒懂Vuejs、Angular、React原理和前端發展歷史
    </div><div id="age">3</div>JavaScript: dom1 = document.getElementById('name');var dom2 = document.getElementById('age');dom1.innerHTML = '小北';dom2.innerHTML =
  • HTML DIV+CSS 命名規範大全
    二、相對網頁外層重要部分CSS樣式命名外套 wrap ---用於最外層頭部 header 用於頭部主要內容 main --用於主體內容（中部）左側 main-left ---左側布局右側 main-right -右側布局導航條 nav --網頁菜單導航條內容 content
  • 前端requestAnimationFrame概述
    然而，在討論web時，幀的定義又發生了變化。對於web動畫，我們可以在設備屏幕中移動1px或者更多。移動一個元素（DOM元素）的像素越少，那麼動畫就越流暢，越平滑。幀其實就是DOM元素在屏幕上的實時位置的一個快照。在1s內，如果一個元素以 1px/次 的速度移動60px，那麼FPS值就是60。也就是說，上面等價於以 2px/次 的速度移動120px。
  • 為什麼2017年Web前端開發工程師薪資越來越高?
    >1、把Photoshop文件、圖片或者線框做成一個頁面；2、偶爾設計Photoshop文件、圖片或者線框；3、用JS實現動畫、過渡效果；4、用HTML和CSS編程，實現網頁的內容和形式。由於前端工程師的入門門檻非常低，JS、CSS、HTML並不是很難入門掌握的語言，似乎只要花一點時間，誰都可以通過網上教程和書本學會它。對的，前端工程師市場就是被這些淺嘗輒止的傢伙搞壞的。
  • css動畫創建及使用
    animation-delay：規定動畫頁面加載後多少秒s或毫秒ms開始。默認是 0。animation-iteration-count：規定動畫被播放的次數。默認是 1。值支持：n：n為需要播放的次數；infinite：無限次。
  • 2 行 JS 代碼實現頁面橫向滾動特效
    在前端這個無奇不有的世界裡，有些網站不是正常垂直滾動的，而是橫向滾動的
  • 【前端-CSS動畫】製作聖誕節彩燈
    "> <link rel="stylesheet" href="https://fonts.googleapis.com/css?); box-shadow: 0px 2px 20px 4px rgba(255,65,185,1); } 0% ,100%{ background:rgba(255,230,65,.5); box-shadow: 0px 2px 20px 4px rgba(255,65,185,.5); }}三、詳解