第一篇博客，最近在学习写博客记录一下自己的学习，虽然我现在很菜，但我以后一定会成长为一个合格的程序媛的！冲鸭！！！
居中五环
<html lang="en">
<head>
<meta charset="UTF-8">
<title>五环之歌</title>
<link rel="stylesheet" type="text/css" href="text-1.css">
</head>
<body>
<div class="wuhuan">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
<div class="circle5"></div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
.wuhuan{
position: absolute;
left: 50%;
top: 50%;
margin-left: -190px;
margin-top: -85px;
height: 170px;
width: 380px;
}
.circle1,
.circle2,
.circle3,
.circle4,
.circle5{
position: absolute;
width: 100px;
height: 100px;
border: 10px solid black;
border-radius:50%;
}
.circle1{
border-color: blue;
left: 0;
top: 0;
}
.circle2{
border-color: black;
left: 130px;
top: 0;
z-index: 3;
}
.circle3{
border-color: red;
left: 260px;
top: 0;
}
.circle4{
border-color: yellow;
left: 65px;
top: 50px;
}
.circle5{
border-color: green;
left: 195px;
top:50px;
}
最后出来的效果是：
两栏布局
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两栏布局</title>
<link rel="stylesheet" tyoe="text/css" href="两栏布局.css">
</head>
<body>
<div class="right"></div>
<div class="left"></div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
.right{
position:absolute;
right: 0;
height: 100px;
width: 100px;
background-color: #fcc;
}
.left{
height: 100px;
margin-right: 100px;
background-color: #ffc;
}
最后出来的效果是这样的：
三栏布局
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三栏布局</title>
<link rel="stylesheet" tyoe="text/css" href="三栏布局.css">
</head>
<body>
<div class="right"></div>
<div class="left"></div>
<div class="middle"></div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
.right{
position:absolute;
right: 0;
height: 100px;
width: 100px;
background-color: #fcc;
}
.left{
position: absolute;
left: 0;
width: 100px;
height: 100px;
background-color: #ffc;
}
.middle{
height: 100px;
background: #bbc;
margin-right: 100px;
margin-left: 100px;
}
最后出来的效果是这样的：
over
1886
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
