实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4.24作业盒模型的简单案例</title>
<style>
.box1{
height: 200px;
width: 300px;
background-color: aqua;
/*padding-top: 30px;*/
/*padding-right: 20px;*/
/*padding-bottom: 10px;*/
/*padding-left: 30px;*/
/*简写padding*/
padding: 30px 20px 10px 30px;
/*border-color: crimson;*/
/*border-width: 10px;*/
/*border-style: solid;*/
/*margin-top: 30px;*/
border: 10px red solid;
/*简写border样式*/
}
.box2{
background-color: antiquewhite;
height: 200px;
}
</style>
</head>
<body>
<h1>体会border和padding 简写规则</h1>
<div class="box1">
<div class="box2"></div>
</div>
<!--导航的简写方法-->
<!--ul>li.item{$}*4>a{最新产品*$}-->
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
