收藏
批改狀態(tài)：合格
老師批語：通過檢查器來學習前端, 是一種比較高級的技巧, 恭喜你
iframe 的使用案例
可以配合a標簽使用，iframe的name屬性和a標簽的target屬性保持一致便可。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>內聯(lián)框架標簽</title> </head> <body> <!--內聯(lián)框架：在當前頁面中，加載另一個頁面--> <!--<h1>內聯(lián)框架的演示</h1>--> <h1>網(wǎng)站管理后臺</h1> <ul> <li><a href="demo01.html" target="mamin">用戶管理</a></li> <li><a href="demo02.html" target="mamin">分類管理</a></li> <li><a href="demo03.html" target="mamin">商品管理</a></li> </ul> <iframe srcdoc="<h2>cms歡迎你<h2>" frameborder="1" name="mamin" style="width: 500px;height: 500px;"></iframe> </body> </html>
點擊 "運行實例" 按鈕查看在線實例
css的樣式優(yōu)先級，以及選擇的優(yōu)先級和應用
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>常用的塊級容器</title>
<!--外鏈樣式表-->
<link rel="stylesheet" href="democss.css">
<style>
/*將元素的樣式規(guī)則用style標簽插入到當前的html文檔中，只適用于當前頁面（內部樣式/文檔樣式）*/
p {
/*桃紅色*/
color: mediumvioletred;
}
.p_css {
color: #008856;
/*綠色*/
}
#p_css {
/*藍色*/
color: deepskyblue;
}
#p_css2 {
/*藍色*/
color: deepskyblue;
}
</style>
</head>
<body>
<p style="color: red" id="p_css2">我是第一個段落,我層級最高</p>
<p class="p_css" id="p_css">我是第二個段落,我層級第二</p>
<p class="p_css">我是第三個段落，我層級第三</p>
<p>我是第四個段落，我層級最低</p>
<div class="p_css p_yinyong">我是個盒子1</div>
<div class="p_yinyong">我是個盒子2</div>
</body>
</html>點擊 "運行實例" 按鈕查看在線實例
小結：可以得出結論 行內樣式>（id選擇器>類選擇器>標簽選擇器）內部樣式>外鏈式樣式
盒模型的5要素演示
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>一切結盒子</title> <!--外鏈樣式表--> <link rel="stylesheet" href="democss.css"> </head> <body> <div class="div1"> <div class="div2"> </div> </div> </body> </html>
點擊 "運行實例" 按鈕查看在線實例
democss.css文件樣式
.div1 {
width: 500px;
height: 500px;
border: 1px solid red;
background-color: pink;
/*padding: 20px;*/
}
.div2 {
width: 200px;
height: 200px;
border: 1px solid blue;
background-color: deepskyblue;
margin: 100px 50px 50px 50px;
}點擊 "運行實例" 按鈕查看在線實例
由此可以看出，盒子的寬高是構成盒子的基本屬性,而border邊框是實體的，會影響盒子本身的外形大小和位置關系，padding邊距，會改變盒子本身的大小，并且改變盒子內部元素的位置。margin內邊距，只會相對的影響盒子本身相對外面父盒子的位置而不會改變盒子自己或父盒子的大小.
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號
