摘要： 在HTML前端開發(fā)中，盒子模型是最基礎的模型框架，也是應用最廣泛的模型，而盒子模型中最基本的就是邊框，如果理解了邊框就可以理解所謂的盒子模型所闡述的大盒子套小盒子的頁面布局，那么對于前端開發(fā)布局來說，就只剩下什么樣的布局好看了。廢話不多說了，下面上代碼：<!doctype html>
在HTML前端開發(fā)中，盒子模型是最基礎的模型框架，也是應用最廣泛的模型，而盒子模型中最基本的就是邊框，如果理解了邊框就可以理解所謂的盒子模型所闡述的大盒子套小盒子的頁面布局，那么對于前端開發(fā)布局來說，就只剩下什么樣的布局好看了。廢話不多說了，下面上代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型--邊框</title>
<style type="text/css">
/*主要操作都在css里，html我只寫了一個大致的框架樣子*/
.bord-fin{ width: 666px;height: 666px; background-color: black; border: 5px solid red;margin: 233px 233px;box-shadow: 10px 20px 30px 10px yellow;}
.bord-cen1{ width: 600px;height: 321px; background-color: #ffffff; border: 5px solid orange;margin: auto;padding: auto;}
.bord-cen2{ width: 600px;height: 321px; background-color: #ffffff; border: 5px solid orange;margin: auto;padding: auto;}
.bord-li1{ width: 288px;height: 288px; background-color: pink; border: 5px dotted green;float: left;margin:12px auto;border-radius:25px;}
.bord-li2{ width: 288px;height: 288px; background-color: pink; border: 5px dashed green;float: right;margin:12px auto;border-radius:25px;}
.bord-li3{ width: 288px;height: 288px; background-color: pink; border: 5px dotted green;float: left;;margin:12px auto;border-radius:25px;}
.bord-li4{ width: 288px;height: 288px; background-color: pink; border: 5px dashed green;float: right;margin:12px auto;border-radius:25px;}
</style>
</head>
<body>
<div class="bord-fin"><!-- 最外面的盒子邊框-->
<div class="bord-cen1"><!-- 中間的盒子邊框 -->
<div class="bord-li1"></div><!-- 最里面的盒子1 左-->
<div class="bord-li2"></div><!-- 最里面的盒子2 右-->
</div>
<div class="bord-cen2"><!---->
<div class="bord-li3"></div><!-- 最里面的盒子3 左-->
<div class="bord-li4"></div><!-- 最里面的盒子4 右-->
</div>
</div>
</body>
</html>
批改老師：查無此人批改時間：2019-05-22 09:25:29
老師總結(jié)：完成的不錯。剛接觸編程，理解起來比較辛苦。要堅持，繼續(xù)加油。