主要了解CSS中的浮动问题
运行效果如图所示
主要代码如下所示需要自己独立分析去学习，图片资源可以去官方区内去复制
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">* {margin: 0;padding: 0;}#container {width: 1242px;height: 614px;background-color: aqua;margin: 0 auto;}#left {float: left;background: url("./img/cebian.jpg") no-repeat;width: 234px;height: 614px;}#right {float: left;text-align: center;}ul li {list-style: none;margin-right:12px;}.first {margin-left: 12px;float: left;width: 240px;height: 300px;background: url(img/1.jpg) no-repeat;background-color: #FFF;background-position: center top;}.second {float: left;width: 240px;height: 300px;background: url(img/2.jpg) no-repeat;background-color: #FFF;background-position: center top;}.third {float: left;width: 240px;height: 300px;background: url(img/3.jpg) no-repeat;background-color: #FFF;background-position: center top;}.four {margin-right: 0px;float: left;width: 240px;height: 300px;background: url(img/4.jpg) no-repeat;background-color: #FFF;background-position: center top;}.xia {margin-top: 314px;}.five {margin-left: 12px;float: left;width: 240px;height: 300px;background: url(img/5.jpg) no-repeat;background-color: #FFF;background-position: center top;}.six {float: left;width: 240px;height: 300px;background: url(img/6.jpg) no-repeat;background-color: #FFF;background-position: center top;}.seven {float: left;width: 240px;height: 300px;background: url(img/7.jpg) no-repeat;background-color: #FFF;background-position: center top;}.eight {margin-right: 0px;float: left;width: 240px;height: 300px;background: url(img/8.jpg) no-repeat;background-color: #FFF;background-position: center top;}</style></head><body><div id="container"><div id="left">左青龙</div><div id="right"><ul class="shang"><li class="first"></li><li class="second"></li><li class="third"></li><li class="four"></li></ul><ul class="xia"><li class="five"></li><li class="six"></li><li class="seven"></li><li class="eight"></li></ul></div></div></body>
</html>
