level 2
div+css实现 6个div CSS属性自己设计
2018年12月12日 08点12分
level 2
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>H5页面布局</title>
<style>
body{width:753px;height:418px;border:1px solid blue;margin:0 auto;}
header{width:753px;height:105px;background:red;float:left;}
aside{width:270px;height:313px;background:black;float:left;}
article{width:483px;height:313px;float:left;}
.m_1{width:287px;height:90px;background:#5a00fe;float:left;}
.m_2{width:187px;height:223px;background:red;float:left;}
.m_3{width:100px;height:223px;background:yellow;float:left;}
.m_4{width:196px;height:313px;background:#00ff39;float:right;}
header{font-size:18px;color:white;text-align:center;line-height:105px;}
aside{text-align:center;font-size:18px;color:white;line-height:313px;}
.m_1{text-align:center;font-size:18px;color:white;line-height:90px;}
.m_2{text-align:center;font-size:18px;color:white;line-height:223px;}
.m_3{text-align:center;font-size:18px;color:red;line-height:223px;}
.m_4{text-align:center;font-size:18px;color:red;line-height:313px;}
</style>
</head>
<body>
<header>头部</header>
<aside>左侧</aside>
<article>
<div class="m_1">一级</div>
<div class="m_4">四级</div>
<div class="m_2">二级</div>
<div class="m_3">三级</div>
</article>
</body>
</html>
试试这个，新手，别笑啊
2018年12月15日 13点12分
3
<head>
<meta charset="utf-8">
<title>H5页面布局</title>
<style>
body{width:753px;height:418px;border:1px solid blue;margin:0 auto;}
header{width:753px;height:105px;background:red;float:left;}
aside{width:270px;height:313px;background:black;float:left;}
article{width:483px;height:313px;float:left;}
.m_1{width:287px;height:90px;background:#5a00fe;float:left;}
.m_2{width:187px;height:223px;background:red;float:left;}
.m_3{width:100px;height:223px;background:yellow;float:left;}
.m_4{width:196px;height:313px;background:#00ff39;float:right;}
header{font-size:18px;color:white;text-align:center;line-height:105px;}
aside{text-align:center;font-size:18px;color:white;line-height:313px;}
.m_1{text-align:center;font-size:18px;color:white;line-height:90px;}
.m_2{text-align:center;font-size:18px;color:white;line-height:223px;}
.m_3{text-align:center;font-size:18px;color:red;line-height:223px;}
.m_4{text-align:center;font-size:18px;color:red;line-height:313px;}
</style>
</head>
<body>
<header>头部</header>
<aside>左侧</aside>
<article>
<div class="m_1">一级</div>
<div class="m_4">四级</div>
<div class="m_2">二级</div>
<div class="m_3">三级</div>
</article>
</body>
</html>
试试这个，新手，别笑啊
level 2
<html>
<head>
<meta charset="utf-8">
<title>页面布局</title>
<link rel="stylesheet" href="css/base.css" />
<style>
body{width:753px;height:418px;border:1px solid blue;margin:0 auto;}
.head{width:753px;height:105px;background:red;position:relative;}
.left{width:270px;height:313px;background:black;position:absolute;top:105px;left:0px;}
.middle_1{width:287px;height:90px;background:#5a00fe;position:absolute;top:0px;left:270px;}
.middle_2{width:187px;height:223px;background:red;position:absolute;top:90px;left:0px;}
.middle_3{width:100px;height:223px;background:yellow;position:absolute;top:90px;left:187}
.right{width:196px;height:313px;background:#00ff39;clear:left;position:absolute;top:0px;left:557px;}
.head_1{color:white;line-height:105px;}
.left_1{color:white;line-height:313px;}
.m_1{color:white;line-height:90px;}
.m_2{color:white;line-height:223px;}
.m_3{color:red;line-height:223px;}
.r_1{color:red;line-height:313px;}
ul li{text-align:center;font-size:18px;}
</style>
</head>
<body>
<div class="head">
<ul class="head_1">
<li>头部</li>
</ul>
<div class="left">
<ul class="left_1">
<li>左侧</li>
</ul>
<div class="middle_1">
<ul class="m_1">
<li>一级</li>
</ul>
<div class="middle_2">
<ul class="m_2">
<li>二级</li>
</div>
<div class="middle_3">
<ul class="m_3">
<li>三级</li>
</div>
</div>
<div class="right">
<ul class="r_1">
<li>四级</li>
</div>
</div>
</div>
</body>
</html>
这个是初版，上面那个是优化后的，当然还在其他方法
2018年12月15日 13点12分
4
<head>
<meta charset="utf-8">
<title>页面布局</title>
<link rel="stylesheet" href="css/base.css" />
<style>
body{width:753px;height:418px;border:1px solid blue;margin:0 auto;}
.head{width:753px;height:105px;background:red;position:relative;}
.left{width:270px;height:313px;background:black;position:absolute;top:105px;left:0px;}
.middle_1{width:287px;height:90px;background:#5a00fe;position:absolute;top:0px;left:270px;}
.middle_2{width:187px;height:223px;background:red;position:absolute;top:90px;left:0px;}
.middle_3{width:100px;height:223px;background:yellow;position:absolute;top:90px;left:187}
.right{width:196px;height:313px;background:#00ff39;clear:left;position:absolute;top:0px;left:557px;}
.head_1{color:white;line-height:105px;}
.left_1{color:white;line-height:313px;}
.m_1{color:white;line-height:90px;}
.m_2{color:white;line-height:223px;}
.m_3{color:red;line-height:223px;}
.r_1{color:red;line-height:313px;}
ul li{text-align:center;font-size:18px;}
</style>
</head>
<body>
<div class="head">
<ul class="head_1">
<li>头部</li>
</ul>
<div class="left">
<ul class="left_1">
<li>左侧</li>
</ul>
<div class="middle_1">
<ul class="m_1">
<li>一级</li>
</ul>
<div class="middle_2">
<ul class="m_2">
<li>二级</li>
</div>
<div class="middle_3">
<ul class="m_3">
<li>三级</li>
</div>
</div>
<div class="right">
<ul class="r_1">
<li>四级</li>
</div>
</div>
</div>
</body>
</html>
这个是初版，上面那个是优化后的，当然还在其他方法
