摘要:在这些课程当中我学到了html的标签以及表单.a连接.ui.li.表格.p标签、div的使用方法、在css当中学会了怎么用css语法去控制div 以及文字的调整 和内边距 以及外边距的一个写法 给div加边框 调整边框的线有虚线 实线 终点线 双线的用法,还有清除边框的写法 控制外阴影以及内阴影<!DOCTY
在这些课程当中我学到了html的标签以及表单.a连接.ui.li.表格.p标签、div的使用方法、在css当中学会了怎么用css语法去控制div 以及文字的调整 和内边距 以及外边距的一个写法 给div加边框 调整边框的线有虚线 实线 终点线 双线的用法,还有清除边框的写法 控制外阴影以及内阴影
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="index/css">
<link rel="shortcut" type="image/X-icon" href="image/1.jpg">
<style type="text/css">
body{background-color: #4E9BEB;}
.box{width: 100px;height: 100px;border: 2px solid #ccc;}
.oxd{width: 100px;height: 100px;border: 2px dashed #175DA2;margin-top: 10px;}
.rui{width: 100px;height: 100px;border:2px dotted #E549F2;margin-top: 10px; }
.ord{width: 100px;height: 100px;border:2px double #4B15A7;margin-top: 10px; }
.uid{width: 100px;height: 100px;margin-top: 10px;border-left: 2px solid #913E2C; background: #ccc;}
.but{width: 150px;height: 150px;margin-top: 5px;border-right:2px solid red;background: #390808;}
.and{width: 400px;height: 60px;margin: 10px;box-shadow: 0px 10px 40px red inset;border: 1px solid #ccc;}
.bat{width: 500px;height: 80px;border: 2px solid red;border-radius: 50px 50px 50px 50px;}
</style>
</head>
<body>
<div class="box"></div>
<div class="oxd"></div>
<div class="rui"></div>
<div class="ord"></div>
<div class="uid"></div>
<div class="but"></div>
<div class="and"></div>
<div class="bat"></div>
</body>
</html>
批改老师:天蓬老师批改时间:2018-12-04 15:15:57
老师总结:在盒模型中, 边框最好玩, 因为他不像内外边距, 是透明的,只能设置宽度, 边框有样式,还有颜色,可以实现很多有趣的功能