收藏
批改状态：合格
老师批语：关于盒模型, 目前先掌握 这些, 今晚会学到一些更加有意思的东西
1、<iframe>标签的使用
<ul> <li><a href="https://www.sohu.com" target="main">搜狐</a></li> <li><a href="https://www.sina.com.cn" target="main">新浪</a></li> <li><a href="https://www.baidu.com" target="main">百度</a></li> </ul> <iframe width="600" height="500" name="main"></iframe>
点击 "运行实例" 按钮查看在线实例
2、css样式设置的优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css样式设置的优先级</title>
<style>
#content-id {
color: red;
}
.content-class {
color: blue;
}
div {
color: grey;
}
</style>
</head>
<body>
<div class="content-class" id="content-id" style="color: black">css样式设置的优先级</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
3、 css的id, class与标签选择器的使用规则
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义，class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css的id, class与标签选择器的使用规则</title>
<style>
#para
{
text-align:right;
color:red;
}
.para1
{
text-align:center;
color:blue;
}
</style>
</head>
<body>
<p id="para">Hello World!</p>
<p class="para1">这个段落不受该样式的影响。</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
4、盒模型的五大要素
盒模型的五大要素：width（宽度）, height（高度）, padding（内边距）, border（边框）, margin（外边距）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒模型的五大要素</title>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: lightblue;
border: 1px solid red;
padding: 20px,30px;
margin: 40px,50px;
}
.box2 {
width: 100px;
height: 100px;
background-color: yellow;
border: 1px solid green;
padding: 10px,20px;
margin: 30px,40px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
