妙味課堂——HTML+CSS基礎筆記

時間  2019-11-19
標籤 課堂 html+css html css 基礎 筆記 欄目 CSS 简体版
原文   原文鏈接

妙味課堂的課程講得很是的清楚，受益不淺。先把HTML和CSS基礎課程部分視頻的學習筆記記錄以下：javascript

PS基礎

前端須要的PS技能

  • PS技能（前端須要）：切圖、修圖、測量
  • PS工具：
    • 移動工具
    • 矩形選框工具
    • 裁切工具
    • 吸管工具
    • 橫排文字工具
    • 手抓（快捷鍵：空格）
    • 縮放（快捷鍵：Ctrl + 和 Ctrl -）
    • 標尺（快捷鍵：Ctrl R，主要是拖出參考線。矩形區域選擇的時候，按住Ctrl，就能貼合參考線）
    • 自由變換（快捷鍵 Ctrl T）
    • 蓋印可見圖層（Ctrl Alt Shift E）
    • 儲存爲web格式（Ctrl Alt Shift S）

圖片格式

  • PSD（源文件）
  • JPG、GIF、PNG（導出圖）
    • JPG：不支持透明半透明，全部空白區域填充白色（網頁中的大圖、高清圖：體積大）
    • GIF：支持透明，不支持半透明（網頁中的小圖標、動態圖片）
    • png8：支持透明，不支持半透明（網頁中的小圖標）
    • png24：支持透明，也支持半透明（圖像中存在半透明效果的圖片）

PSD測量注意事項

  • 文字右方和下方會有1像素的默認間隙

代碼初識

  • html 超文本標記語言（結構）
  • CSS 層疊樣式表（樣式）
  • js javascript（行爲）

文件編碼格式與代碼編碼格式一致的時候，網頁纔不會出現亂碼，才能夠顯示正常。php

  • GB2312 中文簡體標準
  • utf-8 國際標準

樣式的位置：css

  • 行間樣式
  • 內部樣式
  • 外部樣式表

background

bac kground: { url(bg.jpg) center top no-repeat gray fixed; }

 

等價於：html

#bg { background-image: url(bg.jpg); background-position: center top; background-repeat: no-repeat; background-color: gray; background-attachment: fixed;
}

 

border

  • border-top/right/bottom/left
  • solid dash dotted(IE6不支持)

padding

  • padding-top/right/bottom/left
  • 內邊距至關於給一個盒子加了填充厚度，會影響盒子大小

margin

  • margin-top/right/bottom/left
  • 上下外邊距會疊壓
  • 父子級包含的時候，子級的margin top會傳遞給父級；（內邊距替代外邊距）
  • 若是給一個盒子僅設置margin-left: auto，那麼盒子會跑到最右邊；若是設置margin-right: auto，那麼盒子就會跑到最左邊。同時設置margin-left和margin-right爲auto，可使盒子居中。

盒模型和結構樣式

  • 盒子大小 = border + padding + width/height
  • 盒子寬度 = 左border + 左padding + width + 右padding + 右border
  • 盒子高度 = 上border + 上padding + height + 下padding + 下border

常見樣式——結構前端

  • width 寬度
  • height 寬度
  • background 背景
  • border 邊框
  • padding 內邊距
  • margin 外邊距

複合屬性：一個屬性多個屬性值的命令java

常見文本設置

  • font: font-style font-weight font-size/line-height font-family;
  • font-size（通常爲偶數，中文最小號12px）
  • font-family（中文默認宋體、西文默認是arial，可用逗號分隔多種字體）
  • color（英文、rgb、十六位進制色彩值）
  • line-height（文字是在行高的上下居中）
  • text-align
  • text-indent（首行縮進，用em縮進字符）
  • font-weight
  • font-style
  • text-decoration：underline、overline、line-through
  • letter-spacing
  • word-spacing（以空格爲解析單位）

img

  • 注意寫img的alt屬性
  • 把img放到一個塊裏面，默認img與該塊的下邊框有幾個像素的間距。爲了解決這個問題，能夠爲img添加樣式display: block;可是這種解決方法有侷限性。另一種方法是給圖片添加vertical-align: top;也能夠。

a標籤

  • target=」_self」/」_blank」
  • 在head中添加以下代碼，可讓頁面中全部的連接都在新頁面中打開，其中base表明默認
<base target="_blank"/>

 

  • a標籤的做用
    • 連接（a標籤中放連接）
    • 下載（href的路徑是文件路徑）
    • 錨點（a的href中放的是id）

常見標籤和SEO淺析

  • 標題h標籤
  • 段落p標籤
  • 強調strong標籤（粗體）
  • 強調em標籤（斜體）
  • span標籤
  • 有序列表ol標籤
  • 無序列表ul標籤
  • 列表項li
  • 定義列表dl
  • 定義列表標題dt
  • 定義列表項dd

淺析SEO（搜索引擎優化）git

部分方法： 1. 頁面標籤語義化 2. 使用對SEO有利的標籤：h1/h2/h3/strong/em… 3. 提升頁面關鍵詞密度 4. 其餘github

SEM：搜索引擎營銷；（包含SEO）web

基礎選擇符

  • id選擇符 #
  • class選擇符 .
  • 類型選擇符 p div a img等
  • 羣組選擇符 用逗號,分隔
  • 包含選擇符 用空格分隔
  • 通配符 *

選擇符優先級

  • 同級樣式默認後者覆蓋前者
  • 樣式優先級（級別問題，官大一級壓死人；只看樣式權重，與樣式名稱在html中的前後無關，只跟樣式style中的前後順序有關）
    • 類型選擇符（1）
    • class選擇符（10）
    • id選擇符（100）
    • style行間樣式（1000）
    • js動態修改行間樣式

a僞類詳解

  • link 未訪問（默認）
  • hover 鼠標懸停（鼠標劃過）
  • active 連接激活（鼠標按下）
  • visited 訪問事後（點擊事後）
  • 注意上面四者的書寫順序 a:link → a:visited → a:hover → a:active，這樣在連接點擊以後，a:hover和a:active的樣式纔不會被a:visited的樣式覆蓋，仍然起效。

a僞類的應用：chrome

  1. 四個僞類全用（搜索引擎、新聞門戶、小說網站）
  2. 通常網站只用 a {} 和 a:hover {}

a僞類的兼容

  • IE6不支持a之外其餘任何標籤的僞類
  • IE6以上的瀏覽器支持標籤的hover僞類

標籤默認值樣式重置

/* 默認樣式重置（css reset） */ body, p, h1, h2, h3, h4, h5, h6, dl, dd { margin: 0; font-size: 12px; /* font-family */ } ol, ul { list-style: none; padding: 0; margin: 0; } a { text-decoration: none; } img { border: none; } ……

 

標籤基本特性和轉換

  • 內聯、內嵌、行內屬性標籤 a、span、strong、em
    • 默認同行能夠繼續跟同類型標籤
    • 內容撐開寬度
    • 不支持寬高
    • 不支持上下的margin和padding
    • 代碼換行被解析（若是內聯元素在代碼中換行了，那麼在頁面中，就會體現爲內聯元素之間的空隙）
  • 塊標籤 p、div、h1~h六、ol、ul、dldisplay: block; 顯示爲塊
    • 默認獨佔一行顯示
    • 沒有寬度時，默認撐滿一排
    • 支持全部css命令
  • display: inline; 顯示爲內嵌

inline-block的特性和應用

特性：

  • 塊在一行顯示
  • 行內屬性標籤支持寬高
  • 沒有寬度的時候，內容撐開寬度

問題：

  • 代碼換行被解析（代碼中inline-block換行寫，在頁面中inline-block元素之間會有空隙）
  • IE6/7不支持塊屬性標籤的inline-block

關於代碼換行解析（頁面中內聯元素和inline-block元素之間的空隙）：

空隙爲一個空格的大小，也就是頁面上默認字號的一半。好比頁面上默認字號爲12px，那麼它們之間的空隙就是6px。

inline-block的應用：分頁導航

  • 分析結構（div包一排a）
  • a標籤支持寬高並在一排顯示，所以要設置inline-block
  • 有hover效果
  • 當前頁的頁碼上不能點
    • cursor指針樣式（規定要顯示的光標的類型）
    • cursor: pointer text move …
    • cursor: url(hand.cur), pointer; 若是前面圖片沒引入進來，就用後面的pointer

前端規範

  1. 全部標籤的書寫均爲英文半角狀態下的小寫
  2. id, class必須以字母開頭
  3. 全部標籤必須閉合
  4. html標籤用tab鍵縮進
  5. 屬性值必須帶引號
  6. <!– html註釋 –> 注意註釋內容與橫線之間要有空格
  7. /* css註釋 */ 注意星號與文字之間要有空格
  8. ul, li/ ol, li/ dl, dt, dd擁有父子級關係的標籤
  9. p, dt, h標籤，裏面不能嵌套塊屬性標籤
  10. a標籤不能嵌套a
  11. 儘可能不要用內聯元素去嵌套塊（例如：p標籤中添加了h或者div塊標籤，一個p標籤會被隔成兩個。注意，這裏指的是塊標籤。若是p裏面放了span，而後把span的樣式設置了display: block;，p標籤不會被隔成兩個。）

浮動的原理 left/right/none 以及清除浮動的各類方法

浮動的定義

元素加了浮動，會脫離文檔流，按照指定的一個方向移動，直到碰到父級的邊界或者另一個浮動元素中止。

  1. 使塊元素在一行顯示
  2. 使內嵌元素支持寬高
  3. 在不設置寬度的時候寬度由內容撐開
  4. 脫離文檔流（文檔流是文檔中可顯示對象在排列時所佔用的位置）
  5. 提高層級半層（只夠擠進元素自己，元素裏面的內容，如文字，圖片等，仍是會被擠出來）

clear left/right/both/none

clear控制元素的某個方向上不能有浮動元素

清除浮動（撐開父級元素）

  • 方法1、 給父級元素加高（問題：擴展性很差）

  • 方法2、 給父級也加浮動（問題：頁面中全部元素都加浮動，margin左右自動失效。Float’s Bad!）

  • 方法3、 用父級添加display: inline-block來清除浮動（問題：margin左右自動失效）

  • 方法4、 在浮動元素下邊加上<div class=」clear」></div>空標籤清浮動（問題：IE6最小高度19px；解決後IE6下還有2px誤差）

.clear { height: 0px; clear: both; font-size: 0;
}
 

IE6下的最小高度問題：

在IE6下高度小於19px的元素，高度會被看成19px處理

解決辦法一：給該元素加font-size: 0; 這樣只能處理到最小2px，再小也沒辦法了。

解決方法二：爲該元素添加overflow: hidden;樣式 ——這也是處理IE6下最小高度的最經常使用方法。

  • 方法5、在浮動元素下面加<br clear=」all」 /> （問題：不符合W3C標準，樣式混入了html）
  • 方法6、給浮動元素的父級元素加上clear類，而後給該元素的after僞類設置以下樣式（問題：IE六、7不支持after僞類，爲了兼容IE六、7，還要給父級元素加上樣式zoom:1）
.clear:after { content: ""; display: block; clear: both;
}

 

注意：在IE六、7下，浮動元素的父級有寬度的話，就不用清除浮動。

在IE中，子元素的寬高要麼是跟着父級走的，要麼是跟着內容走的。這個能夠用haslayout來調節。可是haslayout不會自動控制。haslayout的默認值爲false。可是用了特定樣式的時候，haslayout會變成true。具體能夠看這裏百度百科的詞條。

當haslayout觸發的時候，會根據元素內容大小或者父級的大小來從新計算元素的寬高。因此在IE六、7下，若是給浮動元素的父級加了寬高的話，那麼觸發了haslayout。該父級元素就根據其內容，及子元素來從新計算寬高，也就清除了浮動。若是父級元素沒有加寬高的話，經過加zoom: 1;來觸發haslayout，就能夠解決問題了。也就是說，爲了兼容IE六、7，除了給父級元素加上clear類，而後該給父級元素的after僞類添加上述樣式以外，還要給該父級元素加上zoom: 1;的樣式。也就是以下代碼：

最終推薦使用的清楚浮動的方法

.clear { /*用來處理IE六、7*/ zoom: 1;
} .clear:after { /*用來處理其餘瀏覽器*/ content: ""; display: block; /*或display: table;也能夠*/ clear: both;
}

 

zoom的做用就是放大或縮小。zoom在不一樣瀏覽器中不兼容。

overflow的做用：

overflow並非各瀏覽器兼容的。效果不一樣。overflow針對溢出的。

overflow的各個設置：

  • auto 溢出顯示滾動條
  • scroll 默認就顯示滾動條
  • hidden 溢出隱藏
  • visible 默認值

要執行overflow樣式，首先要檢測父級元素中的內容是否超出其寬高。若是子元素是浮動元素，父級元素又設置了固定寬高的話，若是子元素大於固定寬高的父級元素，而且父級元素設置了overflow: auto;會看到有滾動條出現。那說明，overflow不只能夠檢測到浮動元素是否溢出，並且也可讓父級元素包住浮動的子元素。那麼，即便父級元素沒有設置寬高，給父級元素設置了overflow的樣式，也能夠清除浮動。

  • 方法七：給浮動元素父級加overflow: hidden;或overflow: auto;來清除浮動，而且必定要配合zoom: 1使用。（問題：IE6下，overflow沒有包住浮動子元素的功能，爲了兼容，仍是要加zoom: 1來解決一下）。
  • 方法八：給浮動元素的父級元素添加position: absolute或者position: fixed，均可以清除浮動。

浮動的問題

  • 推薦在IE六、7下，元素浮動要並在同一行的元素都要加浮動(例如，第一個box浮動，第二個div裏面的文字會排到第一個box的同行後面，可是在IE6下，第二個元素中的文字與第一個float的box有3px的間距。可是在正常狀況下，二者之間是不該該有間距的。)

兼容性問題

  • IE6雙邊距bug（IE6下塊屬性標籤浮動，而且有橫向margin，橫向margin加倍。）
    • IE6
    • 浮動
    • 橫向margin
    • 塊屬性標籤（解決方法：加display: inline;)
  • IE6下li部分兼容性問題：
    • 左右兩列布局，右邊右浮動IE六、7下折行；（解決方法：不只右側元素向右浮動；左邊元素也要添加向左浮動）
    • IE六、7 li中的元素都浮動。在IE六、7下li元素下方會產生4px間隙問題；（在IE六、7下li自己沒有浮動，可是其中的內容浮動了，li下就會多出來幾個px的間隙）（解決方法1： 給li也加浮動。注意給ul清除浮動。解決方法2：不給li加浮動，可是給li加vertical-align: top/middle;均可以）

vertical-align的做用

  • 做用一：vertical-align是垂直對齊樣式。要給每一個要對齊的元素都加上這個屬性。vertical-align對於浮動的元素是失效的，浮動元素是默認頂部對齊的。
  • 做用二：用於清理圖片下方的空隙。（將img放在塊中，img下方會有幾個像素的空隙。能夠爲img設置display: block;來清理，可是這種方法有侷限性，所以推薦給img添加vertical-align: top;樣式來清理。）

定位

相對定位

添加了position: relative;的元素就變成了定位元素，具備如下特性：

  • 不影響元素自己的特性
  • 不使元素脫離文檔流
  • 若是沒有定位偏移量，對元素自己沒有任何影響

定位元素位置控制

  • top/right/bottom/left 定位元素偏移量

絕對定位

  • 使元素徹底脫離文檔流
  • 使內嵌支持寬高
  • 塊屬性標籤內容撐開寬度
  • 若是有定位父級相對於定位父級（而不是結構父級）發生偏移，沒有定位父級相對於整個文檔（不是body）發生偏移（body、html和文檔之間的關係是body之上有html，html之上有文檔）
  • 相對定位通常都是配合絕對定位元素使用

z-index: [number]; 定位層級

  • 定位元素默認後者層級高於前者（不管是相對定位仍是絕對定位）

濾鏡和遮罩彈窗

<div class="mask"></div> //遮罩 <div class="alert"></div> //彈窗 body, html { //這裏是爲了兼容IE6。若是不給body和html加height: 100%的話，IE6下的蒙板只在最上面顯示一條） height: 100%;
} .mask { //遮罩的樣式 position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.5; filter:alpha(opacity=50);
} .alert { //彈窗的樣式 width: 400px; height: 200px; background: #fff; border: 2px solid black; position: absolute; top: 50%; left: 50%; margin-top: -102px; //注意盒子的高度是200像素加上邊框寬度×2，也就是204px margin-left: -202px; //注意盒子的高度是404，而不是400.因此通常就是202px。此處必定要注意。 }

 

固定定位

position: fixed 固定定位：與絕對定位的特性基本一致，差異是始終相對整個文檔進行定位；

問題：IE6不支持固定定位

濾鏡

  • 標準瀏覽器下：不透明度：opacity: 0~1; 0是徹底透明；1是徹底不透明。
  • IE私有濾鏡：filter:alpha(opacity=0~100); 0是徹底透明，100是徹底不透明。(IE Tester是不支持IE的filter濾鏡的)

定位其餘

position: relative absolute fixed static inherit;
  • position: static; //默認值
  • position: inherit; //從父元素繼承定位屬性的值

定位的一些問題

相對定位的一些問題

在IE6下，父級的overflow: hidden; 是包不住子集的相對定位的。例如：

#box1 {width: 500px; height: 300px; background: blue; overflow: hidden;} #box2 {width: 300px; height: 500px; background: yellow; position: relative;}

這兩個盒子，子元素box2比父元素box1要長，雖然父級添加了overflow: hidden; 可是一旦子元素添加了position: relative; 在IE6下，子元素仍是會撐破父元素。

解決方法，在父級也加一個相對或絕對定位position: relative/absolute; 就能夠包住子元素了。

絕對定位的一些問題

  • IE6下，定位元素的父級的寬高是奇數的話，那麼該定位元素的right和bottom都有1像素的誤差。例如：
#box1 {width: 300px; height: 300px; border: 1px solid black; position: relative;} #box2 {width: 50px; height: 50px; backgruond: #7c1; position: absolute; right: -1px; bottom: -1px;}

其中box2是box1的子元素。請仔細觀察。當box1的寬高爲300px的時候，box2會遮掉box1右下角的邊框，這是正常的。可是當box1的寬高是30一、303等奇數時，在IE6下，box2沒有遮掉box1右下角的邊框，這正是由於出現了1px的誤差。這個問題，沒有好辦法規避。

  • position: absolute; 絕對定位的元素子級的浮動能夠不用寫清浮動方法

固定定位的一些問題

position: fixed; 固定定位元素子級的浮動能夠不用寫清浮動方法；（IE6不兼容）

表格標籤特性與默認樣式重置

一個完整的表格結構：

  • table
    • thead
      • tr
        • th …
    • tbody
      • tr
        • td …
      • tr
        • td …
    • tfoot
      • tr
        • td …

table的默認樣式重置

th, td { padding: 0; } table {border-collapse: collapse; }
/* table css reset */

 

注意事項：

  1. 不要給table, th, td之外的表格標籤加樣式
  2. 單元格默認平分table的寬度
  3. th裏面的內容默認加粗，而且左右上下居中顯示
  4. td裏面的內容默認上下居中，左右居左顯示
  5. table的寬度決定整個表格的寬度
  6. table裏面的單元格寬度會被轉換成百分比
  7. 建議表格裏面的每一列都必須有寬度（防止單元格內容變動，使整個表格佈局改變）
  8. 表格中同一豎列繼承最大寬度
  9. 表格中同行繼承最大高度

table的標籤基本特性就是display: table，既不是塊也不是內嵌。

單元格合併

  • colspan：屬性規定單元格可橫跨的列數
  • rowspan：屬性規定單元格可豎跨的行數

表單元素和樣式重置

表單元素大可能是inline-block

  • form 表單
  • <input type=」…」 name=」」 value=」」 />
    • text 文本框
    • password 密碼
    • radio 單選（爲多個選項添加同一個name，實現單選）
    • checkbox 複選（checked：默認選中；disabled：禁用）
    • submit 提交
    • reset 重置
    • button 按鈕
    • image 圖片（基本不太用）
    • file 上傳（不一樣瀏覽器無法兼容）
    • hidden 隱藏
    • select標籤配合option使用 下拉選框（默認顯示第一項，也能夠用selected指定默認選項）
    • textarea 文本域

label的用法（用for進行關聯）：

<input type="radio" name="gender" id="a" /><label for="a">男</label>
<input type="radio" name="gender" id="b" /><label for="b">女</label>

 

默認樣式重置

form {margin: 0;} //IE下form是有外邊距的 input {margin: 0; padding:0;} select {margin: 0;} textarea {margin: 0; padding: 0; resize: none; overflow: auto;}

 

select元素支持寬度、高度支持並不完善。單選框、複選框對寬高的支持不完善

能夠用outline: none去掉表單元素的焦點線。

表單元素的問題

表單元素兼容性問題

IE6下input背景滾動：

文本框：當內容比框寬的時候，該文本框背景會被擠跑。解決方法：將該文本框用一個div包起來。在這個div上設置背景圖片。而後把該文本框的寬高設置爲與div相同；把文本框的邊框去掉，文本框的背景設置爲無。

<div class="box"> <input type="text name="" class="text" /> </div> /* input {margin: 0; padding: 0;} .text {width: 300px; height: 40px; border: 1px solid blue; background: url(sun.jpg) 0 center no-repeat #ffc;} */ //以上這種僅針對input的樣式設置，在IE6下，當輸入的內容寬於文本框時，背景會跑掉。 .box {width: 300px; margin-top: 50px; height: 40px; border: 1px solid blue; background: url(sun.jpg) 0 center no-repeat #ffc;} .box input {width: 300px; height: 40px; border: none;} //以上這種設置方式，實際上是把樣式加到div上，而後讓文本框變成透明，而且與外面的div一樣大小，從而變成一樣的視覺效果。

 

outline輪廓線：

a標籤輪廓線去除方法：

  1. <a href=」#」 onfocus=」this.blur();」>…</a>
  2. <a href=」#」 hidefocus>…</a>

HTML和CSS進階

滑動門技術

滑動門的概念

滑動門並非一項全新的技術。它是利用背景圖像的可層疊性，並容許他們在彼此之上進行滑動，以創造一些特殊的效果。

左上和又上是圓角的按鈕實現方式（按鈕寬度能夠隨意變更）：

<div class="btn">
    <div class="btnL">
        <div class="btnR">妙味課堂</div>
    </div>
</div>
.btn {width: 100px; background: url(img/btn.png) repeat-x;) //btn.png爲中間的一像素平鋪 .btnL {background: url(img/btnL.png) no-repeat;} //btnL.png是帶左角的那一部分 .btnR {height: 31px; background: url(img/btnR.png) no-repeat right 0;} //btnR.png是帶右角的那一部分

 

以上方法比較麻煩；優化方法爲（按鈕寬度能夠變更，可是不能寬於btn2.png的寬度）：

<div class="btn">
    <div class="btnR"></div>
</div>
.btn {width: 100px; background: url(img/btn2.png) no-repeat;} //btn2.png是左角部分外加中間部分 .btnR {height: 31px; background: url(img/btnR.png) no-repeat right 0;} //btnR.png是右角的那一部分

 

可是第二種方法沒有第一種方法的擴展性好。第二種方法受到btn2.png這張圖片寬度的限制。所以，對於擴展要求高、圖片比較大的，儘可能使用三層嵌套的方法。對擴展要求不高、圖片比較小的，用兩層嵌套。

元素的寬度由內容撐開：

  • display: inline;
  • display: inline-block;
  • float
  • position: absolute;
  • position: fixed

寬高可擴展的圓角的實現方式

簡單的方法：使用CSS3裏面的border-radius

利用滑動門的三層嵌套方法：

<div class="box> <div class="boxHead">
        <div class="boxHeadL">
            <div class="boxHeadR"></div>
        </div>
    </div>
    <div class="boxC"> 圓角框中的內容 </div>
    <div class="boxFoot">
        <div class="boxFootL">
            <div class="boxFootR"></div>
        </div>
    </div>
</div>
.box {width: 200px; margin: 30px auto;} .boxHead {background: url(boxH.png) repeat-x; height: 9px; overflow: hidden;} .boxHeadL {background: url(boxHL.png) no-repeat;} .boxHeadR {background: url(boxHR.png) no-repeat; right 0; height: 9px;} .boxFoot {background: url(boxF.png) repeat-x; height: 9px; overflow: hidden;} .boxFootL {background: url(boxFL.png) no-repeat;} .boxFootR {background: url(boxFR.png) no-repeat right 0; height: 9px;} .boxC {border-left: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5;}

 

背景透明的圓角框實現

首先在切圖的時候，圓角的部分，就要切背景透明

<div class="btn">
    <div class="btnL">
        <div class="btnR"></div>
    </div>
</div>
.btn {width: 100px; margin: 0 auto; background: url(btn.gif) repeat-x;} .btnL {background: url(btnL.gif) no-repeat; position: relative; left: -9px;} .btnR {background: url(btnR.gif) no-repeat right 0; height: 25px; position: relative; right: -18px;} //注意，由於btnL設置了left: -9px; 致使btnR也向左移了9px，要讓btnR比btn還要向右移除9px，就要設置一個相對右移的9*2=18像素才行

 

以上的寫法有些麻煩，更爲簡便的方法是：

<div class="btnL">
    <div class="btnR">
        <div class="btn"></div>
    </div>
</div>
<!-- 注意這種寫法與上面的那種方法，標籤嵌套的順序變了 -->
.btnL {width: 100px; margin: 0 auto; background: url(btnL.gif) no-repeat;} .btnR {background: url(btnR.gif) no-repeat right 0;} .btn {height: 25px; background: url(btn.gif) repeat-x; margin: 0 9px;} //這種方法是經過控制中間平鋪的btn的寬度，使兩邊的圓角透出來的。

 

CSS精靈

利用backgroudn-poition的設置，將小圖拼成一個大圖，從而減小HTTP請求。

CSS sprites的優缺點：

  • css精靈的有點
    • 利用css精靈能很好地減小網頁的http請求次數，從而大大提升頁面性能。
    • 減小圖片大小
  • CSs精靈的缺點
    • 下降開發效率
    • 維護難度加大

兼容性

常見問題：

1、IE6中，內容的寬高會撐開父元素設置的寬高。所以計算必定要精確，不要讓內容的寬高超出父元素設置的寬高。

2、IE6（7？）下元素浮動，若是寬度須要內容撐開就給裏邊的塊元素都加浮動。

3、在IE六、7下，元素要經過浮動並在一行，就給這行元素都加浮動。（若是第一個用浮動，第二個用margin-left，那麼在IE六、7下，這兩個元素之間會出現3像素的間隙，這也就是所說的3像素的bug）

4、注意標籤嵌套規範，例如不要在p標籤裏面嵌套塊標籤。

5、IE6下的最小高度問題。IE6下元素的高度小於19px時，會被看成19px處理。解決方法：font-size: 0; 或者overflow: hidden; 推薦後面的方法。

6、border的邊框是1px dotted的點線的時候，在IE6下不支持。解決辦法：切背景平鋪。

七：在IE6下，要解決margin傳遞，必定要觸發haslayout。解決辦法：添加zoom: 1;

八，在IE6下，父級有邊框的時候，子元素的margin值消失了。解決辦法：觸發父級的haslayout，也就是添加zoom: 1;

（儘可能在IE6下觸發元素的haslayout，也就是添加zoom: 1; 能夠避免掉不少兼容性問題。

九：IE六、7只支持a標籤的四個僞類，其餘的僞類不支持

十：在IE六、7下，inline-block是不支持塊標籤的。沒有解決辦法

十一：IE6下的雙邊距bug。在IE6下，塊元素有浮動和橫向的margin值，橫向的margin值會被放大成兩倍。當設置的是margin-right的時候，是一行右側第一個有雙邊距；當設置的是margin-left的時候，是一行左側第一個元素有雙邊距，若是左右margin都設置了，那麼一行的右側第一個和左側第一個都有雙邊距bug。解決辦法：轉成內嵌：display: inline;

十二：在IE六、7下，li自己沒浮動，可是li其中的內容有浮動，那麼li下面就會產生一個間隙。解決辦法：第一種解決辦法：給li添加浮動（有時爲了效果，還須要爲li設置寬度）；辦法二：給li添加垂直對齊方式：vertical-align: top;。注意：當IE六、7下最小高度問題和li間隙問題同時出現的時候，給li加浮動。由於若是用overflow: hidden解決最小高度，同時用vertical-align: top解決間隙問題，會發現li下面仍有間隙。所以碰到這種狀況，要用給li添加浮動的方法來解決。

十三：IE6下，當一行子元素佔有的寬度之和與父級的寬度相差超過3像素，或者有不滿行狀態的時候，最後一行子元素的下margin在IE6下失效。沒發現有解決辦法。

十四：IE6下的文字溢出bug。子元素的寬度和父級的寬度相差小於3像素時，而且兩個浮動元素中間有註釋或者內嵌元素，就會出現文字溢出bug。解決辦法：把中間的註釋和內嵌元素用div抱起來；或者把父級元素調大一些也能夠。

十五：在IE6下，當浮動元素和絕對定位元素是並列關係的時候，絕對定位元素會消失。解決辦法：給絕對元素外面包個div。

十六：在IE六、7下，子元素有相對定位的話，父級的overflow就包不住子元素了。解決辦法：給父級也添加相對定位。

十七：在IE6下，絕對定位元素的父級寬高是奇數的時候，元素的rigt值和bottom值會有1px的誤差。

十八：IE6不支持固定定位。要用JS解決

十九：opacity透明度只有標準瀏覽器支持，在IE六、七、8要經過濾鏡filter來解決。

二十：若是tbody和其中包含的tr都有背景的話，tbody的背景就會消失；若是thead和其中的tr都有背景的話，thead的背景也會消失。所以不要給這兩個同時加背景。

二十一：在IE六、7下，輸入類型的表單控件上下各有1px的間隙。解決方法：給input添加浮動。

二十二：在IE六、7下，輸入類型表單控件加border: none;無效。解決辦法：border: 0; 或者給input重置下背景。

二十三：在IE六、7下，輸入類型表單控件輸入文字的時候，背景圖片會跟着一起移動。解決辦法：方法一：給背景圖片添加fixed屬性，可是這種方法在IE7下，背景圖片有些錯位。方法二：把背景圖片加給父級，而後把input本身的背景設置爲background: none;

二十四：png問題。IE6不支持png透明背景的圖片。解決辦法：引入js文件DD_belatedPNG

條件註釋語句

下面這一段條件註釋代碼，IE6-9均可以解析出其中的內容，IE10以及其餘標準瀏覽器則做爲註釋處理，不會在頁面上顯示。

<!--[if IE]> 這是IE <![end if]-->

條件註釋語句還有如下幾種寫法：

<!--[if IE 9]> 這是IE9 <![end if]-->
<!--[if IE 8]> 這是IE8 <![end if]-->
<!--[if IE 7]> 這是IE7 <![end if]-->
<!--[if IE 6]> 這是IE7 <![end if]-->

 

css hack

針對不一樣的瀏覽器寫不一樣的css樣式的過程，就叫css hack！

遠離CSS hack，有益身心健康！

\9 IE10以前的IE瀏覽器解析

星號*和加號+是IE7以及以前的IE瀏覽器解析

_ 下劃線是IE6以及IE6以前的IE瀏覽器解析

針對chrome的css hack：@media screen and (-webkit-min-device-pixel-ratio: 0) {}

用css hack解決IE6的png問題（原生的CSS辦法，無法設置背景圖片大小，也無法平鋪）：

.box {width: 400px; height: 400px; background:url(img/png.png); _background: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/png.png", sizingMethod="crop");

 

樣式優先級、提高樣式優先級

  • 默認 < 類型 < class< id < style (行間) < js
  • !important提高樣式優先級權重

在IE6下，在important後面加一條一樣的樣式，會破壞掉important的提高優先級做用，會按照默認的優先級順序來走。

兩種特殊佈局

聖盃佈局（雙飛翼佈局）

左右寬度固定，中間寬度自適應伸縮，而且中間先加載

<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
body {margin: 0} .center {height: 600px; background: #f60; margin: 0 200px;} .left {width: 200px; background: #fc0; height: 600px; position: absolute; left: 0; top: 0} .right {width: 200px; background: #fcc; height: 600px;position: absolute; left: 0; top: 0}

 

等高佈局

<div class="wrap">
    <div class="left"></div>
    <div class="right"></div>
</div>
body {margin: 0} .wrap {width: 900px; margin: 0 auto; overflow: hidden;} .left {width: 200px; background: red; float: left; padding-bottom: 10000px; margin-bottom: -10000px;} .right {width: 700px; background: blue; float: right; padding-bottom: 10000px; margin-bottom: -10000px;}

 

IE6下使用margin負值的爲題

在IE6下使用margin負值，超出邊界的部分會被截掉。解決方法是爲這些元素添加相對定位便可。

其餘零散知識

熱區

<img src="bigptr.jpg" usemap = "#Map" />
<map name = "Map">
    <area shape = "circle" coords = "378, 132, 56" href = "http://www.baidu.com">
    <area shape = "rect" coords = 462, 157, 566, 217" href = "http://www.google.com">
    <area shape = "poly" coords = "227, 251, 186, 220, 168, 221 ..." href = "http://www.qq.com">
</map>

 

  • map 熱區
  • area 點擊區域
    • shape = 「circle」 圓形 rect
    • coords = 「圓心點x, 圓心點y, 原的半徑」
    • href 跳轉地址
    • shape = 「rect」 矩形
    • coords = 「矩形左上角x, 矩形左上角y, 矩形右下角x, 矩形右下角y」
    • shape = 「poly」 不規則多邊形
    • coords = 「第一個點x, 第一個點y, 第二個點x, 第二個點y,…… 「

data uri

把圖片src裏面的地址用data uri代替

  • 優勢：減小HTTP請求數
  • 缺點：沒法被重複利用；會使文件變大

在線工具: http://dancewithnet.com/lab/2009/data-uri-mhtml/create/1376100722.php

iframe

iframe外聯框架。如今已經不太用了。

<iframe src="http://www.baidu.com" width="1200" height="600" frameborder = "0" scrolling="no"></iframe>

flash引入

  • <embed src=」1.swf width=」400」 height=」400」></embed> embed標籤就好用object標籤包起來
<object>
    <embed src="1.swf" width="400" height="400"></embed>
</object>
  • flash透明 <param name=」wmode」 value=」transparent」> wmode=」transparent」:
<object>
    <param name="wmode" value="transparent">
    <embed src="1.swf" width="400" height="400" wmode="transparent"></embed>
</object>

引入視頻

在HTML5中：

<video></video>

 

若是要兼容IE的話，要用flash來作。經常使用的兩種方法：

  1. 用Dreamweaver自帶的視頻播放器（只支持flv格式）
  2. 藉助其餘視頻網站（優酷等），經過複製網站聲稱的代碼，實現嵌入視頻。

詞內斷行和省略號

  • text-overflow (clip ellipsis)
  • white-space: nowrap
  • word-break: break-all和word-wrap: break-word;

文字溢出顯示省略號，有三個樣式設置缺一不可：一，給元素添加寬度width。2、設置overflow: hidden。3、white-space: nowrap。三個條件齊備以後，設置text-overflow: ellipsis纔會其效果。給元素添加寬度是爲了兼容IE6.在標準瀏覽器下，不給元素添加寬度，也能夠。

盒模型的怪異模式

  • box-sizing 盒模型解析模式
    • content-box 標準盒模型 width/height = border + padding + content
    • border-box 怪異盒模型 width/height = content

可視寬高

  • 可視寬： 元素的內蓉寬+padding+border
  • 元素的內容寬：元素裏能夠放內容的寬度

怪異模式/怪異盒模型解析

文檔聲明沒有寫或者寫錯，在IE六、七、8的盒模型解析就會進入怪異模式。

  • 可視寬：設置寬度
  • 內容寬：設置寬度-padding-border

（可視高和元素的內容高同理。）

隱藏元素

兩種方法：

  • display: none; 元素原文檔位置不保留
  • visibility: hidden; 元素的原文檔位置會保留

模擬固定定位

IE6不支持固定定位。那麼在IE下用絕對定位模擬固定定位的第一種方法以下：

<div class="box">
    <div class="div"></div>
</div>
html {height: 100%; overflow: hidden;} body {margin: 0; height: 100%; overflow: auto;} .box {height: 2000px;} .div {width: 100px; height: 100px; background: red; position: absolute; left: 100px; top: 100px;}
 

上述代碼中，絕對定位的.div是根據html的父級也就是document來定位的。本來滾動條是在document上的。可是html設置了overflow: hidden;，所以就把document上的滾動條hidden掉了；而後在body上加了overflow: auto; 滾動條跑到了body身上。所以滾動滾動條的時候，滾動的是body，document的位置不變，所以依據document進行絕對定位的.div看起來就好像是固定定位的效果。

以上方法也是存在問題的。

模擬固定定位的第二種方法：

<div class="box">
    <div class="div"></div>
</div>
.box {height: 2000px;} .div {width: 100px; height: 100px; background: red; position: fixed; left: 100px; top: 100px; _position: absolute; _top: expression(eval(document.documentElement.scrollTop+100));}

 

未知寬高的img如何在容器裏水平、垂直居中

第一種方法：

<div class="box">
    <img src="bigptr.jpg /><span></span> </div>
.box {width: 800px; height: 600px; border: 2px solid #000; text-align: center;} span {display: inline-block; height: 100%; vertical-align: middle;} img {vertical-align: middle;}

 

第二種方法：

<div class="box">
    <span><img src="bigptr.jpg /></span> </div>

 

不考慮兼容的話，可使用：
.box {width: 800px; height: 600px; border: 2px solid #000; display: table;} span {display: table-cell; text-align: center; vertical-align: middle;}

考慮IE六、7兼容，則要寫成：

.box {width: 800px; height: 600px; border: 2px solid #000; display: table; position: relative; overflow: hidden;} span {display: table-cell; text-align: center; vertical-align: middle; *position: absolute; left：50%; top: 50%;} img {*position: relative; vertical-align: top; left: -50%; top: -50%}

 

列表的文字溢出

li的裏面分爲左右兩塊元素，右邊元素一直跟在左側內容後邊並距左側元素10px間距。左側元素寬度由左側內容撐開。若是左右兩側內容總寬度超出了li寬度，就把左側多出的文字隱藏掉。

<ul class="list">
    <li>
        <p>
            <a href="#">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</a>
            <span>文字</span>
        </p>
    </li>
    <li>
        <p>
            <a href="#">文字文字文字文字文字文字</a>
            <span>文字</span>
        </p>
    </li>
    <li>
        <p>
            <a href="#">文字文文字</a>
            <span>文字</span>
        </p>
    </li>
</ul>
.list {width: 300pxp; margin: 0; padding: 0; list-style: none;} li {height: 30px; font-size: 12px; line-height: 30px; border: 1px solid #000; overflow: hidden;vertical-align: top;} span {padding: 10px;width: 40px; position: absolute; right: 0; top: 0;} p {margin: 0; float: left; padding-right: 50px; position: relative;}

 

整站規劃

  • 網站內文件夾的路徑要固定
  • 首頁通常命名爲index.html（當用戶訪問服務器，默認是把index.html發送到客戶端）
  • 要用英文命名
  • 對於中小型網站，首頁和二級目錄一般是放在根目錄；若是頁面比較多的話，可能會將網頁放到文件夾內
  • 通常狀況下，三級頁面放在文件夾中
  • css img js文件夾
  • 圖片的劃分有這樣幾種狀況，1、統一放在img文件夾中；2、img裏面只放img標籤中的圖片，背景圖放在img下面的bg文件夾中
  • css的劃分的考慮css代碼命名要帶含義：根據每塊元素的主題、功能、在頁面上的位置進行命名。駝峯命名：從第二個單詞開始每一個單詞的首字母大寫。
    • 網站的加載速度（通常一個優秀的網站打開要在5s以內，用戶流失基本在1%如下。超過了5s以後，每秒1%-2%的用戶流失量網上遞增。超過30s，80%-90%的用戶都會流失。）
    • 請求次數和服務器壓力
    • 後期維護
    • 樣式的通用性
    • reset（樣式重置）、public.css（公用樣式）、index（首頁私有樣式區域）…… 其餘私有樣式區域
  • css代碼，寫包含樣式的時候，能找到這個元素而且不影響其餘元素便可
  • 經常使用命名法：避免命名衝突，在私有樣式區域，給每一個私有樣式區域的樣式都固定一個字母前綴
    • 頁頭：header 登錄條：loginBar 標誌：logo 側欄：sideBar 廣告：banner 導航：nav 子導航：subNav 菜單：menu 子菜單：subMenu 搜索：search 滾動：scroll 頁面主題：main 內容：content 標籤頁：tab 文章列表：list 提示信息：msg 小技巧：tips 欄目標題：title 加入：joinus 指南：guide 服務：service 熱點：hot 新聞：news 下載：download 註冊：register 狀態：status 按鈕：btn 投票：vote 合做夥伴：partner 友情連接：friendLink 頁腳：footer 版權copyRight 外套：wrap 商標：label 頂導航：topnav 邊導航：sidebar 左導航；leftsideBar 右導航：rightsideBar 註釋：note 麪包屑：breadCrumb（即頁面所處位置導航提示） 容器：container 內容：content 當前：current

樣式重置

  • 方法一（代碼簡化、開發麻煩）：遇到一個標籤，就重置一個標籤的樣式
  • 方法二：直接複製其餘網站的樣式重置（有些標籤沒用到，有些標籤不符合本身的項目需求），這須要在其它網站的重置樣式表上進行調整。
body, h1, h2, h3, h4, h5, h6, p, dl, dd, ul, ol, pre, form, input, textarea, th, td, select {margin: 0; padding: 0;} em {font-style: normal;} li {list-style: none;} a {text-decoration: none;} img {border: none; vertical-align: top;} table {border-collapse: collapse;} textarea {resize: none; overflow: auto;}
  • 頁面寬度指的是頁面內容的寬度，而不是設計圖的寬度
  • 最好不要把全部內容放在一個div裏面，最好分開來寫

最好不要寫成：

<div class="wrap">
    <div class="header"></div>
    <div class="nav"></div>
    <div class="main"></div>
    <div class="footer"></div>
</div>

 

瀏覽器解析是從上往下解析，碰到一個標籤就把裏面的標籤所有加載而後再顯示在頁面上。若是把body裏面全部內容都包在一個div裏面，那麼若是頁面很長的話，瀏覽器顯示的頁面會很長時間什麼也顯示不出來，而後忽然全部內容冒出來了，效果很差。

最好分開來寫：

<div id="header">
    <div class="header wrap"></div>
</div>
<ul id="nav" class="wrap"></ul>
<div id="picTab" class="wrap">
    <div class="picTab wrap"></div>
</div>
<div id="whyQQ" class="wrap"></div>
<div id="main" class="wrap"></div>
<div id="footer" class="wrap"></div>

 

而後給加了wrap類的內容加樣式，寬960居中。

標籤頁上的小圖標的製做

用ico在線製做工具

< link href=」favicon.ico」 rel=」icon」 />

 【轉載】HTML+CSS基礎筆記原文地址：http://fantaghiro.github.io/study/2014/07/30/HTML-CSS-Basics.html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程