HTML自我总结（二）--------列表页模板

简单列表页面展示

代码
HTML：

<div class="pricing-table">
    <div class="col">
        <div class="table">
            <h2>Regular</h2>
            <div class="pop">Popular</div>
            <div class="price">
                $10
                <span>Per Month</span>
            </div>
            <ul>
                <li><strong>2</strong>Websites</li>
                <li><strong>10</strong>Email</li>
                <li><strong>100 CB</strong>Storage</li>
                <li><strong>1</strong>Account</li>
            </ul>
            <br/>
            <a href="#">Buy Now</a>
        </div>
    </div>

    <div class="col">
        <div class="table">
            <h2>Regular</h2>
            <div class="pop">Popular</div>
            <div class="price">
                $10
                <span>Per Month</span>
            </div>
            <ul>
                <li><strong>2</strong>Websites</li>
                <li><strong>10</strong>Email</li>
                <li><strong>100 CB</strong>Storage</li>
                <li><strong>1</strong>Account</li>
            </ul>
            <br/>
            <a href="#">Buy Now</a>
        </div>
    </div>

    <div class="col">
        <div class="table">
            <h2>Regular</h2>
            <div class="pop">Popular</div>
            <div class="price">
                $10
                <span>Per Month</span>
            </div>
            <ul>
                <li><strong>2</strong>Websites</li>
                <li><strong>10</strong>Email</li>
                <li><strong>100 CB</strong>Storage</li>
                <li><strong>1</strong>Account</li>
            </ul>
            <br/>
            <a href="#">Buy Now</a>
        </div>
    </div>

    <div class="col">
        <div class="table">
            <h2>Regular</h2>
            <div class="pop">Popular</div>
            <div class="price">
                $10
                <span>Per Month</span>
            </div>
            <ul>
                <li><strong>2</strong>Websites</li>
                <li><strong>10</strong>Email</li>
                <li><strong>100 CB</strong>Storage</li>
                <li><strong>1</strong>Account</li>
            </ul>
            <br/>
            <a href="#">Buy Now</a>
        </div>
    </div>
</div>

CSS：

/*列表页模板css*/
.pricing-table{
    padding-top: 10%;/*调节与顶部位置*/
    max-height: 900px;
    margin:auto;
    display: flex;/*父div设置该属性，意味弹性布局*/
    justify-content: center;/*设置或检索弹性盒子元素在主轴（横轴）方向上左对齐*/
    text-align: center;
    flex-wrap: wrap;/*规定灵活的项目在必要的时候拆行或拆列*/
}
.col{
    flex: 25%;
    padding:20px;
    max-width:217px;
    box-sizing: border-box;/*令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中*/

}
.table{
    background: #ffffff;
    padding: 30px 10px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 25px rgba(0,0,0,.5);/*产生盒子阴影：x轴偏移，y轴偏移，模糊度，透明色*/
    border-radius: 10px;/*使矩形四边圆滑*/
}
.table h2{
    text-transform: uppercase;/*字体大写*/
}
.table ul{
    margin: 0;
    padding: 0;
}
.table ul li{
    padding: 10px 0;
    list-style: none;/*可去掉li产生的圆点*/
}
.price{
    font-size: 40px;
    margin-bottom: 20px;/*设置下外距*/
}
.price span{
    display: block;/*此元素将显示为块级元素，此元素前后会带有换行符*/
    font-size: 14px;
}
.table a{
    text-decoration: none;
    color: #2c3e50;
    border: 2px solid #2c3e50;
    font-size: 14px;
    padding: 8px 4px;
    margin: 10px 0;
    border-radius: 10px;/*使矩形四边圆滑*/
    transition: 0.5s linear;/**/
}
.table a:hover{
    background: #2c3e50;
    color: #ffffff;
}
.pop{
    background: #2c3e50;
    color: #ffffff;
    transform: rotate(45deg);/*将div旋转*/
    padding: 10px 40px;
    position: absolute;
    top: 15px;
    right: -36px;
}
/*设置屏幕大小改变时，分块比例*/
@media screen and(max-width: 980px){
    .col{
        flex: 50%;
    }
}
@media screen and(max-width: 700px){
    .col{
        flex: 100%;
    }
}

结果