简单的用法,以及自己的总

原创 2018-12-04 15:02:20 230
摘要:在这些课程当中我学到了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
老师总结:在盒模型中, 边框最好玩, 因为他不像内外边距, 是透明的,只能设置宽度, 边框有样式,还有颜色,可以实现很多有趣的功能

发布手记

热门词条