收藏
批改状态：未批改
老师批语：
写一个案例， 演示css中的选择器优先级(忽略js)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
h1 {
background-color: yellowgreen;
}
.id{
background-color: aquamarine;
}
#id{
background-color: blueviolet;
}
</style>
<h1 id="" class="" title="" style="">标签颜色选择器</h1>
<h1 id="" class="id" title="" style="">class颜色选择器</h1>
<h1 id="id" class="id" title="" style="">id颜色选择器</h1>
<h1 id="id" class="id" title="" style="background-color: brown">style颜色选择器</h1>
</body>
</html>点击 "运行实例" 按钮查看在线实例
写一个盒模型的简单案例，体会padding/border的简写规则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒模型</title>
</head>
<body>
<style>
.h1{
width: 500px;
height: 300px;
}
.h2{
width: 500px;
height: 300px;
}
.a1{
width: 200px;
height: 200px;
background-color: blueviolet;
padding-top: 20px;
padding-right: 4px;
padding-bottom: 10px;
padding-left: 10px;
margin-top: auto;
margin-right: 5px;
margin-bottom: 5px;
margin-left: auto;
}
.a2{
width: 200px;
height: 200px;
background-color: green;
padding:20px 4px 10px 10px;
margin: auto 5px;
}
.b1{
width: 200px;
height: 200px;
border-top-width: 10px;
border-top-style: solid;
border-top-color: pink;
border-right-width: 10px;
border-right-style: solid;
border-right-color: pink;
border-bottom-width: 10px;
border-bottom-style: solid;
border-bottom-color: pink;
border-left-width: 10px;
border-left-style: solid;
border-left-color: pink;
margin-top: auto;
margin-right: 5px;
margin-bottom: 5px;
margin-left: auto;
}
.b2{
width: 200px;
height: 200px;
border:10px solid pink;
margin: auto 5px;
}
</style>
<div class="h1">
<div class="a1" style="float:left">
<img src="http://www.php.cn/static/images/user_avatar.jpg">
<p>内边距8行代码</p>
</div>
<div class="a2" style="float:left">
<img src="http://www.php.cn/static/images/user_avatar.jpg">
<p>内边距2行代码</p>
</div>
</div>
<div class="h2" >
<div class="b1" style="float:left">
<img src="http://www.php.cn/static/images/user_avatar.jpg">
<p>边框16行代码</p>
</div>
<div class="b2" style="float:left">
<img src="http://www.php.cn/static/images/user_avatar.jpg">
<p>边框2行代码</p>
</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
