有品分页列表

最新推荐文章于 2024-07-09 13:44:42 发布

yonghen008

最新推荐文章于 2024-07-09 13:44:42 发布

阅读量198

点赞数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>有品分页</title>
        <link rel="stylesheet" href="css/youping_new_file.css" />
    </head>
    <body>
        <div id="theme">
            <div class="topic  ">
                <span>登录</span>
                <span>注册</span>
                <span><img src="img/APP下载 (3).png">
                下载app</span>
            </div>
            <div class="yongp_body">
                <div class="body_title">
                    <span><img class="yongp_body_log" src="img/下载.png"></span>                  
                    <span class="body_search">
                        <span class="body_search_add">
                            <img src="img/搜索.png">
                            <input type="text" value="冬日里不能错过的美食" />
                        </span>
                        <img src="img/购物车空.png">
                    </span>
                </div>
                <div class="body_directory  ">
                    <span>有品推荐 </span>
                    <span>家电 </span>
                    <span>影音</span>
                    <span>餐厨</span>
                    <span>服饰</span>
                    <span>智能</span>
                    <span>健康</span>
                    <span>洗护</span>
                    <span>日杂</span>
                    <span>饮食</span>
                    <span>居家</span>
                    <span>手机</span>
                    <span>箱包</span>
                    <span>配件</span>
                    <span>婴童</span>
                    <span>出行</span>
                    <span>品牌</span>
                </div>
            </div>
        </div>
        <div class="body_top clearfix">
            <div class="youping_body">
                <div class="youping_body_empty_width">

                </div>
                <div class="topic_img_most">
                    <img src="img/a1.webp.jpg">
                </div>
                <div class="topic_des_img">
                    <div class="topic_des_img_onefour">
                        <img src="img/a2.webp.jpg">
                    </div>
                    <div class="topic_des_img_onefour">
                        <img src="img/a3.webp.jpg">
                    </div>
                    <div class="topic_des_img_onefour">
                        <img src="img/a4.webp.jpg">
                    </div>
                    <div class="topic_des_img_onefour">
                        <img src="img/a5.webp.jpg">
                    </div>

                </div>
                <div class="topic_des_all">
                    <div class="topic_des_all_one">
                            <span class="font_medium">炽魂全景光效专业电竞鼠标</span><br>
                            <span class="font_small  color_hui">【限时赠礼】欧姆龙游戏微动，12000DPI，约1680万色</span>
                    </div>
                    <div class="topic_des_all_two">
                        <div class="topic_des_all_two_small">
                            <span>售价</span>
                        </div>
                        <div class="topic_des_all_two_large">
                            <span class="money">¥ 499.00</span>
                        </div>
                        <div class="topic_des_all_two_small">
                            <span>服务</span>
                        </div>
                        <div class="topic_des_all_two_large font_medium  font_add">
                            <span>有品甄选精品</span>
                            <span>限时免邮（活动期间）</span><br>
                            <span>（北京）科技有限公司发货并提供售后</span>
                        </div>
                    </div>
                    <div class="topic_des_all_three">
                        <div class="topic_des_all_two_small">
                            <span>数量</span>
                        </div>
                        <div class="topic_des_all_two_large topic_des_all_two_large_add">
                            <div class="float_left"><button >-</button></div>
                            <div class="float_left"  style="width:25px"><input  value="1"></input></div>
                            <div class="float_left"><button >+</button></div>
                        </div>
                    </div>
                    <div class="topic_des_all_four">
                        <div class="topic_des_all_four_medium" >
                            <span class="font_size_large color_hui" style="border: 1px solid black;padding:10px;">
                                社群中心|立即</span>
                        </div>
                        <div class="topic_des_all_four_medium">
                            <span class="font_size_large color_white">加入购物车</span>
                        </div>
                        <div class="topic_des_all_two_small">
                            <span style="border: 1px solid black;padding:5px;">收藏</span>
                        </div>
                    </div>
                </div>
                <div class="body_else">

            </div>
            </div>
            <div class="body_else">
                <div class="body_else_title">
                    <div class="body_else_title_three">
                        <span>商品详情</span>
                    </div>
                    <div class="body_else_title_three">
                        <span>评论</span>
                    </div>
                    <div class="body_else_title_three">
                        <span>常见问题</span>
                    </div>
                </div>
                <div class="body_else_img">
                    <img src="img/b1.jpg">
                </div>
                <div class="body_else_img">
                    <img src="img/b2.jpg">
                </div>
                <div class="body_else_img">
                    <img src="img/b3.jpg">
                </div>
                <div class="body_else_img">
                    <img src="img/b4.jpg">
                </div>
                <div class="body_else_img">
                    <img src="img/b5.jpg">
                </div>
                <div class="body_else_img">
                    <img src="img/b6.jpg">
                </div>
                <div class="body_else_img">
                    <img src="img/b7.jpg">
                </div>
                <div class="body_else_img">
                    <img src="img/b8.jpg">
                </div>
                <div class="body_else_img">
                    <img src="img/b9.jpg">
                </div>
                <div class="body_else_img">
                    <img src="img/b10.jpg">
                </div>
                <div class="body_else_img">
                    <img src="img/b11.jpg">
                </div>
                <div class="body_else_img">
                    <img src="img/b12.jpg">
                </div>
                <div class="body_else_img">
                    <img src="img/b13.jpg">
                </div>
            </div>
            <div class="youping_right">
                <div class="youping_right_three">
                    <img src="img/app下载.png">   
                    <div class="youping_right_three_text" style="border-bottom:1px solid silver">
                        下载APP
                    </div>
                </div>
            <div class="youping_right_three" >
                <img src="img/推荐有礼.png">    
                <div class="youping_right_three_text" style="border-bottom:1px solid silver">
                    新人有礼
                </div>
            </div>
            <div class="youping_right_three" >
                <img src="img/火箭.png">  
                <div class="youping_right_three_text">
                    回到顶部
                </div>
            </div>
        </div>
        <div class="youping_descipt">
            <div class="youping_descipt_img clearfix" >
                <img src="img/111.png">                         
            </div>
            <div class="youping_descipt_img clearfix" >
                <div class="youping_descipt_img_text">
                    版权归米家商城所有
                </div>

            </div>
            <div class="youping_descipt_addres clearfix" >

                <div class="youping_descipt_addres_text">
                    ©mi.com京ICP证110507号京ICP备10046444号京公网安备11010802020134号京网文[2014] 0059-0009号
                    公司名称：小米通讯技术有限公司联系电话：010-60606666
                </div>

            </div>
            <div class="youping_descipt_img clearfix" >
                <img src="img/112.png">


            </div>

            </div>
        </div>
    </body>
</html>

.clearfix:after {content:""; display:block; height:0; visibility:hidden; clear:both; }

.clearfix { *zoom:1; }


.topic{
    background: black;
    color: white;
    width:100%;
    height: 40px;
    position: relative;
    line-height: 40px;
}

.topic img{
    height: 20px;
    width: 20px;
}
body{
margin: 0;}
.topic span{
    position: relative;
    left:78%;
}
.clearfix:after {content:""; display:block; height:0; visibility:hidden; clear:both; }

.clearfix { *zoom:1; }

.yongp_body{
    width:80%;
    margin:0 auto;
}


.yongp_body_log{
    width:100px;
    height:40px;
    margin: 20px 10px;
}

.body_search{
    float:right;
    padding-top:15px;
    margin: 20px 10px;
}

.body_search input{
    border:none;
    outline: none;

}

.body_search_add{
    border-bottom: solid 2px;
}
.body_directory span{
    padding: 10px 12px;
}

.body_top{
    height: 10px;
    width:100%;

}

.youping_body{
    margin:10px auto;
    height: 500px;
    width:80%;

}

.youping_body_empty_width{
    height: 50px;
    width:100%;

}

.topic_img_most{
    height:440px;
    width:30%;

        float: left;
}

.topic_img_most img,.topic_des_img_onefour img{
    height:100%;
    width:100%;
}

.topic_des_img{
    height:440px;
    width:120px;

    float: left;
}

.topic_des_img_onefour{
    height:93px;
    width:100px;

    margin-left:20px;
    margin-bottom:20px  ;
}

.topic_des_all{
    height:440px;
    width:620px;

    float: left;
}

.topic_des_all_one{
    height:70px;
    width:615px;

    float: left;
    line-height: 30px;
    padding-left:50px;
}

.topic_des_all_two{
    height:150px;
    width:615px;

    float: left;
}

.topic_des_all_two_small{
    height:70px;
    width:70px;

    float: left;
}

.topic_des_all_two_small span:hover{
    background:darkkhaki ;
}

.topic_des_all_two_small span{
    margin-left:20px;
    line-height: 70px;
}

.topic_des_all_two_large{
    height:70px;
    width:540px;

    float: left;
}

.topic_des_all_two_large span{
    margin-left:20px;
}

.money{
    color:red;
    font-size: 50px;
}

.topic_des_all_three{
    height:70px;
    width:615px;

    float: left;
}

.font_add{
    padding-top:10px;
    line-height: 30px;
}

.topic_des_all_two_large_add{
    line-height: 75px;
    position: relative;
    left:20px;
}

.topic_des_all_two_large_add button,.topic_des_all_two_large_add input{
    padding:0px
    margin:0px;
    background: #ffffff;
}

.float_left{
    float: left;
}

.float_left input{
    width:100%;
    text-align: center;
}

.topic_des_all_four{
    height:150px;
    width:615px;

    float: left;
}

.topic_des_all_four_medium{
    height:70px;
    width:200px;

    float: left;
    margin-right: 20px;
}

.font_size_large{
    font-size: 25px;
    line-height: 70px;
    position: relative;
    left:20px;  
}

.color_white{
    color:white;
    background: darkkhaki;
    padding:12px 30px;
}

.font_medium{
    font-size:medium
}

.font_small{
    font-size:small
}

.color_hui{
    color:darkkhaki
}

.body_else{
    width:800px;
    left:10%;
    position: relative;
}

.body_else_title{
    width:800px;
    height:50px;
    background: khaki;  
}
.body_else_title_three{
    width:150px;
    height:50px;
    float:left;
    text-align: center;
    line-height: 50px;

}

.body_else_title_three:hover{
    border-bottom: 1px solid midnightblue;  

}

.body_else_img{
    width:800px;
    height:800px;

}

.body_else_img img{
    width:100%;
    height:100%;
}

.youping_right{
    width: 90px;
    height: 168px;  
    position: fixed;
    top:45%;
    right:10px;
    box-shadow:0px 0px 5px 3px #888888;
}

.youping_right_three{
    width: 90px;
    height: 56px;

}

.youping_right_three img{
    width: 40px;
    height: 60%;
    opacity: 0.8;
    margin-left:25px;
}

.youping_right_three_text{
    font-size: x-small;
    text-align:center;
    width: 80%;
    padding-left: 10%;
}

.youping_descipt{

    margin-top:50px;
    margin-left:10%;
    margin-right: 10%;
    width:80%;
    height: 100px;
    padding: 0;
}

.youping_descipt_img{
    width:15%;
    height:100px;    
    float:left;
    position: relative;
    margin-left:3px ;
    margin-top:5px ;

}

.youping_descipt_img img{
    width: 100%;
    height: 70px;
}

.youping_descipt_addres{
    width:50%;
    height:150px;    
    float:left;
    position: relative;
    margin-left:3px ;
    margin-top:5px ;


}

.youping_descipt_img_text{
    font-size: x-small;
    line-height: 70px;
    }

.youping_descipt_addres_text{
    font-size: x-small;
    line-height: 35px;
    text-align: left;
    }

yonghen008

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
有品分页列表

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>有品分页</title> <link rel="stylesheet" href="css/youping_new_file.css" /> </head> <body> <div id="th
复制链接

扫一扫