Div+CSS 基礎入門教程

2022-01-02 電腦學習

div+css是HTML語言中非常好的構架模式，DIV完全可以代替table，div和css結合可以實現table所不能實現的功能。


下面我們就看看用div+css建站的好處:


　　1、搜尋引擎親和力


　　搜尋引擎不會在意一個頁面的設計或者構成。搜尋引擎不可能「欣賞」設計漂亮新穎的頁面;也不會去「排斥」顏色搭配醜陋的頁面。它們只是默默地拿到它們需要的內容就離開。如果一個頁面中涵蓋了大量的table來描述構架，試想搜尋引擎要花多大的代價才可以拿到真正有用的信息呢? 憑我自己的經驗，一般來說，table構架描述的頁面，樣式結構和內容信息大小比可能達到1：1甚至更高。而CSS+DIV構架的頁面，雖然在客戶端看來下載一個複雜的CSS也要佔用差不多的帶寬，然而搜尋引擎可以很方便的繞過這個css，而直接抓去div中的內容。這便是div的優勢所在。帶寬的稍多佔用，完全顯得微不足道，更何況一個冗餘的table設計架構如果代碼寫的不好會佔用更多的帶寬。

　　2、重構頁面的方便性


　　這個應用最經典的例子就是各大blog程序了。就如現在我用的LBS系統，以及流行的PJBLOG、php下面的WP、MT，都是採用div+css構架。內容和樣式的分離導致我們在重構頁面布局(更換皮膚)的時候，只用針對每一個div元素重新定義其具體位置、樣式就行了。而在原來的table基礎上進行改版,幾乎必須改變所有的內容注入渠道,實在是太過於麻煩.

閱讀完上面的內容，我們就開始學習div+css教材吧！


目錄


第 一 章 頁面布局與規劃

第 二 章 寫入整體層結構與CSS

第 三 章 頁面頂部製作之一

第 四 章 頁面頂部製作之二

第 五 章 頁面製作-用好border和clear

相關焦點

  • 教程 | Web前端教程2:CSS+DIV頁面布局
    （2）使用 <div> 元素的 HTML 布局注釋：<div> 元素常用作布局工具，因為能夠輕鬆地通過 CSS 對其進行定位。參考3school有關div內容學習div+css界面布局得知識。
  • div和css
    比如字的屬性可以寫成函數形式，字（五號，宋體，黃色，。。。）等等，屬性是有窮的，也就是屬性的參數是有窮的。屬性的參數組成大部分都是由格式組成的。設置格式就是設置參數，格式是參數的一部分。格式是對象的一種參數設置。樣式與格式的區別，樣式是格式的組合體。比如word裡面，有一種默認的樣式。
  • 【原創】 實戰div css網頁布局
    5、通過css控制面板，對每個層進行定義，如它們的寬、高，邊框、背景、填充、邊界等。定義的時候，必須定義左浮動。 在我們通過css來定義div的時候，這個地方一定要對應。 比如要定義這個<div id="logo"></div>我們點擊右上角css樣式屬性裡的「+」圖標（如下圖）
  • css動畫創建及使用
    兼容性：在菜鳥教程中有說明： class="shape"></div>下面是菜鳥教程CSS3動畫頁面的CSS3動畫：<style type="text/css">#animated_div {
  • CSS中content屬性的妙用
    --html-->11<div class="container clear">12    <div class="left">左</div>13    <div class="right">右</div>14</div>父元素.container中兩個子元素.left
  • 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+js 放一場浪漫煙花秀(含音樂/定製相片)程式設計師表白必備煙花
    歌曲MP3更換教程 ↓mp3免費下載地址: 九酷音樂 點擊打開1.搜索需要的歌曲> </div> <div class="shape"> 我愛你直到永遠 </div></div><!
  • web前端必學,10分鐘學會css的三大特性
    下面代碼，出現一個div 標籤指定了相同樣式不同值的情況，這就是樣式衝突。div{ color:red; } div{ color:blue; }通常出現樣式衝突，會按CSS書寫的順序，以最後的樣式為準
  • css動畫之@keyframes
  • DIV+CSS命名規範大全
    news_release最新產品.publisher生產商.screenshot縮略圖.faqs常見問題.keyword關鍵詞.blog博客.forum論壇master.css,style.css主要的module.css模塊base.css基本共用layout.css布局，版面themes.css主題columns.css專欄font.css文字、字體forms.css
  • 【教程】html+css零基礎入門教程(九)
    p{ word-spacing:25px; }頁面上顯示為flash flash相關文章【教程】html+css零基礎入門教程（一）【教程】html+css零基礎入門教程（二）【教程】html+css零基礎入門教程（三）【教程】html+css零基礎入門教程（四）
  • vue+swiper+animate.css製作全屏滾動H5
    npm install swiper@3 npm install animate.css 2.在main.js中引入animate.cssimport Vue from "vue"import App from ".
  • 【前端-CSS動畫】製作聖誕節彩燈
    "> <link rel="stylesheet" href="https://fonts.googleapis.com/css?3類似例子示例01：https://gitee.com/turingitclub/css-learning/blob/dev/base/animation.html示例02：https://gitee.com/turingitclub/css-learning/blob/dev/base/animation_2.html示例03  running
  • HTML DIV+CSS 命名規範大全
    頂部廣告條)電子貿易相關.products產品.products_prices產品價格.products_description產品描述.products_review產品評論.editor_review編輯評論.news_release最新產品.publisher生產商.screenshot縮略圖.faqs常見問題.keyword關鍵詞.blog博客.forum論壇CSS文件命名說明master.css
  • 一批腦洞大開的CSS特效
    其實很早就想寫一篇關於 css 的文章了。（拖延症，一直沒寫。。。）css 發展到今天已經越來越強大了。其語法的日新月異，讓很多以前完成不了的事情，現在可以非常輕鬆的做到。"> <div class="j"></div> <div class="j"></div></div>css(scss)body { background: #000; overflow: hidden;
  • CSS動畫:animation、transition、transform、translate傻傻分不清
    容易混淆的幾個css屬性css屬性很多，並且有些無論是字母的拼寫還是字面上的意思，都容易混淆，比如我列出來的幾個屬性，是不是也混淆過你～屬性含義animation（動畫）用於設置動畫屬性，他是一個簡寫的屬性，包含6個屬性transition（過渡）用於設置元素的樣式過度，和animation有著類似的效果，但細節上有很大的不同transform
  • 你不知道的 CSS
    用 ~ / + 兄弟選擇器來美化表單元素css(3)中選擇器眾多，具體可參考CSS 選擇器參考手冊。不知什麼原因，在很多項目中，實現諸如單選，複選等（類似）功能（包括如圖標籤選擇器）時，為了美化其樣式，往往使用JS去實現，實際上，利用 label標籤和css的兄弟選擇器完全可以實現類似效果。其兼容性也並不差，至少兼容 IE8及其以上瀏覽器了。
  • 49期:利用clip-path製作css動畫
    其代碼是下面這樣：<div class="wrap left-to-right">    <div class="shard-wrap">        <div class="shard"></div>    </div>    <div class="shard-wrap
  • 素描基礎入門教程
    素描基礎入門教程！都說繪畫裡素描是基本功，可見素描的重要性，但是要怎麼練習呢？或者自己在練習的時候要想些什麼才會有收穫呢？這裡和大家分享微課菌練習素描的方法和思路，希望對大家有所幫助！「輕微課」的網站上非常多的繪畫教程、繪畫素材，也有專業的繪畫課程，學繪畫的小夥伴可以去上面找到很多有用的繪畫學習資源哦！