css布局之负margin妙用及其他实现(4)

            <li class="first"><img src="img/test.jpg"/></li>   

            <li><img src="img/test.jpg"/></li>   

            <li><img src="img/test.jpg"/></li>   

        </ul>   

5.css选择器实现
 
:first-child :first-type-of :nth-child() 这些实现都没有什么技术难点，大家可以去查阅一下css文档，注意一下兼容性没问题了

CSS Code复制内容到剪贴板

<style type="text/css">   

*{   

    margin: 0;   

    padding: 0;   

}   

img{   

    vertical-align: middle;   

}   

.test1{   

    padding: 0 2%;   

    margin-left: -3.3%;   

}   

ul>li{   

    float: left;   

}   

.test1>li{   

    width: 30%;   

    margin-left: 3.3%;   

}   

ul>li>img{   

    width: 100%;   

}   

.test2>li{   

    width: 33.3%;   

    padding: 0 2%;   

    box-sizing: border-box;   

}   

.test3{   

    display: flex;   

    justify-content: space-between;   

}   

.test3>li{   

    width: 31.3%;   

    padding: 0 2%;   

    float: none;   

}   

.test4{   

    padding: 0 2%;   

}   

.test4>li{   

    width: 30%;   

    margin-left: 5%;   

}   

.test4>li.first{   

    margin: 0;   

}   

.test5{   

    padding: 0 2%;   

}   

.test5>li{   

    width: 30%;   

    margin-left: 5%;   

}   

.test5>li:first-child{   

    margin: 0;   

}   

</style>   

<p>5.css选择器实现(注意ie兼容性)</p>   

        <ul class="test5 clearfix">   

（编辑：ASP站长网）