ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

HTML5——淘宝

2021-09-15 07:02:18  阅读:22  来源: 互联网

标签:flex 7B2 MRW 200HC HTML5 淘宝 268 125


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;
}

 

标签:flex,7B2,MRW,200HC,HTML5,淘宝,268,125
来源: https://www.cnblogs.com/remix777/p/15270544.html

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有