HTML5——淘宝

HTML5

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link href="css/taobao2.css" rel="stylesheet" />
    </head>
    <body>
        
        <div class="container">
            <div class="title">
                <span>猜你喜欢</span>
                <img src="img/adv_title2.png"/>
            </div>
        
            <ul class="goods">
                <li>
                    <a href="#">
                        <img src="img/g1.jpg_200x200q90.jpg_.webp"/>
                        <span class="gname">卡西欧手表男CASIO MRW-200HC-7B2 学生运动韩版简约防水指针表</span>
                        <div>
                            <span class="rmb"></span>
                            <span class="gprice">125</span>
                            <span class="gsales">268人购买</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/g1.jpg_200x200q90.jpg_.webp"/>
                        <span class="gname">卡西欧手表男CASIO MRW-200HC-7B2 学生运动韩版简约防水指针表</span>
                        <div>
                            <span class="rmb"></span>
                            <span class="gprice">125</span>
                            <span class="gsales">268人购买</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/g1.jpg_200x200q90.jpg_.webp"/>
                        <span class="gname">卡西欧手表男CASIO MRW-200HC-7B2 学生运动韩版简约防水指针表</span>
                        <div>
                            <span class="rmb"></span>
                            <span class="gprice">125</span>
                            <span class="gsales">268人购买</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/g1.jpg_200x200q90.jpg_.webp"/>
                        <span class="gname">卡西欧手表男CASIO MRW-200HC-7B2 学生运动韩版简约防水指针表</span>
                        <div>
                            <span class="rmb"></span>
                            <span class="gprice">125</span>
                            <span class="gsales">268人购买</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/g1.jpg_200x200q90.jpg_.webp"/>
                        <span class="gname">卡西欧手表男CASIO MRW-200HC-7B2 学生运动韩版简约防水指针表</span>
                        <div>
                            <span class="rmb"></span>
                            <span class="gprice">125</span>
                            <span class="gsales">268人购买</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/g1.jpg_200x200q90.jpg_.webp"/>
                        <span class="gname">卡西欧手表男CASIO MRW-200HC-7B2 学生运动韩版简约防水指针表</span>
                        <div>
                            <span class="rmb"></span>
                            <span class="gprice">125</span>
                            <span class="gsales">268人购买</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/g1.jpg_200x200q90.jpg_.webp"/>
                        <span class="gname">卡西欧手表男CASIO MRW-200HC-7B2 学生运动韩版简约防水指针表</span>
                        <div>
                            <span class="rmb"></span>
                            <span class="gprice">125</span>
                            <span class="gsales">268人购买</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/g1.jpg_200x200q90.jpg_.webp"/>
                        <span class="gname">卡西欧手表男CASIO MRW-200HC-7B2 学生运动韩版简约防水指针表</span>
                        <div>
                            <span class="rmb"></span>
                            <span class="gprice">125</span>
                            <span class="gsales">268人购买</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/g1.jpg_200x200q90.jpg_.webp"/>
                        <span class="gname">卡西欧手表男CASIO MRW-200HC-7B2 学生运动韩版简约防水指针表</span>
                        <div>
                            <span class="rmb"></span>
                            <span class="gprice">125</span>
                            <span class="gsales">268人购买</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/g1.jpg_200x200q90.jpg_.webp"/>
                        <span class="gname">卡西欧手表男CASIO MRW-200HC-7B2 学生运动韩版简约防水指针表</span>
                        <div>
                            <span class="rmb"></span>
                            <span class="gprice">125</span>
                            <span class="gsales">268人购买</span>
                        </div>
                    </a>
                </li>
            </ul>
        
        </div>
        
        
            
    </body>
</html>

 

CSS

* {
    padding: 0px;
    margin: 0px;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: #000;
}

body {
    background-color: #E8E2E0;
}

.container {
    width: 1190px;
    background-color: #fff;
    margin: 0px auto;
}

.title {
    width: 1190px;
    height: 64px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    margin-left: 20px;
}

.title span {
    font-size: 24px;
    margin-right: 10px;
}

.container .goods {
    width: 1190px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

.container .goods li {
    width: 215px;
    height: 345px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.container .goods li a {
    width: 215px;
    height: 345px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.container .goods li a img {
    width: 215px;
    height: 215px;
}

.container .goods li a .gname {
    line-height: 22px;
    width: 215px;
    height: 44px;
    font-weight: 400;
    overflow: hidden;
    margin-top: 9px;
}

.container .goods li a div {
    width: 215px;
    height: 26px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-end;
    margin-top: 7px;
}

.container .goods li a .rmb {
    display: inline-block;
    zoom: 1;
    *display: inline;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    margin-right: 2px;
    font-size: 12px;
    vertical-align: inherit;
    color: #ff6700;
}

.gprice {
    color: #ff4400;
    margin-right: 5px;
    font-size: 20px;    
}

.gsales {
    color: #999999;
}

 

HTML5——淘宝

上一篇:.NET 6 RC1 正式发布


下一篇:【AOJ-41】Least Common Multiple