布局一:一列固定宽度且居中
效果图如下:
(图片有点小请见谅,因为要截全部)
主要代码如下:
<style>
.top,.banner,.main,.footer{
margin: 5px auto;
background-color: silver;
border: 2px dashed black;
width: 70%;
text-align: center;
}
.top,.footer{
height: 200px;
line-height: 200px;
}
.banner{
height: 100px;
line-height: 100px;
}
.main{
height: 500px;
line-height: 500px;
}
</style>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="main"></div>
<div class="footer">footer</div>
</body>
布局二:两列左窄右宽型(代表:小米官网)
效果图:
主要代码如下:
<style>
.top,.banner,.main,.footer{
margin: 5px auto;
background-color: silver;
border: 2px dashed black;
width: 700px;/*70%*/
text-align: center;
}
.top,.footer{
height: 200px;
line-height: 200px;
}
.banner{
height: 100px;
line-height: 100px;
}
.main,.left,.right{
height: 500px;
line-height: 500px;
}
.left{
float: left;
width: 200px;
margin:-right:8px;
border-right: 2px dashed black;
}
.right{
width: 490px;
float: left;
}
</style>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
布局三:通栏平均分布(代表:锤子官网)
效果图:
主要代码如下:
<style>
.all{
width: 100%;
border: 1px solid red;
}
.top,.banner,.main,.footer{
margin: 5px auto;
background-color: silver;
border: 2px dashed black;
width: 700px;/*70%*/
text-align: center;
}
.top,.footer{
height: 100px;
line-height: 100px;
}
.banner{
height: 50px;
line-height: 50px;
}
.main{
height: 300px;
line-height: 300px;
}
.main-top{
height: 100px;
float: left;
}
.main-top div{
float: left;
width: 96px;
height: 96px;
margin: 1px;
border: 1px solid black;
}
.main-bottom{
height: 200px;
float: left;
}
.main-bottom div{
float: left;
width: 96px;
margin: 1px;
height: 196px;
border: 1px solid black;
}
</style>
<body>
<div class="all">
<div class="top">top</div>
</div>
<div class="banner">banner</div>
<div class="main">
<div class="main-top">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="main-bottom">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="all">
<div class="footer">footer</div>
</div>
</body>
有建议和错误欢迎指出~
此至 互勉!