（html+css）小练习-盒子布局

测试样例：

html文件设置框架

<div class="container w">
        <div class="left">
            <a href="#"></a>
        </div>
        <div class="right">
            <ul>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
            </ul>
        </div>
    </div>

第二步设置css样式

1. 最大包容的盒子container

 /* 版心 */
        * {
            padding: 0;
            margin: 0;
            text-decoration: none;
        }

        li {
            list-style: none;
        }

        .w {
            margin: 1266px auto;
        }
		
		/* 大盒子 */
        .container {
            position: relative;
            width: 1235px;
            margin-top: 20px;
            height: 500px;
            background-color: skyblue;
        }

最大的盒子蓝色区域如图

2. 内嵌左盒子

 /* 内嵌左盒子 */
        .container .left {
            position: relative;
            float: left;
            width: 234px;
            height: 500px;
            background-color: palegreen;
        }

绿色区域显示：

3.内嵌右盒子

/* 右盒子 */
        .container .right {
            position: relative;
            float: right;
            height: 500px;
            width: 993px;
           background-color: pink;
        }

粉色部分显示：

4.加入每一个小li的小卡片

 .container .right ul li {
            float: left;
            margin-left: 18px;
        }

        .container .right ul li a {
            display: inline-block;
            width: 230px;
            height: 248px;
            position: relative;
            background-color: aquamarine;
        }

如图：

5.再去掉背景色部分代码，即可

6. 如果你还想再加入阴影部分的动态效果，可以在每个小li加个class类，利用css3的盒子阴影即可

到遇到问题悬停在一行末尾的卡片时会出现下一行卡片脱离轨道的情况，如图：

解决方法是利用这行代码即可解决问题：
box-sizing: border-box;

本篇完…