收藏
批改狀態(tài)：合格
老師批語(yǔ)：視頻看得很認(rèn)真, 作業(yè)寫(xiě)得不錯(cuò)
1.實(shí)例演示:<iframe>標(biāo)簽的使用
iframe標(biāo)簽規(guī)定一個(gè)內(nèi)聯(lián)框架，作用是文檔中的文檔，或者浮動(dòng)的框架（FRAME），iframe元素會(huì)創(chuàng)建包含另外一個(gè)文檔的內(nèi)聯(lián)框架（即行內(nèi)框架）
<ul> <li><a href="1.html" target="name1">豬哥的博客</a></li> </ul> <iframe name="name1" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567491489703&di=185702fb6ecf86db01dcad47d25695a6&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F9c16e7ba74a8638e24a344326795bd4f967a661151244-Hdnn39_fw658" frameborder="0" width=100%; height=80%;></iframe> <!-- frameborder邊框顯示方式,屬性取值1-有邊框,0-無(wú)邊框. width顯示的寬度,height顯示的高度 -->
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
2.實(shí)例演示: css樣式設(shè)置的優(yōu)先級(jí)
優(yōu)先級(jí)內(nèi)聯(lián)樣式 > 內(nèi)部樣式 >外部樣式(如果外部樣式寫(xiě)在內(nèi)部樣式的下面,那么外部樣式會(huì)覆蓋內(nèi)部樣式)
<link rel="stylesheet" href="style1.css">
<style>
p {
color: blue;
}
</style>
<!-- <link rel="stylesheet" href="style1.css"> -->
</head>
<body>
<p style="color: red; ">CSS是什么? 層疊樣式表,用來(lái)設(shè)置HTML元素在文檔中的布局與顯示方式</p>
<!-- 這是內(nèi)聯(lián)樣式 -->
<p>CSS的引入方式分為內(nèi)聯(lián)樣式,內(nèi)部樣式,外部樣式</p>
<p>優(yōu)先級(jí)內(nèi)聯(lián)樣式 > 內(nèi)部樣式 >外部樣式(如果外部樣式寫(xiě)在內(nèi)部樣式的下面,那么外部樣式會(huì)覆蓋內(nèi)部樣式)</p>
</body>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
3. 實(shí)例演示: css的id, class與標(biāo)簽選擇器的使用規(guī)則
標(biāo)簽選擇器優(yōu)先級(jí): 標(biāo)簽 < class < id < js
<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 {
color: blue;
}
#red {
color: red;
}
.green {
color: green;
}
</style>
</head>
<body>
<!-- 3. 實(shí)例演示: css的id, class與標(biāo)簽選擇器的使用規(guī)則
標(biāo)簽選擇器優(yōu)先級(jí): 標(biāo)簽 < class < id < js -->
<p>標(biāo)簽選擇器</p>
<p id="red">id選擇器</p>
<p class="green">class類(lèi)選擇器</p>
<p id="red" class="green">class類(lèi)選擇器</p>
</body>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
4. 實(shí)例演示盒模型的五大要素: width, height, padding, border, margin(margin可暫忽略)
<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_class {
width: 200px;
height: 200px;
border: 1px solid yellow;
padding: 0px 95px 00px 00px;
background-color: red;
}
.div_class1 {
width: 200px;
height: 200px;
border: 1px solid yellow;
padding: 10px 20px 20px 10px;
background-color: red;
}
#div_blue {
width: 300px;
height: 300px;
border: 1px solid black;
background-color: cornflowerblue;
}
div {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: green;
}
</style>
</head>
<body>
<!-- 4. 實(shí)例演示盒模型的五大要素: width, height, padding, border, margin(margin可暫忽略) -->
<div id="div_blue">
<div class="div_class">
<div></div>
</div>
</div>
</body>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
總結(jié): 萬(wàn)物皆盒子.
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)