整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。 [1]
CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。
DIV是html的一個標簽 css是一個樣式表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.demo1{
color: red;
width: 100px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="demo1">
demo1
</div>
</body>
</html>
<link rel="stylesheet" href="css/style.css"/>
@import url
@import url("g.css");
.demo1{
color: red;
width: 100px;
height: 100px;
background: blue;
}
<div style="color: blue;width: 100px;height: 100px; background: black;">demo2</div>
/* */ 注釋內容
元素選擇器 div{屬性:值}
ID選擇器 #id{屬性:值}
class選擇器 .類名{屬性:值}
子選擇器 元數 空格 元素{屬性:值}
后代選擇器 元數 > 元數{屬性:值}
屬性選擇器 元素[屬性]{}
通配符選擇器 *{屬性:值}
群組選擇器
background-color 規定要使用的背景顏色。
background-position 規定背景圖像的位置。
background-size 規定背景圖片的尺寸。
background-repeat 規定如何重復背景圖像。
background-origin 規定背景圖片的定位區域。
background-clip 規定背景的繪制區域。
repeat 默認。背景圖像將在垂直方向和水平方向重復。
repeat-x 背景圖像將在水平方向重復。
repeat-y 背景圖像將在垂直方向重復。
no-repeat 背景圖像將僅顯示一次。
inherit 規定應該從父元素繼承 background-repeat 屬性的設置。
background-attachment 規定背景圖像是否固定或者隨著頁面的其余部分滾動。
background-image 規定要使用的背景圖像。
inherit 規定應該從父元素繼承 background 屬性的設置。
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
簡寫
background: url(images/bg.gif) no-repeat top right
背景圖片的滾動
背景圖片是否隨著內容的滾動而滾動由background-attachment設置
background-attachment:fixed; 固定，不隨內容的滾動而滾動
background-attachment:scroll; 滾動，隨內容的滾動而滾動
邊框顏色 border-color:#000
邊框寬度 border-width:1px;
border-left 設置左邊框，一般單獨設置左邊框樣式使用
border-right 設置右邊框，一般單獨設置右邊框樣式使用
border-top 設置上邊框，一般單獨設置上邊框樣式使用
border-bottom 設置下邊框，一般單獨設置下邊框樣式使用,有時可將下邊框樣式作為css下劃線效果應用。
邊框樣式值如下：
none : 無邊框。與任何指定的border-width值無關
hidden : 隱藏邊框。IE不支持
dotted : 在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+為點線。否則為實線（常用）
dashed : 在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+為虛線。否則為實線（常用）
solid : 實線邊框（常用）
double : 雙線邊框。兩條單線與其間隔的和等于指定的border-width值
上 右 下左
groove : 根據border-color的值畫3D凹槽
ridge : 根據border-color的值畫菱形邊框
inset : 根據border-color的值畫3D凹邊
outset : 根據border-color的值畫3D凸邊
上 右 下左
簡寫
border:5px solid red;
color:red; 文字顏色 #ffeeees
font-size:12px; 文字大小
font-weight:bolds 文字粗細(bold/normal)
font-family:”宋體”文字字體
font-variant:small-caps小寫字母以大寫字母顯示
text-align:center; 文本對齊(right/left/center)
line-height:10px; 行間距(可通過它實現文本的垂直居中)
text-indent:20px; 首行縮進
text-decoration:none;
文本線(none/underline/overline/line-through) underline/overline/line-through; 定義文本上的下劃線/上劃線/中劃線
letter-spacing: 字間距
list-style-type 設置列表項標記的類型。參閱：list-style-type 中可能的值。
list-style-position 設置在何處放置列表項標記。參閱：list-style-position 中可能的值。
list-style-image 使用圖像來替換列表項的標記。參閱：list-style-image 中可能的值。
inherit 規定應該從父元素繼承 list-style 屬性的值
取值:disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha
| upper-alpha | none | inherit
disc: 點
circle: 圓圈
square: 正方形
decimal: 數字
decimal-leading-zero: 十進制數，不足兩位的補齊前導0，例如: 01, 02, 03, ..., 98, 99
lower-roman: 小寫羅馬文字，例如: i, ii, iii, iv, v, ...
upper-roman: 大寫羅馬文字，例如: I, II, III, IV, V, ...
lower-greek: 小寫希臘字母，例如: α(alpha), β(beta), γ(gamma), ...
lower-latin: 小寫拉丁文，例如: a, b, c, ... z
upper-latin: 大寫拉丁文，例如: A, B, C, ... Z
armenian: 亞美尼亞數字
georgian: 喬治亞數字，例如: an, ban, gan, ..., he, tan, in, in-an, ...
lower-alpha: 小寫拉丁文，例如: a, b, c, ... z
upper-alpha: 大寫拉丁文，例如: A, B, C, ... Z
none: 無(取消所有的list樣式)
inherit:繼承
list-style-position
inside
列表項目標記放置在文本以內，且環繞文本根據標記對齊。
outside
默認值。保持標記位于文本的左側。列表項目標記放置在文本以外，且環繞文本不根據標記對齊。
簡寫
list-style:square inside url('/i/arrow.gif');
a{text-decoration: none;}
a:link {color:#FF0000;} /* 未訪問的鏈接 */
a:visited {color:#00FF00;} /* 已訪問的鏈接 */
a:hover {color:#FF00FF;} /* 鼠標劃過鏈接 */
a:active {color:#0000FF;} /* 已選中的鏈接 */
盒子模型的組成部分
外邊距（margin）、邊框（border）、內邊距（padding）、內容（content）四個屬性
自身的身高 width height
內邊距 padding
盒子邊框 border
與其他盒子的距離 margin 外邊距
常見的寫法 border:1px solid #foo;
單獨屬性:
border-widh:
border-style:
dotted 點狀虛線
dashed（虛線）
solid（實線）
double（雙實線）
border-color(顏色)
padding:內邊距
值：像素/厘米等長度單位、百分比
padding:10px; 上下左右
padding:10px 10px; 上下 左右
padding:10px 10px 10px; 上 左右 下
padding:10px 10px 10px 10px; 上 右 下 左（設置4個點-->順時針方向）
單獨屬性
padding-top:
padding-right:
padding-bottom:
padding-left:
當設置內邊距的時候會把盒子撐大，為了保持盒子原來的大小，應該高度和寬度進行減小，根據width和height減小
margin 外邊距
值：與padding相同
單獨屬性：與padding相同
外邊距合并：兩個盒子同時設置了外邊距，會進行一個外邊距合并
margin
margin:10px 上下左右都會騰出10px出來
margin:0px auto; 居中
left 元素向左浮動。
right 元素向右浮動
清除浮動
clear: both;
left
right
塊級元素：
他會獨占一行，在默認情況下，其寬度自動填滿其父元素的寬度；
塊級元素可以設置width、height屬性；
塊級元素即使設置了寬度也是獨占一行，塊級元素可以設置margin、padding屬性；
行內元素：
行內元素不會獨占一行，相鄰的行內元素會排列在同一行里，直到行排不下，就自動換行，其寬度隨內容而變化；
行內元素的width、height屬性則無效；
行內元素的margin、padding屬性很奇怪，水平方向的padding-left、padding-rigtht、margin-left、padding-right都會產生邊距效果，但是豎直方向的padding-top、padding-bottom、margin-top、margin-bottom卻不產生邊距效果。
行內元素轉換
display:none; 不顯示
display:block;變成塊級元素
display:inline; 變成行內元素
display:inline-block;以塊級元素樣式展示，以行級元素樣式排列
塊級元素(block element）
address 地址
center 舉中對齊塊
div- 常用塊級容易
dl 定義列表
form 交互表單 （只能用來容納其它塊元素）
h標簽
hr 水平分隔線
ol 無需列表
ul有序列表
p 段落
pre 格式化文本
行內元素：
a - 錨點
b - 粗體(不推薦)
br- 換行
code - 計算機代碼(在引用源碼的時候需要)
em - 強調
i - 斜體
img - 圖片（特殊的內聯元素，同時是內聯替換元素，替換元素可以設置寬高）
當圖片和DIV在一起時，圖片周圍會出現margin現象，即元素不重合貼在一起，為了解決這個問題，設置img的css為{margin：0；display：block；border：0px}
input - 輸入框
label - 表格標簽
select - 項目選擇
strong - 粗體強調
textarea - 多行文本輸入框
u - 下劃線
var - 定義變量
替換元素有如下：（和img一樣的設置方法）
<img>、<input>、<textarea>、<select>
<object>都是替換元素，這些元素都沒有實際的內容
15. 溢出
overflow 屬性規定當內容溢出元素框時發生的事情。
visible 默認值。內容不會被修剪，會呈現在元素框之外。
hidden 內容會被修剪，并且其余內容是不可見的。
scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
auto 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。
inherit 規定應該從父元素繼承 overflow 屬性的值。
16. 定位
position
static靜態定位（不對它的位置進行改變，在哪里就在那里）
默認值。沒有定位，元素出現在正常的流中（忽略 top,bottom, left, right 或者z-index 聲明）。
fixed固定定位（參照物--瀏覽器窗口）---做 彈窗廣告用到
生成固定定位的元素，相對于瀏覽器窗口進行定位。 元素的位置通過 "left", "top", "right"以及 "bottom"屬性進行規定。
relative（相對定位 ）（參照物以他本身）
生成相對定位的元素，相對于其正常位置進行定位。
absolute（絕對定位）(除了static都可以，找到參照物-->與它最近的已經有定位的父元素進行定位)
生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定
z-index
z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
定位的基本思想: 它允許你定義元素框相對于其正常位置應該出現的位置，或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置。
題目只能有30個字，不能寫全，其實今天我們要學習的內容有三個，第一，下拉列表表單，第二，多行文字輸入表單，第三，數據集表單。
開始學習吧！
前天和昨天我們在《HTML表單元素初識1——零基礎自學網頁制作》和《HTML表單元素初識2——零基礎自學網頁制作》中基本上把<input/>標簽的type屬性里不同的值進行了講解與實踐，今天我們來學習其他包含在<form></form>之間的元素。
帶有下拉列表的表單
我們在一些網站填寫注冊信息時，經常會遇到選擇"生活所在地"的操作，因為中國的地名是固定的，因此頁面會為我們提供一個下拉列表選項，我們直接點選即可，就不需要輸入文字了，這樣操作的好處在于不會出現拼寫錯誤。例如：
寫這個功能我們需要介紹一組新標簽<select></select>。"select"（選擇）。在這個標簽中再添加<option></option>。"option"（選項）。這樣就可以寫出帶有下拉列表的表單了，示例代碼如下：
<select><option></option></select>這段代碼我們繼續在昨天的"表單.html"文件中添加即可，在<input type = "image" src = "img/示例圖片/submit.jpg"/><br>這段代碼之前即可！與這個圖片提交按鈕共用一個<form></form>標簽！
下面我們為多選表單添加名稱，示例代碼如下：
請選擇省份<select><option></option></select>下面我們添加不同選項，示例代碼如下：
請選擇省份
<select >
<option >河北</option>
<option >山東</option>
<option >河南</option>
<option >海南</option>
<option >江蘇</option>
<option >安徽</option>
</select>
<br><br>為了規范起見，我們為表單信息添加name和value屬性，示例代碼如下：
請選擇省份
<select name = "province">
<option value="Hebei">河北</option>
<option value="Shandong">山東</option>
<option value="Henan">河南</option>
<option value="Hainan">海南</option>
<option value="Jiangsu">江蘇</option>
<option value="Anhui">安徽</option>
</select>
<br><br>大家要注意的是，在下拉列表表單中，name寫在<select>中，value寫在<option>中。
頁面效果如下：
這里告訴大家一個規律，下拉列表表單默認顯示第一個<option></option>中的文字內容。
如果您想改變這個默認顯示，請在需要顯示的<option>中添加selected屬性，并賦值為"selected"。
示例代碼如下：
請選擇省份
<select name = "province">
<option value="Hebei">河北</option>
<option value="Shandong">山東</option>
<option value="Henan" selected="selected">河南</option>
<!--選中這個選項--><option value="Hainan">海南</option><option value="Jiangsu">江蘇</option><option value="Anhui">安徽</option></select><br><br>頁面效果如圖：
多行文字輸入表單
我們在西瓜視頻上發布視頻時會被要求填寫視頻描述，頁面中的輸入框不是像下圖這么短的單行輸入框。
而是多行輸入框，如圖：
使用<textarea></textarea>標簽即可添加這樣的輸入框，不過要設置row（列）和cols（行）屬性的數值。示例代碼如下：
<br>請簡要描述您的劇本的情節<br><textarea row="3" cols="20"></textarea><br>這段代碼添加到</select><br><br>之后，與其共同使用一個<form></form>標簽。
下面我們為這個多行輸入框添加一些提示和限制。
首先，添加提示文字，和type="text"的<input/>標簽一樣，都是使用placeholder屬性。
第二，我們限制一下字數，使用maxlength（最大長度）屬性。
第三，在頁面加載完成后，直接讓光標停留在輸入框中，使用autofocus屬性。
下面看看如何寫吧，示例代碼如下：（不要忘記寫好name屬性?。?/p>
<br>
請簡要描述您的劇本的情節<br>
<textarea row="3" cols="20" name ="storyOutLine"placeholder="最多輸入80字"maxlength="80"autofocus></textarea><br>頁面效果如圖：
如果刷新頁面不能正確顯示，請嘗試關閉后重新打開！
數據集表單
數據集表單實際上就是一個將不同選項或信息打包上傳的設置。
當一組表單元素放到 <fieldset> 標簽內時，瀏覽器會以特殊方式來顯示它們，它們可能有特殊的邊界、3D 效果，或者甚至可創建一個子表單來處理這些元素。（W3school）
這個數據集有三個部分組成，首先是<fliedset></fliedset>,這個標簽不會顯示，只是告訴瀏覽器這里的數據要打包。
第二是<legend></legend>,"legend"(說明)，這里添加數據集名稱。
第三就是我們之前學到的那些標簽了。
示例代碼如下：
<fliedset> <legend>信息打包</legend> </fliedset>下面我們使用這段代碼把form2打包一下吧。示例代碼如下：
<form>
<fieldset><!--開始-->
<legend>信息打包</legend><br>
<!--標題-->興趣愛好：<br>
<input type = "checkbox" name = "hobby" value = "reading"/>讀書
<input type = "checkbox" name = "hobby" value = "film"/>電影
<input type = "checkbox" name = "hobby" value = "painting"/>繪畫
<input type = "checkbox" name = "hobby" value = "music"/>音樂
<br>
最高學歷：<br>
<input type = "radio" name = "education" value = "highSchool"/>高中
<input type = "radio" name = "education" value = "bachelor"/>本科
<input type = "radio" name = "education" value = "master"/>碩士
<input type = "radio" name = "education" value = "doctor"/>博士
<br>
請選擇省份
<select name = "province">
<option value="Hebei">河北</option>
<option value="Shandong">山東</option>
<option value="Henan" selected="selected">河南</option><!--選中這個選項-->
<option value="Hainan">海南</option>
<option value="Jiangsu">江蘇</option>
<option value="Anhui">安徽</option>
</select>
<br><br><br>
請簡要描述您的劇本的情節<br>
<textarea row="3" cols="20" name ="storyOutLine"placeholder="最多輸入80字"maxlength="80"autofocus></textarea>
<br>
</fieldset><!--結尾-->
<input type = "image" src = "img/示例圖片/submit.jpg"/><br>
<input type="reset" /><br>
<input type = "submit" value = "submit"/>
</form>頁面效果如下：
今天的內容結束了！
如果您喜歡我的教程請關注我，點贊也能讓我充滿動力！
HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作
HTML是什么？——零基礎自學網頁制作
第一個HTML頁面如何寫？——零基礎自學網頁制作
HTML頁面中head標簽有啥用？——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作
使用HTML添加表格1（基本元素）——零基礎自學網頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作
使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作
HTML表單4（form的action、method屬性）——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
們經常會遇到這樣的一個問題。
設計出了很牛逼的設計稿，客戶確認了，前端靜態制作也出來，還原設計稿95%以上，客戶也確認了。
那是個完美?。。∽鐾瓿绦蛄?，交給客戶了。然后客戶自己上傳了圖片了。那個悲催?。。K不忍睹?。。?/p>
完全和設計稿兩碼事？圖片不好看，到處都跑位。
客戶就罵過來了，你們是否也遇到這樣的事情？因為客戶的公司沒有設計師啊，哈哈，這個問題可能遇到的不少。
其實大家都會說，這歸根到底都是客戶沒有處理圖片的問題所造成的。然后大家都推來推去。
那么，前端制作工程師是否有辦法解決這樣的問題，其實是可以的。如果因圖片問題導致布局變了，解決了這個問題就只剩下圖片的美觀性，那這個就可以跟客戶說你要請個設計師幫你處理圖片啊。這樣不就解決問題了嗎？
這種方式和微信朋友圈的九宮格圖片展示方式類似，只顯示圖片中間的內容，其他的將會被隱藏。
舉個栗子：
這個列表是不是很整齊，看起來比較舒服，雖然圖片有那么點點的變形，但不影響閱讀。
如果其中有一張圖片的尺寸稍微有一點點不一樣，肯定會出現跑位的情況。就像下面這樣。這樣客戶看到不被投訴才怪哦??！
那么就以這個來說說解決方式。
大家都知道圖片有一種特性，就是當圖片的寬度改變時，高度也會隨著等比例在改變。
例如：一張寬高都為100px的圖片，如果把寬度調至200px，那么高度是不是也會隨之變成200px；沒錯的，就是利用這個特性來解決布局亂的情況。
這里就拿上一次說到的 “圖文列表 純css布局” 那次說的布局來說說，因為都是做好，和上面那個圖類似。偷偷懶。如果沒看過那篇，搜一下 “圖文列表 純css布局”，就可以找到了。（如需下載源碼，請關注微信公眾號：JS學吧）
效果是這樣的：
如何切出占位圖呢？如下操作
用PS打開文件，用裁剪工具把圖片完整的裁下來，如下圖
裁完成，再點擊菜單欄目 “圖像 > 圖像大小” 或 按著 Alt鍵，再點兩次 I 鍵?？梢哉{出 “圖像大小” 彈窗。
可以看到 “像素大小” 的寬度和高度都為260px，那么只要調其中一個就可以，就可以達到等比例調整。
我們先調成10px，確定后，再把圖層的 “小眼睛” 關掉，另存為一個 png24 的透明圖片，記得哦??！一定是要png24的。名字自己定啦！！
然后把 img 中的圖片路徑改為如下：
<a href=""><img src="rect.png" alt="" width="100%"></a>然后刷新看看效果，是不是發現原來的圖片不見的，變成空白的，但是原來的布局結構沒有改變。其實要的就是這樣的效果。
然后我們在 img 的外層再包個div，就拿這個div來放圖片。順便加個背景色看看效果。
<a href="">
<div style="background: #000;">
<img src="rect.png" alt="" width="100%">
</div>
</a>
看，占位圖片的效果出來了。外層div的寬度和高度都被img撐開了。是不是達到了想要的效果。
關鍵的時候來了。就是處理圖片。我們要把產品圖片做為背景的形式輸出即可以。把圖片的路徑寫在div上面的就解決了。再加上css3新屬性就可以了。
HTML如下：
<a href="">
<div class="cover-img" style="background-image: url(pic001.jpg);">
<img src="rect.png" alt="" width="100%">
</div>
</a>
用背景樣式 background-image 定入路徑。再添加一個 cover-img 的類名。然后 cover-img 的樣式如下：
.cover-img {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
注意、注意、注意，中要的事說三遍。重點就在于 css3 的新屬性 background-size: cove；
這個屬性就是會把背景圖片，以等比例的形式保持圖像本身的寬高比例，將圖片縮放到正好完全覆蓋定義背景的區域。
是不是不明白，那就對了，挺不好理解。最好還是用實際效果來看看。
最終出來的效果就是和最開始的那張圖片一樣的，只是看不出來而已。
那么我們就來玩真的。直接上網整一張大圖的路徑放進去看看就知道了。
上某某網站找特大尺寸的圖片來，例如下面這張：尺寸是2533x1583，夠大了，也不是正方形哦！！我們一開始說的都是正方形，現在弄個不是正方形的圖片來試試效果。
HTML如下：
<a href="">
<div class="cover-img" style="background-image: url(pic002.jpg);">
<img src="rect.png" alt="" width="100%">
</div>
</a>
更改url里的路徑即可
出來的效果如下：
是不是自動調整了。
我們再換一張高形狀的圖片。二哈圖：尺寸是2448x3264
HTML：如下
<a href="">
<div class="cover-img" style="background-image: url(pic003.jpg);">
<img src="rect.png" alt="" width="100%">
</div>
</a>
最終效果：
怎么樣，效果還可以吧??！不知道你們看出了什么了沒有。
第一張是寬形狀的圖片，是以高度填滿 div 的區域。
第二張是高形狀的圖片，是以寬度填滿 div 的區域。
全都是靠著 background-size: cover; 這個屬性解決了。但也是有不好的地方。
例如不支持IE瀏覽器，圖片顯示不全，多一個文件服務器要多請求一次.....等等問題！！做圖時的內容盡可能在正中間。
然后，不管客戶上傳什么鬼形狀的圖片，都不會產生布局變亂的情況。
獲取《vue3.0大公司后臺管理系統開發 正規開發流程項目實踐》視頻，
請點擊下面 “了解更多” 或 請關注微信公眾號《手把手擼碼前端》
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
