盒子模型案例一
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style>
.box1{
width: 50px;
height: 50px;
border-left: 5px solid green;
background-color: aqua;
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
盒子模型案例二
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例</title>
<link rel="stylesheet" href="css/style3.css">
<style>
ul{
margin-bottom: 0;
margin-top: 0;
padding-left: 0;
border: 2px ;
}
ul li {
list-style: none;
width: 60px; height: 60px;background-color: aqua;
border: 2px solid darkolivegreen;
/*文本居中*/
text-align: center;
line-height: 60px;
border-radius: 50%;
display: inline-block;
box-shadow: 2px 2px 2px aquamarine;
}
#fon{
background-color: darkolivegreen;
}
.bg-green{
background-color: blueviolet;
}
.fof{
background-color: deepskyblue;
}
.whot{
background-color: darksalmon;
}
.foot{
background-color: darksalmon;
}
.fone{
background-color: lawngreen;
}
.si{
background-color: orchid;
}
.he{
background-color: steelblue;
}.ok{
background-color: yellowgreen;
</style>
</head>
<body>
<ul>
<li id="fon">好</li>
<li class="fof">梦</li>
<li class="bg-green">祝</li>
<li class="whot">大</li>
<li class="foot">家</li>
<li class="fone">晚</li>
<li class="si">安</li>
<li class="he">再</li>
<li class="ok">见</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
