HTML学习*3
HTML學習*3
- 第一部分
- 1.嵌套列表
- 2.表格標簽
- 3.表格屬性
- 4.表單input標簽
- 5.表單相關標簽
- 6.表格表單組合實例
- 7.div與span
- 第二部分
- 1.CSS語法格式
- 2.CSS的引入方式
- 3.CSS顏色表示法
- 4.背景樣式
- 5.背景實現視覺差效果
- 6.邊框樣式
- 7.邊框實現三角形
- 8.CSS文字樣式
- 9.字體大小粗細樣式
- 10.文本修飾和文本大小寫
- 11.文本縮進和文本對齊
- 12.文本的行高
- 13.文本間距與英語折行
- 14.文本與段落實現個人案例
- 15.CSS復合樣式
- 15.id選擇器以及注意事項
- 16.class選擇器以及注意事項
第一部分
1.嵌套列表
列表之間可以互相嵌套，形成多層級的列表。
代碼展示
效果演示
2.表格標簽
<table> ：表格的最外層容器 <tr> ：定義表格行 <th> ：定義表頭 <td> ：定義表格單元 <caption> ：定義表格標題 語義化標簽：<tHead> <tBody> <tFood>代碼展示
<!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>Document</title> </head><body><table><caption>天氣預報</caption><tHead><tr><th>日期</th><th>天氣情況</th><th>出行情況</th></tr></tHead><tBody><tr><td>2022年10月23日</td><td><img src="./img/c407f8d96a1243cc.png" alt=""></td><td>天氣晴朗，適合出行</td></tr><tr><td>2022年10月24日</td><td><img src="./img/dae4a8054fc29ba9a6523b0a91a77335.jpeg" alt=""></td><td>有小雨，記得帶傘</td></tr></tBody><tFood></tFood></table> </body></html>效果演示
注意：在一個table中，tBody是可以多次出現的，但是tHead，tFood只能出現一次。
3.表格屬性
border：表格邊框
cellpadding：單元格內的空間
cellspacing：單元格之間的空間
rowspan：合并行
colspan：合并列
align：左右對齊方式（left，center，right）
valign：上下對齊方式（top，middle，bottom）
代碼演示：
效果演示
4.表單input標簽
<form>:表單的最外層容器<input>:標簽用于搜集用戶信息，根據不同的type屬性值，展示不同的控件，如輸入框，密碼框，復選框等。type屬性：1.text 普通的文本輸入框2.password 密碼輸入框3.checkbox 復選框4.radio 單選框5.file 上傳文件6.submit 提交按鈕7.reset 重置按鈕注意：input為單標簽
代碼演示
效果演示
5.表單相關標簽
<textarea>:多行文本框 <select>,<option>:下拉菜單 <label>:輔助表單提升體驗代碼演示
<!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>Document</title> </head> <body><h2>多行文本框</h2><textarea cols="30" rows="10"></textarea><h2>下拉菜單</h2><select><option selected disabled>請選擇</option><!--默認選擇--><option>北京</option><option>上海</option><option>三亞</option></select><select size="3"><!--size表示顯示多少--><option>北京</option><option>上海</option><option>三亞</option></select><select multiple><!--多選--><option>北京</option><option>上海</option><option>三亞</option></select><input type="file" multiple><input type="radio" name="oo" id="man"><label for="man">男</label><input type="radio" name="oo" id="woman"><label for="woman">女</label><!--擴大范圍--> </body> </html>效果演示
6.表格表單組合實例
代碼演示
<!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>Document</title> </head> <body><form action=""><table border="1" callpadding="30"><tBody><tr align="center"><td rowspan="4">總體信息</td><td colspan="2">用戶信息</td></tr><tr align="right"><td>用戶名：</td><td><input type="text" placeholder="請輸入用戶名"></td></tr><tr align="right"><td>密碼：</td><td><input type="password" placeholder="請輸入密碼"></td></tr><tr align="center"><td colspan="2"><input type="submit"> <input type="reset"></td></tr></tBody></table></form> </body> </html>7.div與span
DIV元素，是用來為HTML文檔內大塊（block-level）的內容提供結構和背景的元素。DIV的起始標簽和結束標簽之間的所有內容都是用來構成這個塊的，其中所包含元素的特性由DIV標簽的屬性來控制，或者是通過使用樣式表格式化這個塊來進行控制。
span標簽是超文本標記語言（HTML）的行內標簽，被用來組合文檔中的行內元素。span標簽通常使用來將文本的一部分或者文檔的一部分獨立出來，從而對獨立出來的內容設置單獨的樣式。span本身沒有任何屬性，也沒有固定的格式表現，當對它應用樣式時，它會產生視覺上的變化。
div : 做一個區域劃分的塊
span : 對文字進行修飾的內聯
代碼演示
效果演示
第二部分
1.CSS語法格式
選擇器 { 屬性1 : 值1 ; 屬性2 : 值2 }
width : 寬
height : 高
background-color : 背景色
長度單位 :
1. px -> 像素
2. % -> 百分比
外容器1 -> 600px 當前容器 50% -> 300px
外容器2 -> 400px 當前容器 50% -> 200px
注釋 /注釋/
代碼演示
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div{ width : 25% ; height : 100px ; background-color : red }span{ background-color:blue;} </style> </head> <body><div>這是一個塊</div><div>這是一個塊</div><span>這是一個內聯</span> </body> </html>效果演示
2.CSS的引入方式
style屬性
2. 內部樣式
style標簽
區別：
內部樣式的代碼可以復用、復合W3C的規范標準，進行讓結構和樣式分開處理。
3. 外部樣式
引入一個單獨的CSS文件，name.css
通過link標簽引入外部資源，rel屬性指定資源跟頁面的關系，href屬性資源的地址。
通過@import方式引入外部樣式 ( 這種方式有很多問題，不建議使用 )
代碼演示
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div{ width:100px;height:100px;background-color:red }</style> </head> <body><!-- <div style="width:100px;height:100px;background-color:red">這是一個塊</div><div style="width:100px;height:100px;background-color:red">另外一個塊</div> --><div>這是一個塊</div><div>另外一個塊</div> </body> </html>效果演示
代碼演示
效果演示
3.CSS顏色表示法
單詞表示法 : red blue green yellow …
十六進制表示法：#000000 #ffffff
0 1 2 3 4 5 6 7 8 9
0 1
0 1 2 3 4 5 6 7 8 9 a b c d e f
rgb三原色表示法：rgb(255,255,255);
取值范圍 0 ~ 255
獲取顏色的工具：
提取顏色的下載地址：https://www.baidufe.com/fehelper
photoshop工具
代碼演示
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div{ background-color:rgb(0,0,0); }</style> </head> <body><div>這是一個塊</div> </body> </html>效果演示
4.背景樣式
background-color 背景色
background-image 背景圖
url(背景地址)
默認：會水平垂直都鋪滿背景圖
background-repeat 平鋪方式
repeat-x x軸平鋪
repeat-y y軸平鋪
repeat ( x , y 都進行平鋪，默認值 )
no-repeat 都不平鋪
background-position : 背景位置
x y : number(px、%) | 單詞
x : left、center、right
y : top、center、bottom
background-attachment : 背景圖隨滾動條移動的方式
scroll : 默認值 ( 背景位置是按照當前元素進行偏移的 )
fixed ( 背景位置是按照瀏覽器進行偏移的 )
代碼演示
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body{ height : 2000px;}div{ width:1440px; height:800px; background-color :red; background-image:url(./img/c407f8d96a1243cc.png);background-repeat : no-repeat;background-position: 50% 50%;background-attachment: fixed;}</style> </head> <body><div></div> </body> </html>效果演示
5.背景實現視覺差效果
代碼展示
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>#div1{ width:1400px; height: 800px; background-image:url(./img/1.jpg); background-attachment: fixed;}#div2{ width:1400px; height: 800px; background-image:url(./img/2.jpg); background-attachment: fixed;}#div3{ width:1400px; height: 800px; background-image:url(./img/3.jpg); background-attachment: fixed;}table{ background-color:white;}</style> </head> <body><div id="div1"><table border="1" cellpadding="30" cellspacing="30"><caption>天氣預報</caption><tHead><tr align="right"><th colspan="2">日期</th><th>天氣情況</th><th>出行情況</th></tr></tHead><tBody><tr valign="top"><td rowspan="2">2019年1月1日</td><td>白天</td><td><img src="./img/tianqi_1.png" alt=""></td><td>天氣晴朗，適合出行</td></tr><tr><td>夜晚</td><td><img src="./img/tianqi_2.png" alt=""></td><td>天氣晴朗，適合出行</td></tr><tr valign="bottom"><td rowspan="2">2019年1月2日</td><td>白天</td><td><img src="./img/tianqi_1.png" alt=""></td><td>有小雨，出門請帶傘</td></tr><tr><td>夜晚</td><td><img src="./img/tianqi_2.png" alt=""></td><td>有小雨，出門請帶傘</td></tr></tBody><tFood></tFood></table></div><div id="div2">form action="http://www.baidu.com"><h2>多行文本框</h2><textarea cols="30" rows="10"></textarea><h2>下拉菜單</h2><select><option selected disabled>請選擇</option><option>北京</option><option>上海</option><option>杭州</option></select><select size="3"><option>北京</option><option>上海</option><option>杭州</option></select><select multiple><option>北京</option><option>上海</option><option>杭州</option></select><input type="file" multiple><input type="radio" name="gender" id="man"><label for="man">男</label><input type="radio" name="gender" id="woman"><label for="woman">女</label></form></div><div id="div3"><table border="1" cellpadding="30" cellspacing="30"><caption>天氣預報</caption><tHead><tr align="right"><th colspan="2">日期</th><th>天氣情況</th><th>出行情況</th></tr></tHead><tBody><tr valign="top"><td rowspan="2">2019年1月1日</td><td>白天</td><td><img src="./img/tianqi_1.png" alt=""></td><td>天氣晴朗，適合出行</td></tr><tr><td>夜晚</td><td><img src="./img/tianqi_2.png" alt=""></td><td>天氣晴朗，適合出行</td></tr><tr valign="bottom"><td rowspan="2">2019年1月2日</td><td>白天</td><td><img src="./img/tianqi_1.png" alt=""></td><td>有小雨，出門請帶傘</td></tr><tr><td>夜晚</td><td><img src="./img/tianqi_2.png" alt=""></td><td>有小雨，出門請帶傘</td></tr></tBody><tFood></tFood></table></div> </body> </html>效果演示
6.邊框樣式
border-style : 邊框樣式
solid : 實線
dashed : 虛線
dotted : 點線
border-width : 邊框大小
px …
border-color : 邊框顏色
red #f00 …
邊框也可以針對某一天邊進行單獨設置 : border-left-style : 中間是方向 left、right、top、bottom
顏色：透明顏色 transparent
代碼演示
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div{ width:300px; height:300px; border-right-style: dotted; border-right-width: 10px; border-right-color:green; border-top-style: solid; border-top-width: 10px; border-top-color:red;}</style> </head> <body><div></div> </body> </html>效果演示
7.邊框實現三角形
代碼演示
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body{ background-color:blueviolet;}div{ width:0px; height:0px;border-top-color: transparent;border-top-style:solid;border-top-width:30px;;border-right-color: red;border-right-style:solid;border-right-width:30px;;border-bottom-color: transparent;border-bottom-style:solid;border-bottom-width:30px;;border-left-color: transparent;border-left-style:solid;border-left-width:30px;;}</style> </head> <body><div></div> </body> </html>效果演示
8.CSS文字樣式
font-family : 字體類型
英文、中文
襯線體、非襯線體
注意點：
1.多個字體類型的設置目的
2.引號的添加的目的（有的字體中間有空格必須用）
代碼演示
效果演示
9.字體大小粗細樣式
font-size : 字體大小
默認 : 16px
寫法 : number(px) | 單詞 ( small large … 不推薦使用)
font-weight : 字體粗細
模式： 正常( normal ) 加粗 ( bold )
寫法：單詞(normal、bold) | number ( 100 200 … 900 , 100到500都是正常的，600都900都是加粗的 )
font-style : 字體樣式
模式： 正常 ( normal ) 斜體 ( italic )
寫法：單詞 ( normal 、 italic )
注：oblique也是表示斜體，用的比較少，一般了解即可。
區別：1.italic 帶有傾斜屬性的字體的才可以設置傾斜操作。
2.oblique 沒有傾斜屬性的字體也可以設置傾斜操作。
代碼演示
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>/* div{ font-family: 'Times New Roman';} *//* div{ font-family: SimSun;} *//* div{ font-family: 華文彩云 , 'Times New Roman' , SimSun , 微軟雅黑; } *//* div{ font-size : 30px;} *//* div{ font-weight: 600; } */div{ font-style:oblique; color:red;}</style> </head> <body><div>這是一段文字</div><p>這是一段文字</p><div>this is a text</div><p>this is a text</p> </body> </html>效果演示
10.文本修飾和文本大小寫
text-decoration：文本裝飾
下劃線 : underline
刪除線 :line-through
上劃線 : overline
不添加任何裝飾 : none
注：添加多個文本修飾：line-through underline overline
text-transform：文本大小寫 （ 針對英文段落 ）
小寫：lowercase
大寫：uppercase
只針對首字母大寫：capitalize
代碼演示
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>p{ width:300px; text-decoration: line-through underline overline;}P{ text-transform:capitalize;}</style> </head> <body><p>這是一個段落文字</p><p>kshkfhsdhkf nklwhdl lkelk fkSS</p> </body> </html>效果演示
11.文本縮進和文本對齊
text-indent : 文本縮進
首行縮進
em單位：相對單位，1em永遠都是跟字體大小相同
text-align : 文本對齊方式
對齊方式 : left 、right、center、justify（兩端點對齊）
代碼演示
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>/* p{ width:300px; text-decoration: line-through underline overline;} *//* P{ text-transform:capitalize;} *//* p{ text-indent : 2em; font-size:18px;} */p{ text-align:justify;}</style> </head> <body><p>的分解開來打開的健身卡覺得無聊的哦附件說的話開發環境回復的絕對符合凱撒而可憐的JFK冷靜思考了幾個空間可是的驕傲i啊我就哦發票金額構配件講哦對解放軍雖然構配件送皮膚就奧斯</p><p>dhjfauhfjkdsklfnasjdjl KKJKJ klsKJ</p> </body> </html>效果演示
12.文本的行高
line-height : 定義行高
什么是行高，一行文字的高度，上邊距和下邊距的等價關系。
默認行高：不是固定值，而是變化的。根據當前字體的大小再不斷的變化。
取值：1. number( px ) | scale ( 比例值 , 跟文字大小成比例的 )
代碼演示
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>/* p{ width:300px; text-decoration: line-through underline overline;} *//* P{ text-transform:capitalize;} *//* p{ text-indent : 2em; font-size:18px;} *//* p{ text-align:justify;} */p{ line-height: 2;}</style> </head> <body><p>的分解開來打開的健身卡覺得無聊的哦附件說的話開發環境回復的絕對符合凱撒而可憐的JFK冷靜思考了幾個空間可是的驕傲i啊我就哦發票金額構配件講哦對解放軍雖然構配件送皮膚就奧斯</p><p>dhjfauhfjkdsklfnasjdjl KKJKJ klsKJ</p> </body> </html>效果演示
13.文本間距與英語折行
letter-spacing : 字之間的間距
word-spacing : 詞之間的間距 ( 針對英文段落的 )
英文和數字不自動折行的問題：
1. word-break : break-all; (非常強烈的折行)
2. word-wrap : break-word;(不是那么強烈的折行 ，會產生一些空白區域)
代碼演示
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>/* p{ width:300px; text-decoration: line-through underline overline;} *//* P{ text-transform:capitalize;} *//* p{ text-indent : 2em; font-size:18px;} *//* p{ text-align:justify;} *//* p{ line-height: 2;} *//* p{ word-spacing: 10px;} */div{ width:300px; height:300px; border:1px solid red; word-break : break-all;}</style> </head> <body><p>的分解開來打開的健身卡覺得無聊的哦附件說的話開發環境回復的絕對符合凱撒而可憐的JFK冷靜思考了幾個空間可是的驕傲i啊我就哦發票金額構配件講哦對解放軍雖然構配件送皮膚就奧斯</p><p>dhjf 111111111111111111111111 auhfjkdsklfnasjdjl KKJKJ klsKJ</p><div> dhjf 111111111111111111111111 auhfjkdsklfnasjdjl KKJKJ klsKJ</div> </body> </html>效果演示
14.文本與段落實現個人案例
代碼實現
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div{ width:800px;}h1{ text-align:center; color:#ff6600;}h2{ color:#00a0ff; text-indent: 2em;}#p1{ font-style:italic; font-weight: bold; text-indent: 2em;}#p2{ color:#66ff00; line-height: 30px; text-indent: 2em;}#p3{ color:#00ffff; line-height: 30px; text-indent: 2em; text-decoration: underline; font-style:italic;}#p4{ font-weight: bold; letter-spacing: 10px; line-height: 30px; text-indent: 2em;}#p5{ color:#cc00cc; line-height: 30px; text-indent: 2em;}</style> </head> <body><div><h1>Angelababy簡介</h1><h2>基本信息</h2><p id="p1">楊穎（Angelababy），1989年2月28日出生于上海，13歲時移居香港，中國影視女演員。</p><p id="p2"> 2009年主演電影《全城熱戀》。2012年，憑借愛情片《第一次》獲得第十三屆華語電影傳媒大獎“最受矚目女演員獎”。2013年1月，《南都娛樂周刊》舉辦新生代四小花旦的評選活動，楊穎以總分70分的綜合得分與劉詩詩、楊冪、倪妮共同當選為新一代“四小花旦”；同年在徐克導演的影片《狄仁杰之神都龍王》中擔任女主角，并且獲得第21屆北京大學生電影節最受歡迎女演員獎；4月，Angelababy主演電視劇《大漢情緣之云中歌》。2014年加盟綜藝節目《奔跑吧兄弟》并主演電影版；同年主演顧長衛導演的電影《微愛之漸入佳境》，票房突破2.8億。2015年5月參演好萊塢電影《獨立日2》；7月，主演電影《擺渡人》。</p><h2>早年經歷</h2><p id="p3"> 1989年2月28日，Angelababy出生在上海，中文名楊穎。楊穎自小隨家人到上海定居，在上海的演藝學校學演戲及跳舞。13歲時，楊穎回香港加入了Talent Bang，還擔任Viva Club Disney主持。</p><h2>個人生活</h2><p id="p4"> 2015年5月27日，黃曉明和Angelababy（楊穎）在青島民政局領證完婚。</p><p id="p5"> 2015年10月8日，黃曉明和Angelababy在上海展覽中心正式舉辦婚禮。上午8點，Angelababy工作室曝光了一兩人的婚紗照，照片中，兩人以巴黎地標建筑為背景，浪漫親吻。</p></div></body> </html>效果演示
15.CSS復合樣式
復合的寫法，是通過空格的方式實現的。復合寫法有的是不需要關心順序，例如background、border；有的是需要關心順序，例如font。
1. background : red url() repeat 0 0;
2. border : 1px red solid;
3. font :
注：最少要有兩個值 size family
weight style size family √
style weight size family √
weight style size/line-height family √
注：如果非要混合去寫的話，那么要先寫復合樣式，再寫單一樣式，這樣樣式才不會被覆蓋掉。
代碼演示
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div{ width:300px; height:300px; background : url(../img/dae4a8054fc29ba9a6523b0a91a77335.jpeg) no-repeat center center;background-color : red; /* border : 2px black solid; */border-right : dashed 2px blue;font : bold italic 30px/100px 宋體;}</style> </head> <body><div>這是一段文字</div> </body> </html>效果演示
15.id選擇器以及注意事項
ID選擇器
#elem{} id=“elem”
注：
1. ID是唯一值，在一個頁面中只能出現一次，出現多次是不符合規范的。
2. 命名的規范，由字母、下劃線、中劃線、字母（并且第一個不能是數字）
3. 駝峰寫法 : searchButton (小駝峰) SearchButton (大駝峰) searchSmallButton
短線寫法：search-small-button
下劃線寫法：search_small_button
代碼演示
<!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>Document</title><style>#iu{background: blue;}#iuu{background: red;}</style> </head> <body><div id="iu">蕪湖蕪湖</div><div id="iuu">阿宅正傳</div> </body> </html>效果演示
16.class選擇器以及注意事項
.elem{} class=“elem”
注：
1. class選擇器是可以復用的。
2. 可以添加多個class樣式。
3. 多個樣式的時候，樣式的優先級根據CSS決定，而不是class屬性中的順序。
4. 標簽+類的寫法
代碼演示
<!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>Document</title><style>.op{ background: red;}.ok{background-color: blue;}</style> </head> <body><div id="iu">蕪湖蕪湖</div><div id="iuu">阿宅正傳</div><div class="op ok">后劃時代的</div><div class="op">pppppppp</div> </body> </html>效果演示
總結
- 上一篇： 如何开机进入grub界面_电脑开机出现g
- 下一篇： HTML的文章结构