您的位置：首页 > 其它

学习小记——居中五环和两栏布局/三栏布局的实例练习

2019-03-12 20:48 106 查看

第一篇博客，最近在学习写博客记录一下自己的学习，虽然我现在很菜，但我以后一定会成长为一个合格的程序媛的！冲鸭！！！

居中五环

<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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航