网易严选html+css

 <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    * {
        margin: 0px;
        padding: 0px;
    }

    div.ym {
        width: 1519.2px;
        height: 36px;
        background-color: rgb(51, 51, 51);
        margin: 0 auto;
    }

    div#tz {
        line-height: 36px;
        text-indent: 20em;
        font-size: 12px;
        color: #CC9756;
        float: left;
        text-decoration: underline;
    }

    div.sy img {

        margin: 20px;
    }

    /* .ssan{
        width: 90px;
        height: 38px;
        float: left;
        font-weight: bold;
        color: orange;
        text-align: center;
        line-height: 38px;
        margin-left: 600px;
    } */
    div#db {
        float: right;
    }

    div.q1 {
        font-size: 12px;
        color: #fff;
        margin: 10px;
        float: left;
    }

    div.q2 {
        font-size: 12px;
        color: #fff;
        margin: 10px;
        float: left;
    }

    div.q3 {
        font-size: 12px;
        color: #fff;
        margin: 10px;
        float: left;
    }

    div.q4 {
        font-size: 12px;
        color: #fff;
        margin: 10px;
        float: left;
    }

    div.q5 {
        font-size: 12px;
        color: #fff;
        margin: 10px;
        float: left;
    }

    div.q6 {
        font-size: 12px;
        color: #fff;
        margin: 10px;
        float: left;
    }

    .sy {
        width: 1519.2px;
        height: 140px;
        background-color: white;
        margin: 0 auto;
    }

    input {
        width: 430px;
        height: 38px;
        margin-left: 230px;
        margin-bottom: 10px;
    }

    div.xpsf {
        font-size: 32px;
        margin-left: 210px;
        font-weight: bold;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    div.outer1 {
        width: 1900px;
        height: 420px;
        margin: 0 auto;
    }

    div.outer>div#one>div>img {
        width: 1519.2px;
        height: 420px;

    }

    .hong {
        float: left;
        ;
    }

    .首页 {
        font-weight: bold;
        height: 40px;
        /* float: left; */
    }

    .首页 div {
        width: 108px;
        height: 23.6px;
        float: left;
        margin: 27px 0 0 38px;

    }

    .首页 .首页1 {
        width: 54px;


    }

    .首页 .众筹 {
        width: 54px;
    }

    div.outer div.four {
        width: 1100px;
        height: 510px;
        margin: 0 auto;

    }

    div.outer>div.four>div {
        width: 265px;
        height: 365px;
        margin-right: 10px;
        float: left;
        display: block;
    }

    div.outer>div.four>div>img {
        width: 265px;
        height: 265px;
    }

    .w1 {
        color: white;
        background-color: orange;
        font-size: 12px;
        text-align: center;
        margin: 10px;
    }

    .w2 {
        color: black;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
        margin: 5px;
    }

    .w3 {
        color: red;
        border-radius: 18px;
        font-size: 15px;
        text-align: center;
        margin: 20px;
    }

    div.outer3 {
        width: 1100px;
        height: 580px;
        margin: 0 auto;
    }

    div.rqtj {
        font-size: 32px;
        margin-left: 210px;
        font-weight: bold;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    div.outer3>div {
        float: left;
    }

    div.outer3 div.left {
        width: 390px;
        height: 570px;
        background-color: white;
        margin-right: 10px;
    }

    div.outer3 div.left>img {
        width: 390px;
        height: 410px;
    }

    div.outer3 div.right {
        width: 699px;
        height: 580px;
        background: white;
    }

    div.outer3 div.right>div {
        width: 223px;
        height: 310px;
        background-color: white;
        float: left;
        margin-left: 10px;
        margin-bottom: 10px;
    }

    .e1 {
        color: white;
        background-color: #e36844;
        font-size: 12px;
        text-align: center;
        margin: 5px;
    }

    .e2 {
        color: black;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
        margin: 5px;
    }

    .e3 {
        color: red;
        border-radius: 18px;
        font-size: 15px;
        text-align: center;
        margin: 5px;
    }
</style>

 <body>
<div class="outer">
    <div class="ym">
        <div id="tz">关于新疆部分地区寄递管控通知</div>
        <div id="db">
            <div class="q1">登录/注册</div>
            <div class="q2">我的订单</div>
            <div class="q2">会员</div>
            <div class="q3">甄选家</div>
            <div class="q4">企业采购</div>
            <div class="q5">客户服务</div>
            <div class="q6">客户服务</div>
        </div>
    </div>
    <div class="sy">
        <!-- <div class="ssan">搜索</div> -->
        <img src="logo.jpg">
        <input type="text">
    </div>
    <div class="首页">
        <div class="首页1">首页</div>
        <div>居家生活</div>
        <div>服饰鞋包</div>
        <div>美食酒水</div>
        <div>个护清洁</div>
        <div>母婴亲子</div>
        <div>运动旅行</div>
        <div>数码家电</div>
        <div>严选全球</div>
        <div> 为你严选</div>
        <div class="众筹">众筹</div>
    </div>
    <div class="outer1">
        <div id="one">
            <div class="hong"><img src="./1.jpg" alt="" height="420px"></div>
        </div>
    </div>
    <div class="xpsf">新品首发</div>
    <div class="four">
        <div><img src="./黑芝麻.jpg" alt="">
            <div class="w1">新品限时购</div>
            <div class="w2">守护你的发际线，黑芝麻丸<br>100克</div>
            <div class="w3">¥29 <del>¥39</del></div>
        </div>
        <div><img src="./料理机.jpg" alt="">
            <div class="w1">杭州制造</div>
            <div class="w2">切丝擦丝切蒜辅食 家用食物<br>多功能料理机</div>
            <div class="w3">¥29.9</div>
        </div>
        <div><img src="./锅.jpg" alt="">
            <div class="w1">每满99减15元</div>
            <div class="w2">万古不易，锁味增鲜 日本万<br>古烧饭釜0.5L</div>
            <div class="w3">¥149</div>
        </div>
        <div><img src="./女鞋.jpg" alt="">
            <div class="w1">特价</div>
            <div class="w2">女士可机洗天丝平底鞋</div>
            <div class="w3">¥139 <del>¥159</del></div>
        </div>
    </div>
    <div class="rqtj">人气推荐</div>
    <div class="outer3">
        <div class="left">
            <img src="./2/猫粮.jpg" alt="">
            <div class="e1">特价</div>
            <div class="e2">全价猫粮</div>
            <div class="e3">¥78 <del>¥88</del></div>
        </div>
        <div class="right">
            <div>
                <img src="./2/凤爪.jpg" alt="">
                <div class="e1">新人特价</div>
                <div class="e2">告别啃食尴尬，秘制无<br>骨凤爪 108克</div>
                <div class="e3">¥13 <del>¥22</del></div>
            </div>
            <div><img src="./2/口罩.jpg" alt="">
                <div class="e1">新人特价</div>
                <div class="e2">【抢购】一次性医用口罩</div>
                <div class="e3">¥20 <del>¥139</del></div>
            </div>
            <div><img src="./2/咖啡.jpg" alt="">
                <div class="e1">每满150减20元</div>
                <div class="e2">口袋里的咖啡馆 日本浓缩 <br>胶囊咖啡液8颗装</div>
                <div class="e3">¥21.8</div>
            </div>
            <div><img src="./2/拖鞋.jpg" alt="">
                <div class="e1"></div>
                <div class="e2">轻弹云朵居家拖鞋</div>
                <div class="e3">¥9.9</div>
            </div>
            <div><img src="./2/洗衣液.jpg" alt="">
                <div class="e1">限时购</div>
                <div class="e2">清新英国梨香 强力去污<br>酵素洗衣液3kg/1kg</div>
                <div class="e3">¥29.9 <del>35</del></div>
            </div>
            <div><img src="./2/磨砂膏.jpg" alt="">
                <div class="e1">每满150减20元</div>
                <div class="e2">烟酰胺亮肤去鸡皮 氨基酸死 <br>海盐身体磨砂膏</div>
                <div class="e3">¥69</div>
            </div>
        </div>

猜你喜欢