作业1.五个色块制作一个十字架
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>0816作业</title>
<style>
.box {
width: 600px;
height: 600px;
position: relative;
}
.box1 {
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
top:0;
left: 200px;
}
.box2 {
width: 200px;
height: 200px;
background-color: green;
position: absolute;
top:200px;
left:0;
}
.box3 {
width: 200px;
height: 200px;
background-color: coral;
position: absolute;
top: 200px;
left: 400px;
}
.box4 {
width: 200px;
height: 200px;
background-color: grey;
position: absolute;
top: 400px;
left: 200px;
}
.box5{
width:200px;
height: 200px;
background-color: black;
position:absolute;
top:200px;
left:200px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
作业2.盒子模型
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box1{
width:100px;
height: 100px;
border-top:: 10px;
border-right: 10px;
border-bottom: 10px;
border-left: 10px;
border:solid red;
}
.box2{
width:100px;
height: 100px;
padding: 10px 10px 10px;
background-color: green;
border:1px solid red;
}
.box3{
border:1px solid blue;
background-color: #666;
width: 100px;
height: 100px;
margin:10px 20px 30px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"><p>你好世界</p></div>
<div class="box3"><p>你好世界</p></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
作业3.四种元素对齐
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box1{
width:200px;
height: 200px;
background-color:red;
text-align: center;
}
.box1 p{line-height: 200px;}
#id1{
margin-top: 10px;
}
.box2{
width:200px;
height: 200px;
background-color:green;
text-align: center;
display:table-cell;
vertical-align: middle;
border:1px solid blue;
}
.box3 {
width: 200px;
height: 200px;
background-color: lightgreen;
display: table-cell;
vertical-align: middle;
}
.box3 .child {
width: 100px;
height: 100px;
background-color: lightcoral;
margin: auto;
}
.box4 {
width: 200px;
height: 200px;
background-color: lightblue;
text-align: center;
display: table-cell;
vertical-align: bottom;
}
ul {
margin: 0;
padding-left: 0;
}
.box4 li {
display: inline;
</style>
</head>
<body>
<div class="box1">
<p>你好世界</p>
</div>
<div id="id1">
<div class="box2">
<h2>我是案例2</h2>
<p>案例2我是</p>
</div>
</div>
<div class="box3">
<div class="child"></div>
</div>
<div class="box4">
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例