htmlcss 代碼

1、1.css引用方式：內(nèi)聯(lián)式<style> div color:red; </style>行內(nèi)式<div style="color:green">外聯(lián)式<link href="css/css1.css" rel="stylesheet">import方式<style> import url("css/css1.css");</style>2.相對(duì)路徑：<link href="css/css1.css" rel="

2、;stylesheet"> ./返回上一級(jí)目錄 絕對(duì)路徑：<link href="E:/web Test-43/css/css1.css" rel="stylesheet">3. 表格：colspan 列合并 rowspan 行合并 cellspacing 單元格間距<table cellspacing="0"></table><tr> <td colspan="2">a1</td><!-行-></tr>

3、<tr> <td rowspan="2">b1</td><!-列-></tr>固定表格布局table table-layout:fixed;如何讓表格邊框?yàn)?px方法1：用邊框的上下左右調(diào)整方法2：border-collapse:collapse 表格邊框合并為單一邊框 默認(rèn)：separate <style> table border-collapse:collapse; </style>列間隔 行間隔:border-spacing border-spacing:10px 5px;文字水平對(duì)

4、齊 text-align - left center righttable text-align:center; 空單元格 empty-cells:hide隱藏空單元格 show顯示空單元格table empty-cells:hide; 表格居中table margin: auto; 垂直對(duì)齊 vertical-align - top middle bottomtable tr td vertical-align:top; 4.圓角問(wèn)題：border-bottom-left-radius: ;border-bottom-right-radius: ;border-top-left-radius

5、: ;border-top-right-radius: ;border-radius: 10px 0px 0px 10px;5. 偽類：hover-鼠標(biāo)懸停table tr:hover background-color: blue; -行懸停table tr td:hover background-color: blue; -每個(gè)表格懸停table tr th:hover background-color:red; -表頭懸停6.表頭<!-th-><tr> <th>t1</th> <th>t2</th> <th>

6、;t3</th></tr>7. 表格當(dāng)中添加表格<table class="t1"> <tr><td> <table class="t2"> <tr> <td></td> </tr> </table> </td></tr></table>8. 透明度：.uname:hover background-color: red; opacity: 0.2;9.焦點(diǎn)：.pwd:focus backg

7、round-color: green; width: 300px;10.表單及表單控件: action:提交地址 action=""提交當(dāng)前頁(yè) method:提交方式 get-默認(rèn) post-更加安全<form action="" method="post"></form>（1）<!-文本輸入控件-><input type="text" name="uname" value="uname">（2）<!-密碼輸入控件->

8、;<input type="password" name="pwd" value="pwd>（3）<!-按鈕控件-> 1）<button>登錄</button> 2）<input type="button" value="登錄按鈕" name="but01">（4）<!-提交按鈕 整體刷新-> -ajax 局部刷新<input type="submit" value="登錄&qu

9、ot; name="but02">（5）<!-重置按鈕-><input type="reset" value="重置" name="but03">（6）<!-單選控件 默認(rèn)選中屬性：checked-> -value="不同" name="相同"<input type="radio" value="nan" name="r1">男<input type=&qu

10、ot;radio" value="nv" name="r1">女（7）<!-復(fù)選控件 默認(rèn)選中屬性：checked-> -value="不同" name="相同"愛(ài)好：<input type="checkbox" value="xx" name="c1" >學(xué)習(xí) <input type="checkbox" value="yx" name="c1" &

11、gt;游戲 <input type="checkbox" value="sj" name="c1" >睡覺(jué)（8）<!-下拉列表 multiple:多選 selected:默認(rèn)->城市：<select multiple> <option class="p01" selected>北京</option> <option class="p01">上海</option> <option class="p0

12、1">哈爾濱</option> </select>（9）<!-多行文本控件->簡(jiǎn)介：<textarea rows="20" cols="30"></textarea>（10）<!-上傳文件控件->上傳文件：<input type="file">（11）<!-隱藏控件-><input type="hidden">（12）<!-html5表單控件-><form action=&q

13、uot;"> <!-email控件-> <input type="email"> <!-網(wǎng)址-> <input type="url"> <!-電話-> <input type="tel"> <!-日期-> <input type="date" value="2016-01-01"> <input type="time"> <input type=&

14、quot;datetime-local"> <input type="month"> <input type="week"> <!-<input type="datetime">不好使-> <!-數(shù)值控件-> <input type="number"> <!-范圍控件-> <input type="range" value="25" min="0" m

15、ax="100" step="1"> <!-顏色控件-> <input type="color"> <!-搜索控件-> <input type="search"></form>11. 外邊距margin-left margin-right margin-top margin-bottom 1）元素（盒子）垂直排列，margin上下合并，取最大值。 2）元素（盒子）水平排列，margin左右累加 margin允許有負(fù)值margin:20px; 四邊ma

16、rgin:20px 40px; 上下 左右margin:20px 180px 200px; 上 左右 下margin:20px 700px 80px 100px; 上 右 下 左12. 內(nèi)邊距 padding-left padding-right padding-top padding-bottompadding 不允許負(fù)值padding:50px; 四邊padding:30px 40px; 上下 左右padding:20px 20px 40px; 上 左右 下padding:20px 40px 20px 40px; 上 右 下 左13. 加粗：font-weight: border 1009

17、00;簡(jiǎn)寫(xiě)：font:italic bolder 20px arial ;（簡(jiǎn)寫(xiě)：20px arial 必寫(xiě) 順序不能顛倒）14.背景簡(jiǎn)寫(xiě)：background: red url("") no-repeat fixed top;簡(jiǎn)寫(xiě) 順序可變15.字體單位：px 像素cm 厘米pt 磅in 英寸百分比 對(duì)默認(rèn)字體縮放（不同瀏覽器默認(rèn)字體不同，默認(rèn)最小字體也不同）em 字號(hào)倍數(shù)，相對(duì)于默認(rèn)字體（父元素或?yàn)g覽器）/font-size:2em;/pt cm in 200%原基礎(chǔ)上放大 50%原基礎(chǔ)上縮小 em成倍數(shù)放大/16.使紅框固定大小labelwidth: 100px; b

18、order:1px solid red; display: inline-block;<label>email:</label><label>user name:</label>17.表示label標(biāo)簽要綁定的HTML元素,你點(diǎn)擊這個(gè)標(biāo)簽的時(shí)候,所綁定的元素將獲取焦點(diǎn)<label for="inp01">email:</label><input type="text" id="inp01">18. 顏色的表示方式 1）顏色名 如red color:re

19、d; 2）rgb() 范圍0-255 red green blue 黑：rgb(0,0,0) 白：rgb(255,255,255) color:rgb(255,0,0) 3）十六進(jìn)制表示，如#fea230color:#ff0000; 4）十六進(jìn)制簡(jiǎn)寫(xiě)：#223344簡(jiǎn)寫(xiě)為 #234 color:#234;19. 背景圖片定位background-position:top right;簡(jiǎn)寫(xiě)：background:url("images/1.jpg") no-repeat top right;20.CSS3 陰影box-shadow:（inset內(nèi)陰影，省略為外陰影）水平偏移量

20、，垂直偏移量，陰影模糊度，陰影大小，陰影顏色box-shadow: 10px 10px 10px 10px black; （外陰影）box-shadow:inset 10px 10px 10px 10px black; （內(nèi)陰影）21. 偽類：被選中（被激活）.d01:active background: blue;22.先隱藏，鼠標(biāo)懸浮時(shí)顯示（隱藏的模塊必須被包含在懸停的模塊里）.d02 /*隱藏*/ display: none;.d01:hover .d02 /*顯示*/ display: block;<div class="d01"> <div cl

21、ass="d02"></div> </div>23. line-height:10px; /行高 /與height所設(shè)值相同時(shí)，文字垂直居中24.塊級(jí)元素：與同級(jí)元素豎直排列，且左右撐滿 如：div ul li p dd dt dl行級(jí)元素：與同級(jí)元素橫向排列，且內(nèi)容自適應(yīng)，不會(huì)左右撐滿 如：span a img input span a：寬高不能改變 img input：寬高能改變（特例）標(biāo)準(zhǔn)流static：css規(guī)定的默認(rèn)的塊級(jí)元素與行級(jí)元素的排列方式display: block; 將當(dāng)前元素轉(zhuǎn)換為塊級(jí)元素display: inline;

22、將當(dāng)前元素轉(zhuǎn)換為行級(jí)元素display: inline-block; 行級(jí)塊元素25.display 與 visibility區(qū)別？display 不占用空間（后元素補(bǔ)位） visibility 占用空間（保留原元素空間） display: none; /隱藏 display: block; /顯示 visibility: hidden; /隱藏 visibility: visible; /顯示26.浮動(dòng) float:left; float:right; 1)浮動(dòng)的元素會(huì)脫離標(biāo)準(zhǔn)流 2)如前面有浮動(dòng)元素，會(huì)依次排在后面 3)浮動(dòng)是以標(biāo)準(zhǔn)流所在位置為起始點(diǎn) 4)同高度元素橫向排滿后，會(huì)被“擠”到

23、下面 5)不同高度元素橫向排滿后，擠下后會(huì)被其他元素“卡”住 6)清除浮動(dòng)：clear:both/left/right; 7)一個(gè)div的范圍是由它里面的標(biāo)準(zhǔn)流決定的，與里面浮動(dòng)的內(nèi)容無(wú)關(guān)27.絕對(duì)定位 1)position: absolute; left right top bottom 2)對(duì)定位脫離標(biāo)準(zhǔn)流 3)絕對(duì)定位的元素是以它最近的一個(gè)已經(jīng)定位的祖先元素為基準(zhǔn)進(jìn)行偏移 如果沒(méi)有已經(jīng)定位的祖先元素，則會(huì)以瀏覽器窗口為基準(zhǔn)進(jìn)行偏移 4)多個(gè)元素絕對(duì)定位，后面定位的元素的層級(jí)會(huì)高于前面（覆蓋之前的元素） 5)z-index 設(shè)定層級(jí)28.相對(duì)定位 1)position: relative;

24、 left right top bottom 2)相對(duì)定位不脫離標(biāo)準(zhǔn)流 3)相對(duì)定位元素會(huì)相對(duì)于它原來(lái)的位置進(jìn)行偏移，不受父元素影響 /相對(duì)定位、絕對(duì)定位允許負(fù)值 /相對(duì)定位、絕對(duì)定位對(duì)浮動(dòng)元素依然有效29. position:static; 恢復(fù)標(biāo)準(zhǔn)流30. <!-選項(xiàng)卡特效-><style>.tab1_content display: none;.tab1:hover .tab1_content display: block;<style><div class="tab1"> tab1 <div </div&g

25、t;31.<!-列表->列表類型list-style-type: circle;空心list-style-type: disc;實(shí)心list-style-type: square;實(shí)心正方形list-style-type: decimal;數(shù)字list-style-type: decimal-leading-zero；零開(kāi)頭的數(shù)字標(biāo)記list-style-type: lower-roman;小寫(xiě)羅馬list-style-type: upper-roman;大寫(xiě)羅馬列表縮進(jìn)list-style-position: inside;列表圖片list-style-image: url(&q

26、uot;images/1.jpg");簡(jiǎn)寫(xiě) 順序不能改變list-style:circle inside url("images/1.jpg");取消樣式list-style: none;<!-無(wú)序列表-><ul> <li>a111111111</li> <li>a222222222</li> <li>a333333333</li></ul><!-有序列表-><ol> <li>b111111111</li> &

27、lt;li>b222222222</li> <li>b333333333</li></ol><!-定義列表-><dl> <dt>計(jì)算機(jī)圖書(shū)</dt> <dd>css計(jì)算</dd> <dd>java應(yīng)用</dd> <dt>幼兒圖書(shū)</dt> <dd>365故事</dd> <dd>唐詩(shī)300</dd></dl>32.固定定位 1)position: fixed; le

28、ft right top bottom 2)固定定位脫離標(biāo)準(zhǔn)流（只有相對(duì)定位不脫離標(biāo)準(zhǔn)流） 3)固定定位元素是以瀏覽器窗口或其他顯示設(shè)備窗口為基準(zhǔn)進(jìn)行偏移 4)固定定位對(duì)浮動(dòng)元素依然有效33.盒子模型34. 盒子模型一.標(biāo)準(zhǔn)模式（嚴(yán)格模式strictmode）:瀏覽器按w3c標(biāo)準(zhǔn)解析執(zhí)行代碼怪異模式（兼容模式quirkmode）:使用瀏覽器自己的方式解析執(zhí)行代碼 由于不同瀏覽器解析執(zhí)行的方式不同 所以稱之為怪異模式二.如何檢測(cè)當(dāng)前執(zhí)行模式alert(patMode);輸出：css1compat 標(biāo)準(zhǔn)模式 backcompat 怪異模式 (ie盒子模型：實(shí)際寬度=width+margin)？三.

29、標(biāo)準(zhǔn)模式與怪異模式的區(qū)別標(biāo)準(zhǔn)模式：實(shí)際寬度=width+border+padding+margin怪異模式：實(shí)際寬度=width+border+margin 注意：ie6ie7ie8在怪異模式下會(huì)以此方式顯示 其他高級(jí)瀏覽器在怪異模式下依然以標(biāo)準(zhǔn)模式顯示 實(shí)際寬度=width+border+margin4. 如何區(qū)別？ 1.html5：有<!DOCTYPE html>表示為 標(biāo)準(zhǔn)模式 2.html4： (1)<!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01/EN /TR/html4/loose.dt

30、d"> (2)<!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN /TR/html4/strict.dtd"> (3)<!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Frameset/EN /TR/html4/frameset.dtd">五.border：占用空間outline:不占用空間CSS框模型（Box Model）規(guī)定了元素框處理元素 內(nèi)容、

31、內(nèi)邊框、邊框、外邊框 的方式六.html結(jié)構(gòu)css表現(xiàn)35.html框架 <!-過(guò)時(shí)-><frameset cols="20%,80%"> <!-列-><frame></frameset><frameset rows="20%,80%"> <!-行-><frame></frameset><frame>定義name 使超鏈接在定義mane的另一個(gè)模塊中打開(kāi)36.內(nèi)聯(lián)框架<a href="images/2.jpg"

32、 target="if1name">圖片1</a><a href="test15.html" target="if1name">網(wǎng)頁(yè)2</a><!-內(nèi)聯(lián)框架-><iframe src="images/1.jpg" class="if1" name="if1name"></iframe>兩個(gè)超鏈接點(diǎn)擊后在名為if1name的內(nèi)聯(lián)框架中顯示37.<!-固定寬度布局-> <style&g

33、t; 1)浮動(dòng)法 .header,.footer,.container margin:0 auto; .header,.footer width: 400px; height: 50px; border: 1px solid #ff0000; float: left; .container width: 400px; height: 250px; .content width: 298px; height: 248px; border: 1px solid #ff0000; float: left; .side width: 98px; height: 248px; border: 1px s

34、olid #ff0000; float: right; 2)定位法 .header,.footer,.container margin:0 auto; .header,.footer,.container width: 400px; height: 50px; border: 1px solid #ff0000; position: relative; top:50px; .container width: 400px; height: 250px; position: relative; top:50px; .content width: 298px; height: 248px; bord

35、er: 1px solid #ff0000; position: absolute; top:0px; left:0px; .side width: 100px; height: 248px; border: 1px solid #ff0000; position: absolute; top:0px; left:300px; 3)display法（table法） .header,.footer,.container margin:0 auto; .header,.footer width: 400px; height: 50px; border: 1px solid #ff0000; .co

36、ntainer width: 400px; height: 250px; border: 1px solid #ff0000; display: table; .content border: 1px solid #ff0000; display: table-cell; .side border: 1px solid #ff0000; display: table-cell; </style></head><body><div class="header"></div><div class="container"> <