收藏
批改狀態(tài)：合格
老師批語：盒模型是所有布局模式的基礎(chǔ)
一、<iframe>的使用
<p><a href="https://www.baidu.com" target="main">我要打開百度</a></p> <p><a href="https://www.taobao.com" target="main">我要打開淘寶網(wǎng)</a></p> <iframe frameborder="1" name="main" width="600" height="600"></iframe>
點擊 "運(yùn)行實例" 按鈕查看在線實例
二、css樣式優(yōu)先級
<!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="demo.css">
<style type="text/css">
p {
color: red;
}
</style>
</head>
<body>
<p style="color: green;">一顆小草</p>
<p>一顆小花</p>
<p style="color: green;">一棵樹木</p>
</body>
</html>點擊 "運(yùn)行實例" 按鈕查看在線實例
三 、css的id、class、標(biāo)簽選擇器的使用
<!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 type="text/css">
p {
color: red;
}
#xiaocao {
color: green;
}
.shumu {
color: blue;
}
</style>
</head>
<body>
<p id="xiaocao">一顆小草</p>
<p>一顆小花</p>
<p class="shumu">一棵樹木</p>
</body>
</html>點擊 "運(yùn)行實例" 按鈕查看在線實例
四、盒模型
<!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 type="text/css">
div {
width: 100px;
height: 100px;
background-color: green;
padding: 5px;
margin: 10px;
border: 2px solid red;
}
</style>
</head>
<body>
<div>我是盒子模型</div>
</body>
</html>點擊 "運(yùn)行實例" 按鈕查看在線實例
效果圖如下
總結(jié)
1、iframe就是一個加載資源的顯示窗口，主要屬性有src、name。關(guān)鍵的是name屬性，用來設(shè)置框架加載的主體為哪個元素的。
2、css引入方式有三種，外部樣式表、內(nèi)部樣式、行內(nèi)樣式。外部樣式表需要<link>標(biāo)簽引入，內(nèi)部樣式需要在<style>標(biāo)簽書寫，行內(nèi)樣式就是在標(biāo)簽加入style屬性書寫。
3、css樣式的優(yōu)先級，常見的id>class>標(biāo)簽選擇器。
4、盒模型對于css很重要，盒模型主要由content、width、height、padding、margin、border組成，padding、margin、border都可以繼續(xù)劃分，padding在設(shè)置的時候是分padding-top、padding-right、padding-bottom、padding-left，margin設(shè)置時候也區(qū)分margin-top、margin-right、margin-bottom、margin-left，border在設(shè)置的時候一般簡寫為 border: 1px solid red; 分別設(shè)置的是邊框的width、style、color，單邊寫法為border-top-width: 1px; border-top-style: solid; border-top-color: red; 右邊框、底邊框、左邊框依次類推。
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號