html+屏幕平均分配,15平均分配型.html

平均分配型

* {

margin: 0;

padding: 0;

}

.banner,

.footer,

.main,

.top {

width: 900px;

margin: 5px auto;

}

.top {

height: 80px;

background-color: #ccc;

}

.banner {

height: 80px;

background-color: #333;

}

.main {

height: 467px;

background-color: #ccc;

padding-top: 33px;

}

.footer {

height: 80px;

background-color: #333;

}

.main li {

list-style: none;

height: 200;

width: 840px;

margin: 0 auto;

}

.main a {

/* float: left; */

display: inline-block;

height: 200px;

width: 200px;

border: 1px dashed red;

text-align: center;

}

.top_box {

background-color: pink;

}

.top_box:hover { /* 实验盒子阴影效果 */

box-shadow: 2px 2px 10px red;

}

.bottom_box {

margin-top: 33px;

background-color: yellow;

}

.bottom_box:hover {

box-shadow: 2px 2px 10px #333;

}

top

banner

• 上面的盒子

  上面的盒子

  上面的盒子

  上面的盒子

• 下面的盒子

  下面的盒子

  下面的盒子

  下面的盒子

footer

一键复制

编辑

Web IDE

原始数据

按行查看

历史