摘要:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>CCS盒模型</title>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CCS盒模型</title>
<style type="text/css">
*{padding: 0px; margin: 0px;}
.bar{
width: 100%;
height: 50px;
background-color: black;
color:#cccccc;
}
.content{
width: 1000px;
height: 500px;
margin: 20px auto;
border-radius:10px;
box-shadow:0px 5px 30px #ccc;
}
.ad{
width: 1000px;
height: 100px;
margin: 20px auto;
border-radius:10px;
box-shadow:0px 5px 30px #ccc;
}
.content2{
width: 1000px;
height: 350px;
margin: auto;
}
.news{
float: left;
width: 200px;
height: 350px;
border-radius:10px;
box-shadow:0px 5px 30px #ccc;
}
.newcourse{
float: left;
margin: 0px 10px;
width: 580px;
height: 350px;
border-radius:10px;
box-shadow:0px 5px 30px #ccc;
}
.books{
float: left;
width: 200px;
height: 350px;
border-radius:10px;
box-shadow:0px 5px 30px #ccc;
}
.link{
width: 1000px;
height: 100px;
margin: 20px auto;
border-radius:10px;
box-shadow:0px 5px 30px #ccc;
}
</style>
</head>
<body>
<div class="bar">导航栏</div>
<div class="content">内容</div>
<div class="ad">广告</div>
<div class="content2">
<div class="news">头条</div>
<div class="newcourse">最新课程</div>
<div class="books">常用手册</div>
</div>
<div class="link">友情链接</div>
</body>
</html>
批改老师:天蓬老师批改时间:2018-12-21 08:59:37
老师总结:边框是盒框的重要组成部分, 如果数值为0, 单位可以省略掉不要写,例如: padding: 0px , 建议直接写成: padding: 0; 这样更好些