参考自青岛思途java讲师臧老师
index.html
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><link rel="stylesheet" type="text/css" href="css/index.css" /></head><body><!-- 页头 --><div class="header"><div class="info"><div class="container"><div class="left"></div><div class="right"><ul><li><a href="#">请注册</a></li><li><a href="#">请登录</a></li><li><a href="#">请加购</a></li><li><a href="#">请付款</a></li><li><a href="#">请好评</a></li><div class="clear"></div></ul></div><div class="clear"></div></div></div><div class="logo"><div class="container"><div class="logo-lft"></div><div class="logo-ctr"></div><div class="logo-rgt"></div></div></div></div><!-- banner --><div class="banner"><div class="nav"><div class="container"><ul><li><a href="#">请注册</a></li><li><a href="#">请注册</a></li><li><a href="#">请注册</a></li><li><a href="#">请注册</a></li><li><a href="#">请注册</a></li><li><a href="#">请注册</a></li><li><a href="#">请注册</a></li><div class="clear"></div></ul></div></div><div class="pic"><div class="container"><div class="lft"></div><div class="ctr"></div><div class="rgt"><div class="top"></div><div class="bottom"></div></div></div></div></div><!-- 一楼 --><div class="floor1"><div class="container"><div></div></div></div><!-- 二楼 --><div class="floor2"><div class="container"><div class="wrapper"><div class="item"><div></div></div><div class="item"><div><div class="top"></div><div class="top"></div></div></div><div class="item"><div></div></div><div class="item"><div><div class="top"></div><div class="top"></div></div></div><div class="item"><div></div></div></div></div></div><!-- 三楼 ,红人穿搭--><div class="floor3"><div class="container"><div class="title"><div class="main-title">红人穿搭</div><div class="list-title"></div><div class="more"></div><div class="clear"></div></div><div class="content"><div class="wrapper"><div class="item"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div></div></div></div></div><!-- 广告条 --><div class="ad"><div class="container"><div></div></div></div><!-- 四楼 多次重复--><div class="floor4"><div class="container"><div class="title"><div class="main-title">靓淘服装</div><div class="list-title"><div>热门搜索：</div><ul><li>风衣</li><li>风衣</li><li>风衣</li><li>风衣</li><li class="last">风衣</li><div class="clear"></div></ul></div><div class="more"><div>查看全部</div></div><div class="clear"></div></div><div class="content"><div class="lft"></div><div class="rgt"><div class="top"><div class="wrapper"><div class="item big"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="clear"></div></div></div><div class="bottom"><div class="wrapper"><div class="item"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="clear"></div></div></div></div></div></div></div><div class="floor4"><div class="container"><div class="title"><div class="main-title">靓淘服装</div><div class="list-title"><div>热门搜索：</div><ul><li>风衣</li><li>风衣</li><li>风衣</li><li>风衣</li><li class="last">风衣</li><div class="clear"></div></ul></div><div class="more"><div>查看全部</div></div><div class="clear"></div></div><div class="content"><div class="lft"></div><div class="rgt"><div class="top"><div class="wrapper"><div class="item big"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="clear"></div></div></div><div class="bottom"><div class="wrapper"><div class="item"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="clear"></div></div></div></div></div></div></div><!-- 广告条 --><div class="ad"><div class="container"><div></div></div></div><div class="floor4"><div class="container"><div class="title"><div class="main-title">靓淘服装</div><div class="list-title"><div>热门搜索：</div><ul><li>风衣</li><li>风衣</li><li>风衣</li><li>风衣</li><li class="last">风衣</li><div class="clear"></div></ul></div><div class="more"><div>查看全部</div></div><div class="clear"></div></div><div class="content"><div class="lft"></div><div class="rgt"><div class="top"><div class="wrapper"><div class="item big"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="clear"></div></div></div><div class="bottom"><div class="wrapper"><div class="item"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="clear"></div></div></div></div></div></div></div><div class="floor4"><div class="container"><div class="title"><div class="main-title">靓淘服装</div><div class="list-title"><div>热门搜索：</div><ul><li>风衣</li><li>风衣</li><li>风衣</li><li>风衣</li><li class="last">风衣</li><div class="clear"></div></ul></div><div class="more"><div>查看全部</div></div><div class="clear"></div></div><div class="content"><div class="lft"></div><div class="rgt"><div class="top"><div class="wrapper"><div class="item big"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="clear"></div></div></div><div class="bottom"><div class="wrapper"><div class="item"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="clear"></div></div></div></div></div></div></div><div class="ad"><div class="container"><div></div></div></div><div class="floor4"><div class="container"><div class="title"><div class="main-title">靓淘服装</div><div class="list-title"><div>热门搜索：</div><ul><li>风衣</li><li>风衣</li><li>风衣</li><li>风衣</li><li class="last">风衣</li><div class="clear"></div></ul></div><div class="more"><div>查看全部</div></div><div class="clear"></div></div><div class="content"><div class="lft"></div><div class="rgt"><div class="top"><div class="wrapper"><div class="item big"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="clear"></div></div></div><div class="bottom"><div class="wrapper"><div class="item"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="clear"></div></div></div></div></div></div></div><div class="floor4"><div class="container"><div class="title"><div class="main-title">靓淘服装</div><div class="list-title"><div>热门搜索：</div><ul><li>风衣</li><li>风衣</li><li>风衣</li><li>风衣</li><li class="last">风衣</li><div class="clear"></div></ul></div><div class="more"><div>查看全部</div></div><div class="clear"></div></div><div class="content"><div class="lft"></div><div class="rgt"><div class="top"><div class="wrapper"><div class="item big"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="clear"></div></div></div><div class="bottom"><div class="wrapper"><div class="item"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="clear"></div></div></div></div></div></div></div><!-- 五楼 --><div class="floor5"><div class="container"><div class="top"><div class="wrapper"><div class="item"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="clear"></div></div></div><div class="bottom"><div class="wrapper"><div class="item"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="item"><div></div></div><div class="clear"></div></div></div></div></div><!-- 页脚 --><div class="footer"><div class="top"></div><div class="mid"></div><div class="bottom"></div></div></body></html>
index.css
@charset "utf-8";body {margin: 0;padding: 0;}ul {list-style-type: none;padding: 0;margin: 0;}a {text-decoration: none;}.clear {clear: both;}/* 有效宽度 */.container {width: 1100px;margin: 0 auto;}.header .info {height: 30px;border-bottom: 1px solid #ccc;}.header .info .left {width: 150px;height: 100%;float: left;background-color: #87CEEB;}.header .info .container {height: 100%;}.header .info .right {height: 100%;float: right;background-color: #87CEEB;}.header .info .right ul {height: 100%;}.header .info .right ul li {float: left;height: 100%;margin-right: 5px;}.header .info .right ul li a {display: inline-block;/* 行内块状元素 */height: 100%;line-height: 30px;/*左右边内距 */padding-left: 10px;padding-right: 10px;}.header .logo {height: 80px;margin-top: 10px;}.header .logo .container {height: 100%;}.header .logo .container .logo-lft {float: left;height: 100%;width: 200px;background-color: pink;margin-right: 10px;}.header .logo .container .logo-ctr {float: left;height: 100%;width: 500px;background-color: pink;}.header .logo .container .logo-rgt {float: right;height: 100%;width: 200px;background-color: pink;}.banner {margin-top: 10px;}.banner .nav {background-color: black;height: 30px;}.banner .pic {height: 280px;background-color: antiquewhite;}.banner .nav .container {height: 100%;}.banner .nav .container ul {height: 100%;}.banner .nav .container ul li {height: 100%;margin-right: 40px;float: left;}.banner .nav .container ul li a {display: inline-block;height: 100%;line-height: 30px;padding-left: 30px;padding-right: 30px;color: #ddd;}.banner .pic .container {height: 100%;position: relative;}.banner .pic .container .lft {height: 100%;width: 160px;float: left;background-color: pink;}.banner .pic .container .ctr {position: absolute;left: 160px;right: 150px;top: 0;height: 100%;background-color: darkorange;}.banner .pic .container .rgt {float: right;height: 100%;width: 150px;background-color: #fff;}.banner .pic .container .rgt .top {height: 135px;margin-bottom: 10px;width: 100%;background-color: pink;}.banner .pic .container .rgt .bottom {height: 135px;width: 100%;background-color: pink;}.floor1 .container {height: 100%;}.floor1 .container>div {height: 200px;background-color: pink;margin-top: 10px;}.floor2 {height: 150px;padding-top: 10px;}.floor2 .container {height: 100%;}.floor2 .container .wrapper {height: 100%;margin-right: -10px;}.floor2 .container .wrapper .item {width: 20%;height: 100%;float: left;}.floor2 .container .wrapper .item>div {margin-right: 10px;background-color: pink;height: 100%;}.floor2 .container .wrapper .item:nth-child(2)>div {background-color: #fff;}.floor2 .container .wrapper .item:nth-child(4)>div {background-color: #fff;}.floor2 .container .wrapper .item .top {height: 70px;background-color: pink;margin-bottom: 10px;}.floor2 .container .wrapper .item .bottom {height: 70px;background-color: pink;}.floor3 {height: 280px;padding-top: 10px;}.floor3 .container {height: 100%;}/* */.title {border-left: 5px solid red;height: 19px;margin-bottom: 10px;}.title .main-title {float: left;height: 100%;padding-left: 3px;font-weight: bold;}.title .list-title {float: left;height: 100%;padding-left: 5px;}.title .more {float: right;height: 100%;}.floor3 .container .content {height: 100%;}.floor3 .container .content .wrapper {height: 100%;margin-right: -10px;}.floor3 .container .content .wrapper .item {height: 100%;width: 20%;float: left;}.floor3 .container .content .wrapper .item>div {margin-right: 10px;height: 250px;background-color: pink;}/* 广告条*/.ad {margin-top: 10px;}.ad .container {height: 100%;}.ad .container>div {height: 60px;background-color: pink;}.title .list-title>div {float: left;}.title .list-title ul li {float: left;margin-right: 10px;border-right: 1px solid #666;padding-right: 10px;}.title .list-title ul {width: 500px;}.title .list-title ul .last {border-right: 0;}.floor4 {margin-top: 10px;}.floor4 .container .content {height: 280px;position: relative;margin-top: 10px;}.floor4 .container .content .lft {float: left;width: 200px;background-color: skyblue;height: 100%;}.floor4 .container .content .rgt {position: absolute;left: 210px;top: 0;right: 0;height: 100%;}.floor4 .container .content .rgt .top {height: 135px;margin-bottom: 10px;}.floor4 .container .content .rgt .bottom {height: 135px;margin-bottom: 10px;}.floor4 .container .content .rgt .wrapper {margin-right: -10px;height: 100%;}.floor4 .container .content .rgt .wrapper .item {height: 100%;float: left;width: 25%;}.floor4 .container .content .rgt .wrapper .big {width: 50%;}.floor4 .container .content .rgt .wrapper .item>div {margin-right: 10px;height: 100%;background-color: darkgoldenrod;}.floor5 {margin-top: 20px;height: 200px;}.floor5 .container {height: 100%;}.floor5 .container .top {height: 90px;}.floor5 .container .top .wrapper {margin-right: -10px;height: 100%;}.floor5 .container .top .wrapper .item {height: 100%;width: 25%;float: left;}.floor5 .container .top .wrapper .item>div {background-color: pink;height: 100%;margin-right: 10px;}.floor5 .bottom {height: 90px;margin-top: 10px;margin-bottom: 10px;}.floor5 .bottom .wrapper {margin-right: -10px;height: 100%;}.floor5 .bottom .wrapper .item {height: 100%;width: 20%;float: left;}.floor5 .bottom .wrapper .item>div {background-color: firebrick;height: 100%;margin-right: 10px;}.footer {height: 90px;margin-top: 20px;}.footer .top {height: 30px;background-color: beige;}.footer .mid {height: 10px;background-color: darkblue;}.footer .bottom {height: 50px;background-color: cadetblue;}
