前端HTML简单布局
2019-05-29 本文已影响0人
Python黑户
原网站：
TIM截图20190529185907.png
我们可以把他切割，分块下手：
TIM截图20190529190625.png
思路明了了，就开始用<div>标签和css进行布局！
Screenshot_2019-05-29 首页.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" type="text/css" href="css/首页.css"/>
</head>
<body>
<div class="zhuyeding">
<div class="zhuyeding_1">
<div class="zhuyeding_5">
<div class="zhuyeding_2"></div>
<div class="zhuyeding_4"></div>
<div class="zhuyeding_3"></div>
</div>
</div>
</div>
<div class="shosuo">
<div class="shosuo_1"></div>
<div class="shosuo_2"></div>
</div>
<div class="wynr">
<div class="guanggao"></div>
<div class="wynr_1"></div>
<div class="wynr_2"></div>
</div>
<div></div>
</body>
</html>
/* 全局设置外边距 */
*{
margin: 0;
padding: 0;
}
.zhuyeding{
width: 100%;
height: 40px;
background-color: aqua;
}
.zhuyeding_1{
width: 1024px;
margin: 0 auto;
height: 100%;
background-color: black;
/* float: left; */
}
.zhuyeding_2{
width: 25%;
height: 40px;
background-color: aquamarine;
}
.zhuyeding_3{
height: 40px;
width: 25%;
background-color: brown;
margin-right: 0%;
}
.zhuyeding_4{
height: 40px;
width: 50%;
background-color: black;
}
.zhuyeding_5{
width: 100%;
height: 100%;
display: inline-flex;
}
.shosuo{
height: 127px;
width: 100%;
background-color: violet;
}
.shosuo_1{
width: 1024px;
height: 88px;
background-color: bisque;
margin: 0 auto;
}
.shosuo_2{
width: 1024px;
height: 39.753px;
background-color: black;
margin: 0 auto;
}
.wynr{
width: 100%;
height: 100%;
}
.guanggao{
width: 1024px;
margin: 0 auto;
height: 63.997px;
background-color: blue;
}
.wynr_1{
width: 1024px;
margin: 0 auto;
height: 917.977px;
background-color: rgb(173, 85, 26);
}
.wynr_2{
width: 1024px;
margin: 0 auto;
height: 917.977px;
background-color: rgb(143, 26, 173);
}
