收藏
批改狀態(tài)：合格
老師批語：作業(yè)寫得真不錯, 完全符合我的預(yù)期, 不錯, 堅(jiān)持下去呀
HTML內(nèi)聯(lián)框架標(biāo)簽 常用于后臺管理
<iframe src="" frameboeder=“邊框大小”name="屬性值與target對應(yīng)"></iframe>
<a href="http://www.baidu.com/" target="對應(yīng)的name屬性值" ></a>
iframe標(biāo)簽可設(shè)置寬帶width 高度height 屬性默認(rèn)值srcdoc=“”
<iframe src="網(wǎng)站網(wǎng)址" frameboeder=“邊框大小” name="屬性值需與target對應(yīng)"></iframe> <a href="http://www.baidu.com/" target="與name對應(yīng)屬性值iframe標(biāo)簽可設(shè)置寬帶width 高度height 屬性默認(rèn)值srcdoc=“”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>iframe標(biāo)簽的使用</title> </head> <body> <div> <ul> <li><a href="http://www.kp980.com/dianying/dengyuediyiren/" target="video">登月第一人</a></li> <li><a href="http://www.kp980.com/dianying/vzichoushadui/" target="video">V字仇殺隊(duì)</a></li> <li><a href="http://www.kp980.com/dianying/heianta/" target="video">黑暗塔</a></li> <li><a href="http://www.kp980.com/dianying/yongganzheyouxi_juezhanconglin/" target="video">勇敢者游戲</a></li> <li><a href="http://www.kp980.com/dianying/zuihoudewushilieren/" target="video">最后的巫師獵人</a></li> </ul> <iframe srcdoc="<h3>默認(rèn)播放器</h3>" frameborder="1" name="video" width="1280" height="960"></iframe> </div> </body> </html>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
CSS基礎(chǔ)總結(jié) 層疊樣式表
CSS設(shè)置HTML元素在文檔中的布局與顯示方式
CSS必須用標(biāo)簽引入HTML
基本語法
整一個(gè)為樣式聲明
p{ /*p為選擇題*/
color:red;
font-size:18px; →樣式規(guī)則
}1.在標(biāo)簽用屬性來設(shè)置元素的樣式(內(nèi)聯(lián)樣式)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS樣式及優(yōu)先級</title> </head> <body> <div> <div style="background-color:yellow;color:red;width: 200px;height: 200px;">內(nèi)聯(lián)樣式</div> </div> </body> </html>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
2. 內(nèi)部樣式: style標(biāo)簽 放在head標(biāo)簽里（僅對當(dāng)前html文檔有效）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS樣式及優(yōu)先級</title>
<style>
p{
background-color: black;
color:green;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div>
<!-- <div style="background-color:yellow;color:red;width: 200px;height: 200px;">內(nèi)聯(lián)樣式</div> -->
<p>內(nèi)部樣式</p>
</div>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
3.外聯(lián)樣式：在文檔的頭部用link標(biāo)簽以外部鏈接的方式引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS樣式及優(yōu)先級</title>
<!-- <link rel="stylesheet" href="css樣式表"> -->
<!-- 假裝此處是外部樣式表 -->
<style>
p{
background-color: red;
color:green;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div>
<!-- <div style="background-color:yellow;color:red;width: 200px;height: 200px;">內(nèi)聯(lián)樣式</div> -->
<p>外部樣式</p>
</div>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
CSS樣式優(yōu)先級
內(nèi)聯(lián)樣式>內(nèi)部樣式>外部樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css樣式及優(yōu)先級</title>
<link rel="stylesheet" href="style.css">
<style>
div{
background-color:black;
color: green;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div style="background-color:blue;color:#fff;width: 200px;height: 200px;">內(nèi)部樣式</div>
<div>內(nèi)聯(lián)樣式</div>
<div>外聯(lián)樣式</div>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
CSS選擇器優(yōu)先級
優(yōu)先級: id > class > tag*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS樣式優(yōu)先級1</title>
<style>
div{
background-color: black;
color: red;
width: 200px;
height: 200px;
}
#blue{
background-color: blue;
color: black;
width: 200px;
height: 200px;
}
.green{
background-color: green;
color:blue;
width:200px;
height: 200px;
}
</style>
</head>
<body>
<div>
<div id="blue">
id選擇器
</div>
<div>標(biāo)簽選擇器</div>
<div class="green">類選擇器</div>
</div>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
CSS樣式規(guī)則與盒模型
按順時(shí)針 上右下左排列
（透明，只有寬度屬性）內(nèi)邊距padding-top right bottom left
（透明，只有寬度屬性）外邊距margin-top right bottom left
（不透明，寬度，樣式，前景色）邊框 border-top right bottom left
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號