收藏
批改狀態(tài)：合格
老師批語：寫得真不錯, 總結(jié)也到位
1.實例演示:<iframe>標(biāo)簽的使用
備注：應(yīng)用在后臺的制作比較多。
<!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> </head> <body> <h3><a href="https://www.baidu.com/" target="baidu">百度</a></h3> <iframe src="" frameborder="1" name="baidu" width="200" height="300"></iframe> <!-- 核心的地方在iframe的name屬性對應(yīng)了前面a標(biāo)簽里的target屬性，這樣就可以實現(xiàn)畫中畫的打開方式 --> </body> </html>
點擊 "運(yùn)行實例" 按鈕查看在線實例
2. 實例演示: css樣式設(shè)置的優(yōu)先級
元素的css樣式優(yōu)先級：內(nèi)聯(lián)樣式 > 內(nèi)部樣式 > 外部樣式
<!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>
<link rel="stylesheet" href="css/style.css"> <!--這里只做對比說明 -->
<style>
p{color: darkblue}
</style>
</head>
<body>
<p style="color: darkgoldenrod">這是一個文本</p>
<p>這是一個文本</p>
<!-- 元素的css樣式優(yōu)先級：內(nèi)聯(lián)樣式 > 內(nèi)部樣式 > 外部樣式 -->
</body>
</html>點擊 "運(yùn)行實例" 按鈕查看在線實例
3. 實例演示: css的id, class與標(biāo)簽選擇器的使用規(guī)則
<!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>
<link rel="stylesheet" href="css/style.css"> <!--這里只做對比說明 -->
<style>
#blue{color:blue;}
.color{color:red;}
p{color:darkgreen}
</style>
</head>
<body>
<p id="blue">這是一個文本,使用ID設(shè)置css樣式</p>
<p class="color">這是一個文本，使用class設(shè)置樣式</p>
<p>這是一個文本，使用標(biāo)簽設(shè)置樣式</p>
</body>
</html>點擊 "運(yùn)行實例" 按鈕查看在線實例
4. 實例演示盒模型的五大要素: width, height, padding, border, margin(margin可暫忽略)
<!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>
<link rel="stylesheet" href="css/style.css">
<!--這里只做對比說明 -->
<style>
.box_1 {
width: 260px;
/*因為使用了padding，所以寬度需要減去20*2的長度，才是真正的300px */
height: 180px;
/*因為使用了padding，所以高度需要減去10*2的長度，才是真正的200px */
background: darkslateblue;
margin: 10px;
padding: 10px 20px;
}
.box_2 {
width: 220px;
/*因為使用了padding，所以寬度需要減去20*2的長度，才是真正的260px */
height: 160px;
/*因為使用了padding，所以高度需要減去10*2的長度，才是真正的180px */
background: rgb(5, 236, 63);
padding: 10px 20px;
}
</style>
</head>
<body>
<div class="box_1">
<div class="box_2"></div>
</div>
</body>
</html>點擊 "運(yùn)行實例" 按鈕查看在線實例
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號