最詳細的html+css筆記（三）

三部分附錄（因為暫時不支持插入超鏈接所以部分內容無法顯示）

附錄一 DIV命名規范

企業DIV使用頻率高的命名方法
網頁內容類
標題: title
摘要: summary
箭頭： arrow
商標： label
網站標志： logo
轉角/圓角：corner
橫幅廣告： banner
子菜單： subMenu
搜索： search
搜索框： searchBox
登錄： login
登錄條：loginbar
工具條： toolbar
下拉： drop
標簽頁： tab
當前的： current
列表： list
滾動： scroll
服務： service
提示信息： msg
熱點：hot
新聞： news
小技巧： tips
下載： download
欄目標題： title
熱點： hot
加入：joinus
注冊： regsiter
指南： guide
友情鏈接： friendlink
狀態： status
版權： copyright
按鈕： btn
合作伙伴： partner
投票： vote
左右中：left right center

注釋的寫法: /* Footer */ 內容區/* End Footer */
id的命名:
頁面結構
容器: container
頁頭：header
內容：content/container
頁面主體：main
頁尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制整體布局寬度：wrapper
左右中：left right center

導航
導航：nav
主導航：mainbav
子導航：subnav
頂導航：topnav
邊導航：sidebar
左導航：leftsidebar
右導航：rightsidebar
菜單：menu
子菜單：submenu
標題: title
摘要: summary

功能
標志：logo
廣告：banner
登陸：login
登錄條：loginbar
注冊：regsiter
搜索：search
功能區：shop
標題：title
加入：joinus
狀態：status
按鈕：btn
滾動：scroll
標簽頁：tab
文章列表：list
提示信息：msg
當前的:current
小技巧：tips
圖標: icon
注釋：note
指南：guild
服務：service
熱點：hot
新聞：news
下載：download
投票：vote
合作伙伴：partner
友情鏈接：link
版權：copyright

class的命名:
顏色:使用顏色的名稱或者16進制代碼,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
字體大小,直接使用”font+字體大小”作為名稱,如
.font12px { font-size: 12px; }
.font9px {font-size: 9pt; }
對齊樣式,使用對齊目標的英文名稱,如
.left { float:left; }
.bottom { float:bottom; }
標題欄樣式,使用”類別+功能”的方式命名,如
.barnews { }
.barproduct { }

注意事項::
一律小寫;
盡量用英文;
不加中杠和下劃線;
盡量不縮寫，除非一看就明白的單詞.

推薦的 CSS 書寫順序：
顯示屬性
display
list-style
position
float
clear
自身屬性
width
height
margin
padding
border
background
文本屬性
color
font
text-decoration
text-align
vertical-align
white-space
other text
content

附錄二 CSS精靈

CSS精靈原理以及應用
CSS雪碧的基本原理是把你的網站上用到的一些圖片整合到一張單獨的圖片中，從而減少你的網站的HTTP請求數量。
該圖片使用CSS background和background-position屬性渲染，這也就意味著你的標簽變得更加復雜了，圖片是在CSS中定義，而非<img>標簽。
一個簡單的例子：
一張圖片作出一個按鈕的三個狀態
一個鏈接用CSS做成按鈕的樣式，我們可以使用同一張圖片，完成按鈕的三個狀態，a:link，a:hover，a:active <a class="button" href="#">鏈接</a>
加入右側的圖片為：200px 65px的三個按鈕圖拼合而成的圖片button.png，從上到下一次為按鈕的普通、鼠標滑過、鼠標點擊的狀態。則可以使用CSS進行定義。

a {
 display:block; 
 width:200px; 
 height:65px; 
 line-height:65px; /*定義狀態*/
 text-indent:-2015px; /*隱藏文字*/
 background-image:url(button.png); /*定義背景圖片*/
 background-position:0 0;
 /*定義鏈接的普通狀態，此時圖像顯示的是頂上的部分*/
}
a:hover {
 background-position:0 -66px;
 /*定義鏈接的滑過狀態，此時顯示的為中間部分，向下取負值*/
}
a:active {
 background-position:0 -132px; 
 /*定 義鏈接的普通狀態，此時顯示的是底部的部分，向下取負值*/
}

更多的CSS雪碧，圖片更復雜，背景定位更精確。可能會用到大量的數值
如：background:url(nav.png) -180px 24pxno-repeat; 來達到更精確的定位
優點：
減少加載網頁圖片時對服務器的請求次數
可以合并多數背景圖片和小圖標，方便在任何位置使用，這樣不同位置的請求只需要調用一個圖片，從而減少對服務器的請求次數，降低服務器壓力，同時提高了頁面的加載速度，節約服務器的流量。
提高頁面的加載速度
sprite技術的其中一個好處是圖片的加載時間(在有許多 sprite 時，單張圖片的加載時間)。由所需圖片拼成的一張 GIF圖片的尺寸會明顯小于所有圖片拼合前的大小。單張的 GIF只有相關的一個色表，而單獨分割的每一張 GIF 都有自己的一個色表，這就增加了總體的大小。因此，單獨的一張 JPEG 或者 PNGsprite 在大小上非常可能比把一張圖分成多張得來的圖片總尺寸小。
減少鼠標滑過的一些bug
IE6不會主動預加載鼠標滑過即a:hover中的背景圖片，所以，如果使用多張圖片，鼠標滑過會出現閃白的現象。使用CSS雪碧，由于一張圖片即可，所以不會出現這種現象。
不足：
CSS雪碧的最大問題是內存使用
影響瀏覽器的縮放功能
拼圖維護比較麻煩
使CSS的編寫變得困難
CSS 雪碧調用的圖片不能被打印
錯誤得使用 Sprites 影響可訪問性

附錄三一些tips解決方案

頁面優化實踐

從下面的幾個方面可以進行頁面的優化：
減少請求數
圖片合并
CSS文件合并
減少內聯樣式
避免在 CSS中使用 import
減少文件大小
選擇適合的圖片格式
圖片壓縮
CSS 值縮寫（Shorthand Property)
文件壓縮
頁面性能
調整文件加載順序
減少標簽數量
調整選擇器長度
盡量使用CSS 制作顯示表現
增強代碼可讀性與可維護性
規范化
語義化
模塊化

寫DIV+CSS 的一些常識

不要使用過小的圖片做背景平鋪
這就是為何很多人都不用 1px 的原因，這才知曉。寬高 1px 的圖片平鋪出一個寬高 200px 的區域，需要 200200=40, 000 次，占用資源
無邊框
推薦的寫法是 border:none;，哈哈，我一直在用這個。 border:0; 只是定義邊框寬度為零，但邊框樣式、顏色還是會被瀏覽器解析，占用資源
慎用通配符
所謂通配符，就是將CSS 中的所有標簽均初始化，不管用的不用的，過時的先進的，一視同仁，這樣，大大的占用資源。要有選擇的初始化標簽。
CSS的十六進制顏色代碼縮寫
習慣了縮寫及小寫，這才知道，原來不是推薦的寫法，為的是減少解析所占用的資源。但同時會增加文件體積。孰優孰劣，有待仔細考證。
樣式放頭上，腳本放腳下。不內嵌，只外鏈
堅決不用 CSS表達式
使用引用樣式表，而不是通過@import 導入。
一般來說，PNG比 GIF 要小，小得多。再者，GIF 中有多少顏色是被浪費的，很值得優化。
千萬不要在 HTML中縮放圖片，一者不好看，二者占資源。
正文字體最好用偶數
12px、14px、16px，效果非常好。特例，15px。
block、ul、ol等上下留出至少一倍行距，左側至少兩倍行距，右側隨意。
段落之間，至少要有一倍行距
強行指定某些元素的 line-height，正文 1.6倍于文字大小，標題1.3倍。
中文標點用全角
英文夾雜在中文中，左右空格，半角。
中文字體的粗體和斜體，遠離較好

常用代碼片段

雅虎工程師提供的CSS初始化示例代碼【僅供參考】
可以在html頭文件中直接引用，從而避免瀏覽器的不兼容帶來的錯誤。

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th,
td { 
 margin:0; padding:0; 
}
body {
 background:#fff; 
 color:#555; 
 font-size:14px; 
 font-family: Verdana, Arial, Helvetica, sans-serif; 
}
td,
th,
caption { 
 font-size:14px;
}
h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
 font-weight:normal; 
 font-size:100%; 
}
address, 
caption,
cite, 
code, 
dfn, 
em, 
strong,
th, 
var { 
 font-style:normal; 
 font-weight:normal;
}
a { 
 color:#555; 
 text-decoration:none; 
}
a:hover { 
 text-decoration:underline; 
}
img {
 border:none;
}
ol,ul,li { 
 list-style:none; 
}
input, 
textarea, 
select, 
button { 
 font:14px Verdana,Helvetica,Arial,sans-serif; 
}
table { 
 border-collapse:collapse; 
}
html {
 overflow-y: scroll;
} 
.clearfix:after {
 content: "."; 
 display: block; 
 height:0; 
 clear:both; 
 visibility: hidden;
}
.clearfix { 
 *zoom:1; 
}

mobile meta標簽

<meta name=”viewport” content=”width=320,target-densitydpi=dpi_value,initial-scale=1, user-scalable=no”/>

表格不被撐開

table-layout: fixed; word-break: break-all;;border-collapse: collapse

不設寬高居中

<div id=”abc” style=”display:table;text-align:center;width:100%;height:100%;”>
 <span style=”background:#f00; display:table-cell; vertical-align:middle;”>
 <input type=”button” value=”item1″ />
 </span>
</div>

透明度的兼容代碼

filter:alpha(opacity=50); /*1-100*/
-moz-opacity:0.5; /*0-1.0*/
-khtml-opacity:0.5; /*0-1.0*/
opacity:0.5; /*0-1.0*/

文字溢出點點省略

white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;

清除浮動的幾種方法
方法一：投機取巧法 – 不推薦
直接一個放到當作最后一個子標簽放到父標簽那兒，此方法屢試不爽，兼容性強
方法二：overflow + zoom方法 –不推薦
.fix{overflow:hidden; zoom:1;}
此方法優點在于代碼簡潔，涵蓋所有瀏覽器
方法三：after + zoom方法 -推薦–此方法可以說是綜合起來最好的方法了
clearfix只應用在包含浮動子元素的父級元素上

.fix{zoom:1;}
.fix:after{
 display:block; 
 content:'clear'; 
 clear:both;
 line-height:0; 
 visibility:hidden;
}

更多代碼片段詳情
實用的60個CSS代碼片段

一些總結

自動繼承屬性：
color
font
text-align
list-style
…
非繼承屬性：
background
border
position
…
具有破壞性的元素：
float
display:none;
position:absoblute/fixed/sticky;
具有包裹性的元素：
display:inline-block/table-cell
position:absolute/fixed/sticky
overflow:hidden/scroll
消除圖片底部間隙的方法
圖片塊狀化-無基線對齊
img{display:block;}
圖片底線對齊
img{vertical-align:bottom;}
行高足夠小 - 基線位置上移
.box{line-height:0;}

一些概念

BFC
BFC全稱”Block Formatting Context” 中文為“塊級格式化上下文”
記住這么一句話：BFC元素特性表現原則就是，內部子元素再怎么翻江倒海，翻云覆雨都不會影響外部的元素
BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此
優雅降級(graceful degradation)
一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容
漸進增強 progressive enhancement：
是在瀏覽器開啟JavaScript功能后，如果瀏覽器版本不支持某些 JavaScript 能力，我們解決這種問題的方式
平穩退化
是在瀏覽器沒有JavaScript功能，或沒有開啟JavaScript功能情況下，我們解決這種問題的方式；

學習從來不是一個人的事情，要有個相互監督的伙伴，想要學習或交流前端問題的小伙伴可以私信“學習”小明加群獲取2019web前端最新入門資料，一起學習，一起成長！

過CSS背景屬性，可以給頁面元素添加背景樣式。

背景屬性可設置背景顏色、背景圖片、背景平鋪、背景圖片位置、背景圖像固定等。

背景顏色

background-color：rgb值或顏色單詞；

默認背景顏色值為transparent（透明）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景屬性</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            border: 1px solid;
        }
        /* 背景顏色 */
        .bg-color {
            background-color: transparent;
        }
        .bg-color-trans {
            text-align: center;
            background-color: pink;
            width: 100px;
            height: 100px;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div class="bg-color">背景顏色
        <div class="bg-color-trans">透明背景</div>
    </div>
</body>
</html>

效果：

背景圖片

Background-image：圖片路徑URL；

默認背景圖片值為none。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景屬性</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            border: 1px solid;
        }
        .bg-image {
            background-image: url(../images/meitizhub.jpg);
        }
    </style>
</head>
<body>
    
    <div class="bg-image">背景圖片</div>
    
</body>
</html>

效果：

背景平鋪

background-repeat：repeat | no-repeat | repeat-x | repeat-y

background-repeat：repeat；

默認情況下背景圖片狀態為平鋪，指的是圖片會從左向右且從上到下整個鋪滿盒子。

background-repeat：no-repeat；

關閉默認平鋪狀態，只在盒子左上角顯示一個完整的背景圖片。

background-repeat：repeat-x；

沿著x軸方向在盒子內最頂部橫向平鋪背景圖片。

background-repeat：repeat-y；

沿著y軸方向在盒子內最左側縱向平鋪背景圖片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景屬性</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            border: 1px solid;
        }
        .bg-repeat {
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div class="bg-image">背景平鋪默認值</div>
    <div class="bg-image bg-repeat">背景不平鋪</div>
    <div class="bg-image bg-repeatx">x軸方向平鋪背景圖片</div>
    <div class="bg-image bg-repeaty">y軸方向平鋪背景圖片</div>
</body>
</html>

效果：

背景圖片位置

background-position：x y；

x軸和y軸的值可以是方位名詞或者精確數值都可。

方位名詞：top、bottom、center、left、right。

當屬性值使用方位名詞時如果只寫一個值，則第二個值默認為居中狀態。

當屬性值使用精確數值時如果只寫一個值，則默認是x軸方向的值，y軸方向默認垂直居中。

如果參數是方位詞和精確單位混合使用時，默認第一個值是x值，第二個是y值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景屬性</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            border: 1px solid;
        }
        .bg-position {
            background-repeat: no-repeat;
            background-position: center top;
        }
        .bg-position2 {
            background-repeat: no-repeat;
            background-position: right;
        }
        .bg-position3 {
            background-repeat: no-repeat;
            background-position: 20px 50px;
        }
        .bg-position4 {
            background-repeat: no-repeat;
            background-position: 20px ;
        }
        .bg-position5 {
            background-repeat: no-repeat;
            background-position: 80px bottom ;
        }
    </style>
</head>
<body>
    <div class="bg-image bg-position">背景圖片存放位置1</div>
    <div class="bg-image bg-position2">背景圖片存放位置,設置一個值</div>
    <div class="bg-image bg-position3">背景圖片存放位置精確單位值</div>
    <div class="bg-image bg-position4">背景圖片存放位置精確單位值</div>
    <div class="bg-image bg-position5">背景圖片存放位置混合使用</div>

</body>
</html>

效果：

背景圖像固定

background-attachment：scroll | fixed；

背景圖像在頁面的某一處固定不動或者隨頁面的其余部分滾動。可以制作視差滾動效果。

background-attachment：scroll ；

默認值，背景圖像固定在頁面上，隨著滾動條滾動而移動。

background-attachment：fixed；

背景圖像固定在某一區域，滾動條滑動時位置不變。

body {
            background-image: url(../images/43619545307190.png);
            background-repeat: no-repeat;
            background-position: center top;
            background-attachment: fixed;
        }

背景屬性復合寫法

background：背景顏色、背景圖片地址、背景平鋪、背景圖像滾動、背景圖片位置；

沒有特定書寫順序，按需使用屬性。

背景顏色半透明

實現背景顏色半透明效果。

background：rgb（0,0,0, 0.3）；

最后一個參數是alpha透明度，取值范圍在0~1之間。

總結：

屬性	定義	值
Background-color	背景顏色	Rgb值 \| 十六進制 \| 顏色英文單詞
Background-image	背景圖片	Url（圖片路徑）
Background-repeat	背景平鋪	Repeat \| no-repeat \|repeat-x \|repeat-y
Background-position	背景固定	x軸和y軸。方向名詞或者精確數值
Background-attachment	背景附著	Scroll（固定在頁面上）\| fixed（與滾動條固定）
背景復合寫法	代碼簡潔	背景顏色、圖片地址、平鋪、滾動、位置。
背景顏色半透明	顯示效果	Background：rgba（0,0,0，0~1）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登錄頁面</title>
    /*總體的樣式*/
    <style>
    	/*盒子樣式*/
        #box{
            width: 350px; //寬
            height: 450px; //高
            border: 1px solid black; //邊框
            border-radius: 10px; //邊框弧度
            font-family: 黑體; //字體
            letter-spacing:8px; //段間距
            word-spacing: 10px; //字間距
            line-height: 40px; //行高
            font-size: 18px; //字大小
            padding: 20px; //內邊框
        }
        /*給'注冊'賦予樣式*/
        .register{
            width:280px ; //寬
            height: 50px; //高
            background-color: skyblue; //背景顏色
            border-radius: 10px; //邊框弧度

        }
        /*將所有邊框都改變*/
        *{
            border-radius: 5px; 邊框弧度
        }
        /*使用class選擇器，賦予number寬高和邊框*/
        .number{
            width: 185px; //寬
            height: 27px; //高
            border-width: 1px; //邊框寬度

        }
        /*id選擇器*/
        #two{
            width: 55px; //寬
            border-width: 1px; 邊框寬度
        }
        /*id選擇器*/
        #phone{
            width: 103px; //寬
        }
        /*class 選擇器*/
        .boxs{
            zoom: 75%; //清除浮動
            color: darkgray; //顏色
        }
        /*class選擇器*/
        .box_a{
            width: 50px; //寬
            height: 50px; //高
            background-image: url("../image/04.jpg "); //背景圖片
            background-repeat: no-repeat; // 是否平鋪
            background-size: 50px 25px; //背景尺寸
            position: relative; //定位 相對定位
            left: 310px; //定位后左移
            bottom: 32px; //定位后下移

        }
    </style>
</head>
<body>
<div id="box">
    <h1>請注冊</h1>
<p style="color: darkgray">已有帳號?<a href="https://im.qq.com/index">登錄</a></p>
<form action="" method="post">
    <label for="name">用戶名</label>
    <input type="text" placeholder="請輸入用戶名" id="name" class="number"> <br>
    <label for="phone">手機號</label>
    <select name="" id="two" class="number">
    <optgroup>
        <option style="" class="">+86</option>
    </optgroup>
    </select>
    <input type="text" placeholder="請輸入手機號" id="phone" class="number"> <br>
    <label for="mima">密?碼</label>
    <input type="password" placeholder="請輸入密碼" id="mima" class="number"> <br>
    <label for="mima">驗證碼</label>
    <input type="password" placeholder="請輸入驗證碼" id="is" class="number">
    <div class="box_a"></div>
    <div class="boxs">
        <input type="radio" id="" class="accept">閱讀并接受協議<br>
    </div>
    <input type="submit" value="注冊" class="register" >

    </form>
</div>


</body>
</html>
在這里插入圖片描述

在線咨詢

上一篇：Vue3 封裝第三方組件（一）做一個合格的傳聲筒
下一篇：HTML文檔元素

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商