前端实战——尚品汇(网页开发)

news2024/11/26 20:36:13

在这里插入图片描述
在这里插入图片描述

/* 基础设置 */
.container {
    width: 1190px;
    margin: 0 auto;
}
/* #region顶部导航条start */
.topbar {
    height: 30px;
    background-color: #ececec;
}
.welcome {
    height: 30px;
    line-height: 30px;
    font-size: 0;
    color: #666;
}
.welcome span,.welcome a {
    font-size: 12px;
}
.welcome .hello {
    margin-right: 28px;
}
.welcome .login {
    padding-right: 10px;
    border-right: 1px solid #666;
}
.welcome .register {
    padding-left: 10px;
}
.topbar-nav .list li {
    float: left;
}
.topbar-nav .list {
    height: 30px;
    line-height: 30px;
}
.topbar-nav .list li a {
    padding: 0 15px;
    border-right: 1px solid #666;
}
.topbar-nav .list li:first-child a {
    padding-left: 0;
}
.topbar-nav .list li:last-child a {
    padding-right: 0;
    border: 0;
}
/* #endregion顶部导航条end */

/* #region头部start */
.header {
    height: 120px;
}
.header .search input {
    width: 508px;
    height: 34px;
    border: 1px solid #dd302d;
}
.header .search button {
    width: 80px;
    height: 36px;
    background-color: #dd302d;
    vertical-align: top;
    background-image: url(../images/serch_icon.png);
    background-repeat: no-repeat;
    background-position: 28px 6px;
}
.header .search form {
    margin-top: 42px;
    font-size: 0;
}
/* #endregion头部end */

/* #region主导航区start */
.main-nav {
    height: 48px;
    border-bottom: 1px solid #dd302d;
}
.main-nav .all-types {
    width: 190px;
    height: 48px;
    line-height: 48px;
    background-color: #dd302d;
    color: white;
    text-align: center;
    font-size: 16px;
}
.main-nav-list {
    height: 48px;
    line-height: 48px;
 }
.main-nav-list li {
    float: left;
    margin: 0 10px;
    font-size: 16px;
}
/* #endregion主导航区end */

/* #region主要内容区start */
.main-content {
    margin-top: 10px;
}
.main-content .slide-nav {
    width: 190px;
    height: 458px;
    background-color: #F4F4F4;
    position: relative;
}
.main-content .slide-nav li {
    font-size: 14px;
    height: 28px;
    line-height: 28px;
    padding-left: 16px;
}
.main-content .slide-nav li:hover {
    background-color: #dd302d;
}
.main-content .slide-nav li:hover>a {
    color: white;
}
.second-menu {
    width: 680px;
    height: 458px;
    background-color: white;
    position: absolute;
    top: 0;
    left: 190px;
    padding-left: 20px;
    display: none;
}
.second-menu dd {
    float: left; 
}
.main-content .slide-nav li:hover .second-menu {
    display: block;
}
.second-menu dd a {
    padding: 0 10px;
    border-left: 1px solid #666;
}
.second-menu dt {
    font-weight: bold;
    float: left;
    width: 70px;
    margin-right: 10px;
}
.second-menu dl {
    height: 36px;
    line-height: 36px;
}
.second-menu dl:first-child {
    margin-top: 10px;
}

.main-content .banner {
    width: 690px;
    height: 458px;
    background-color: green;
    margin: 0 10px;
}
.slide-other .message {
    width: 260px;
    height: 156px;
    padding: 0 14px;
    border: 1px solid #d9d9d9;
}
.main-content .slide-other {
    width: 290px;
    height: 458px;
}
.slide-other .other-nav {
    margin-top: 10px;
    width: 290px;
    height: 290px;
    overflow: hidden;
}
.slide-nav .message .title {
    height: 38px;
    line-height: 38px;
    border-bottom: 1px solid #d9d9d9;
}
.slide-nav .message .title span {
    font-size: 14px;
}
.slide-nav .message .title a {
    font-size: 12px;
}
.slide-other .msg-list li {
    height: 26px;
    line-height: 26px;
}
.other-nav-list:first-child {
    margin-top: 16px;
}
.other-nav-list:nth-child(2) {
    margin: 17px 0;
}
.other-nav-list li{
    width: 48px;
    height: 70px;
    float: left;
    margin: 0 11px;
    text-align: center;
    cursor: pointer;
}
.other-nav-list li:first-child {
    margin-left: 16px;
}
.other-nav-list .picture {
    width: 48px;
    height: 48px;
    background-image: url('../images/精灵图-侧边功能.png');
    background-position: -48px 0;
}
.other-nav-list:nth-child(1) li:nth-child(1) .picture {
    background-position: 0 0;
}
.other-nav-list:nth-child(1) li:nth-child(2) .picture {
    background-position: -48px 0;
}
.other-nav-list:nth-child(1) li:nth-child(3) .picture {
    background-position: -96px 0;
}
.other-nav-list:nth-child(1) li:nth-child(4) .picture {
    background-position: -144px 0;
}
.other-nav-list:nth-child(2) li:nth-child(1) .picture {
    background-position: 0 -48px;
}
.other-nav-list:nth-child(2) li:nth-child(2) .picture {
    background-position: -48px -48px;
}
.other-nav-list:nth-child(2) li:nth-child(3) .picture {
    background-position: -96px -48px;
}
.other-nav-list:nth-child(2) li:nth-child(4) .picture {
    background-position: -144px -48px;
}
.other-nav-list:nth-child(3) li:nth-child(1) .picture {
    background-position: 0 -96px;
}
.other-nav-list:nth-child(3) li:nth-child(2) .picture {
    background-position: -48px -96px;
}
.other-nav-list:nth-child(3) li:nth-child(3) .picture {
    background-position: -96px -96px;
}
.other-nav-list:nth-child(3) li:nth-child(4) .picture {
    background-position: -144px -96px;
}
/* #endregion主要内容区end */

/* #region秒杀区start */
.seckill {
    margin-top: 10px;
}
.seckill img {
    float: left;
    margin-right: 11px;
    cursor: pointer;
}
.seckill img:last-child {
    margin-right: 0;
}
/* #endregion秒杀区end */

/* #region楼层区start */
.floor {
    margin-top: 48px;
}
.floor-name {
    font-size: 20px;
}
.floor-nav {
    height: 30px;
    line-height: 30px;
    padding-bottom: 4px;
    border-bottom: 2px solid #dd302d;
}
.floor-nav-list li{
    float: left;
    font-size: 14px;
}
.floor-nav-list li a {
    padding: 0 10px;
    border-right: 1px solid #666 ;
}
.floor-nav-list li:first-child a {
    padding-left: 0;
}
.floor-nav-list li:last-child a {
    padding-right: 0;
    border: 0;
}
.floor-info .item {
    float: left;
}
.floor-info .item1 {
    width: 190px;
    height: 392px;
    background-color: #f4f4f4;
    padding: 20px;
}
.item1-list {
    margin-bottom: 29px;
}
.item1-list li {
    width: 90px;
    height: 22px;
    padding-bottom: 3.5px;
    border-bottom: 1px solid #d9d9d9;
    font-size: 16px;
    text-align: center;
    float: left;
}
.item1-list li:nth-child(2n-1) {
    float: left;
}
.item1-list li:nth-child(2n) {
    float: right;
}
.item1-list li:nth-child(3),
.item1-list li:nth-child(4) {
    margin: 14.4px 0;
}
.floor-info .item2 {
    width: 340px;
    height: 432px;
}
.floor-info .item3 {
    width: 206px;
    height: 432px;
    border-right: 1px solid #e2e2e2;
}
.floor-info .item3 img,
.floor-info .item4 img,
.floor-info .item5 img {
    border-bottom: 1px solid #e2e2e2;
}
.floor-info .item4 {
    width: 206px;
    height: 432px;
    border-right: 1px solid #e2e2e2;
}
.floor-info .item5 {
    width: 206px;
    height: 432px;
}
/* #endregion楼层区end */

/* #region页脚区start */
.footer {
    margin-top: 450px;
    height: 440px;
    background-color: #483e3e;
}
.links-list {
    float: left;
    width: 190px;
    height: 176px;
    margin-top: 48px;
    margin-right: 10px;
}
.links-list:last-child {
    margin-right: 0px;
}
.links-list a {
    color: white;
    font-size: 14px;
}
.line {
    height: 1px;
    margin-top: 22px;
    background-color: #584d4d;
}
.bottom-links {
    text-align: center;
    margin-top: 47px;
}
.bottom-links-list {
    display: inline-block;
}
.bottom-links-list li{
    float: left;
}
.bottom-links-list li a {
    padding: 0 26px;
    border-right: 1px solid white;
}
.bottom-links-list li:first-child a {
    padding-left: 0;
}
.bottom-links-list li:last-child a {
    padding-right: 0;
    border: 0;
    
}
.copyright {
    margin-top: 10px;
    color: white;
}
/* #endregion页脚区end */
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>尚品汇</title>
    <!-- 引入页签图标 -->
    <link rel="shortcut icon" href="../../favicon.ico" type="image/x-icon">
    <!-- 引入重置样式 -->
    <link rel="stylesheet" href="../尚品汇_顶部导航栏/css/reset.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../尚品汇_顶部导航栏/css/index.css">
</head>
<body>
    <!-- 顶部导航条 -->
    <div class="topbar">
        <!-- 版心 -->
        <div class="container clearfix">
            <!-- 左侧欢迎区 -->
            <div class="welcome leftfix">
                <span class="hello">尚品汇欢迎您</span>
                <span></span>
                <a href="#" class="login">登录</a>
                <a href="#" class="register">免费注册</a>
            </div>
            <!-- 右侧导航条 -->
            <div class="topbar-nav rightfix">
                <ul class="list clearfix">
                    <li><a href="#">我的订单</a></li>
                    <li><a href="#">我的购物车</a></li>
                    <li><a href="#">我的尚品汇</a></li>
                    <li><a href="#">尚品汇会员</a></li>
                    <li><a href="#">企业采购</a></li>
                    <li><a href="#">关注尚品汇</a></li>
                    <li><a href="#">合作招商</a></li>
                    <li><a href="#">商家后台</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 头部 -->
    <div class="header">
        <div class="container clearfix">
            <!-- 左侧logo区 -->
            <div class="logo leftfix">
                <img src="../尚品汇_顶部导航栏/images/logo.png" alt="尚品汇">
            </div>
            <!-- 右侧搜索区 -->
            <div class="search rightfix">
                <form action="#">
                    <input type="text">
                    <button></button>
                </form>
            </div>
        </div>
    </div>

    <!-- 主导航区 -->
    <div class="main-nav">
        <div class="container clearfix">
            <div class="all-types leftfix">全部商品分类</div>
            <ul class="main-nav-list leftfix clearfix">
                <li><a href="#">尚品超市</a></li>
                <li><a href="#">优惠券</a></li>
                <li><a href="#">买啥</a></li>
                <li><a href="#">尚品家电</a></li>
                <li><a href="#">尚品生鲜</a></li>
                <li><a href="#">plus会员</a></li>
                <li><a href="#">进口好物</a></li>
                <li><a href="#">品牌闪购</a></li>
                <li><a href="#">拍卖</a></li>
                <li><a href="#">五金店</a></li>
            </ul>
        </div>
    </div>
  
    <!-- 主要内容区 -->
    <div class="main-content">
        <div class="container clearfix">
            <ul class="slide-nav leftfix">
                <li>
                    <!-- 一级菜单 -->
                    <a href="#">手机/运营商/数码</a>
                    <!-- 二级菜单 -->
                    <div class="second-menu">
                        <dl class="clearfix">
                            <dt><a href="#">电子书刊</a></dt>
                            <dd><a href="#">电子书</a></dd>
                            <dd><a href="#">网络原创</a></dd>
                            <dd><a href="#">数字杂志</a></dd>
                            <dd><a href="#">多媒体图书</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">音像</a></dt>
                            <dd><a href="#">音乐</a></dd>
                            <dd><a href="#">影视</a></dd>
                            <dd><a href="#">教育音像</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">英文原版</a></dt>
                            <dd><a href="#">少儿</a></dd>
                            <dd><a href="#">商务投资</a></dd>
                            <dd><a href="#">英语学习考试</a></dd>
                            <dd><a href="#">文学</a></dd>
                            <dd><a href="#">传记</a></dd>
                            <dd><a href="#">励志</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">文艺</a></dt>
                            <dd><a href="#">小说</a></dd>
                            <dd><a href="#">文学</a></dd>
                            <dd><a href="#">青春文学</a></dd>
                            <dd><a href="#">传记</a></dd>
                            <dd><a href="#">艺术</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">少儿</a></dt>
                            <dd><a href="#">胎教</a></dd>
                            <dd><a href="#">0-2岁</a></dd>
                            <dd><a href="#">3-6岁</a></dd>
                            <dd><a href="#">7-10岁</a></dd>
                            <dd><a href="#">11-14岁</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">人文社科</a></dt>
                            <dd><a href="#">历史</a></dd>
                            <dd><a href="#">哲学</a></dd>
                            <dd><a href="#">国学</a></dd>
                            <dd><a href="#">政治/军事</a></dd>
                            <dd><a href="">法律</a></dd>
                            <dd><a href="">心理学</a></dd>
                            <dd><a href="">文化</a></dd>
                            <dd><a href="">人文社科</a></dd>
                            <dd><a href="">社会科学</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">经管励志</a></dt>
                            <dd><a href="#">经济</a></dd>
                            <dd><a href="#">金融与投资</a></dd>
                            <dd><a href="#">管理</a></dd>
                            <dd><a href="#">励志与成功</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">生活</a></dt>
                            <dd><a href="#">健康与保健</a></dd>
                            <dd><a href="#">家庭与育儿</a></dd>
                            <dd><a href="#">旅游</a></dd>
                            <dd><a href="#">烹饪美食</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">科技</a></dt>
                            <dd><a href="#">工业技术</a></dd>
                            <dd><a href="#">科普读物</a></dd>
                            <dd><a href="#">建筑</a></dd>
                            <dd><a href="#">医学</a></dd>
                            <dd><a href="#">科学与自然</a></dd>
                            <dd><a href="#">计算机与互联网</a></dd>
                            <dd><a href="#">电子通信</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">教育</a></dt>
                            <dd><a href="#">中小学教辅</a></dd>
                            <dd><a href="#">教育与考试</a></dd>
                            <dd><a href="#">外语学习</a></dd>
                            <dd><a href="#">大中专教材</a></dd>
                            <dd><a href="#">科学与自然</a></dd>
                            <dd><a href="#">字典词典</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">艺术与收藏</a></dt>
                            <dd><a href="#">经济管理</a></dd>
                            <dd><a href="#">文化与艺术</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">其他</a></dt>
                            <dd><a href="#">工具书</a></dd>
                            <dd><a href="#">期刊杂志</a></dd>
                            <dd><a href="#">套装书</a></dd>
                            <dd><a href="#">打折图书</a></dd>
                        </dl>
                    </div>
                </li>
                <li>
                    <a href="#">电脑/办公</a>
                    <div class="second-menu">
                        <dl class="clearfix">
                            <dt><a href="#">手机通讯</a></dt>
                            <dd><a href="#">手机</a></dd>
                            <dd><a href="#">对讲机</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">运营商</a></dt>
                            <dd><a href="#">合约机</a></dd>
                            <dd><a href="#">选号中心</a></dd>
                            <dd><a href="#">装宽带</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">手机配件</a></dt>
                            <dd><a href="#">移动电源</a></dd>
                            <dd><a href="#">蓝牙耳机</a></dd>
                            <dd><a href="#">充电器</a></dd>
                            <dd><a href="#">数据线</a></dd>
                            <dd><a href="#">苹果周边</a></dd>
                        </dl>
                    </div>
                </li>
                <li>
                    <a href="#">家具/家居/家装/厨具</a>
                    <div class="second-menu">
                        <dl class="clearfix">
                            <dt><a href="#">大家电</a></dt>
                            <dd><a href="#">平板电脑</a></dd>
                            <dd><a href="#">空调</a></dd>
                            <dd><a href="#">冰箱</a></dd>
                            <dd><a href="#">洗衣机</a></dd>
                            <dd><a href="#">迷你音响</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">厨卫家电</a></dt>
                            <dd><a href="#">燃气灶</a></dd>
                            <dd><a href="#">油烟机</a></dd>
                            <dd><a href="#">热水器</a></dd>
                            <dd><a href="#">消毒柜</a></dd>
                            <dd><a href="#">洗碗机</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">厨卫小电</a></dt>
                            <dd><a href="#">料理机</a></dd>
                            <dd><a href="#">榨汁机</a></dd>
                            <dd><a href="#">电饭煲</a></dd>
                            <dd><a href="#">压力锅</a></dd>
                            <dd><a href="#">豆浆机</a></dd>
                            <dd><a href="#">咖啡机</a></dd>
                            <dd><a href="#">微波炉</a></dd>
                            <dd><a href="#">电磁炉</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">生活电器</a></dt>
                            <dd><a href="#">取暖电器</a></dd>
                            <dd><a href="#">净化器</a></dd>
                            <dd><a href="#">加湿器</a></dd>
                            <dd><a href="#">扫地机器人</a></dd>
                            <dd><a href="#">吸尘器</a></dd>
                            <dd><a href="#">挂烫机</a></dd>
                            <dd><a href="#">电话机</a></dd>
                            <dd><a href="#">电风扇</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">个户健康</a></dt>
                            <dd><a href="#">剃须刀</a></dd>
                            <dd><a href="#">脱毛器</a></dd>
                            <dd><a href="#">口腔护理</a></dd>
                            <dd><a href="#">电吹风</a></dd>
                            <dd><a href="#">美容仪</a></dd>
                            <dd><a href="#">理发器</a></dd>
                            <dd><a href="#">按摩椅</a></dd>
                            <dd><a href="#">血压计</a></dd>
                        </dl>
                    </div>
                </li>
                <li>
                    <a href="#">男装/女装/童装/内衣</a>
                    <div class="second-menu">
                        <dl class="clearfix">
                            <dt><a href="#">摄影摄像</a></dt>
                            <dd><a href="#">数码现货</a></dd>
                            <dd><a href="#">拍立得</a></dd>
                            <dd><a href="#">镜头</a></dd>
                            <dd><a href="#">户外器材</a></dd>
                            <dd><a href="#">数码相框</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">数码配件</a></dt>
                            <dd><a href="#">存储卡</a></dd>
                            <dd><a href="#">读卡器</a></dd>
                            <dd><a href="#">滤镜</a></dd>
                            <dd><a href="#">相机包</a></dd>
                            <dd><a href="#">数码支架</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">智能设备</a></dt>
                            <dd><a href="#">智能手环</a></dd>
                            <dd><a href="#">智能眼镜</a></dd>
                            <dd><a href="#">健康监测</a></dd>
                            <dd><a href="#">体感车</a></dd>
                            <dd><a href="#">无人机</a></dd>
                        </dl>
                    </div>
                </li>
                <li>
                    <a href="#">美妆/个户清洁/宠物</a>
                    <div class="second-menu">
                        <dl class="clearfix">
                            <dt><a href="#">宠物生活</a></dt>
                            <dd><a href="#">宠物粮食</a></dd>
                            <dd><a href="#">宠物零食</a></dd>
                            <dd><a href="#">医疗保健</a></dd>
                            <dd><a href="#">宠物玩具</a></dd>
                            <dd><a href="#">出行装备</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">生活日用</a></dt>
                            <dd><a href="#">保暖防护</a></dd>
                            <dd><a href="#">收纳用品</a></dd>
                            <dd><a href="#">雨伞雨具</a></dd>
                            <dd><a href="#">浴室用品</a></dd>
                            <dd><a href="#">洗漱用品</a></dd>
                        </dl>
                    </div>
                </li>
                <li>
                    <a href="#">女鞋/箱包/钟表/珠宝</a>
                    <div class="second-menu">
                        <dl class="clearfix">
                            <dt><a href="#">电脑整机</a></dt>
                            <dd><a href="#">笔记本电脑</a></dd>
                            <dd><a href="#">台式机</a></dd>
                            <dd><a href="#">超极本</a></dd>
                            <dd><a href="#">游戏本</a></dd>
                            <dd><a href="#">平板电脑</a></dd>
                            <dd><a href="#">平板配件</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">电脑配件</a></dt>
                            <dd><a href="#">CPU</a></dd>
                            <dd><a href="#">主板</a></dd>
                            <dd><a href="#">显卡</a></dd>
                            <dd><a href="#">硬盘</a></dd>
                            <dd><a href="#">SSD固态硬盘</a></dd>
                            <dd><a href="#">内存</a></dd>
                        </dl>
                    </div>
                </li>
                <li>
                    <a href="#">男鞋/运动/户外</a>
                    <div class="second-menu">
                        <dl class="clearfix">
                            <dt><a href="#">刀剪菜板</a></dt>
                            <dd><a href="#">菜刀</a></dd>
                            <dd><a href="#">剪刀</a></dd>
                            <dd><a href="#">多功能刀</a></dd>
                            <dd><a href="#">道具套装</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">水具酒具</a></dt>
                            <dd><a href="#">塑料杯</a></dd>
                            <dd><a href="#">运动水壶</a></dd>
                            <dd><a href="#">保温杯</a></dd>
                            <dd><a href="#">保温壶</a></dd>
                        </dl>
                    </div>
                </li>
                <li>
                    <a href="#">房产/汽车/汽车用品</a>                
                </li>
                <li>
                    <a href="#">母婴/玩具乐器</a>
                    <div class="second-menu">
                        <dl class="clearfix">
                            <dt><a href="#">男装</a></dt>
                            <dd><a href="#">衬衫</a></dd>
                            <dd><a href="#">针织衫</a></dd>
                            <dd><a href="#">夹克</a></dd>
                            <dd><a href="#">风衣</a></dd>
                            <dd><a href="#">牛仔裤</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">女装</a></dt>
                            <dd><a href="#">雪纺衫</a></dd>
                            <dd><a href="#">休闲裤</a></dd>
                            <dd><a href="#">小西装</a></dd>
                            <dd><a href="#">皮衣</a></dd>
                            <dd><a href="#">羽绒服</a></dd>
                        </dl>
                    </div>
                </li>
                <li>
                    <a href="#">食品/酒类/生鲜/特产</a>
                </li>
                <li>
                    <a href="#">艺术/礼品鲜花/农资绿植</a>
                </li>
                <li>
                    <a href="#">医药保健/计生情趣</a>
                </li>
                <li>
                    <a href="#">图书/文娱/教育/电子书</a>
                </li>
                <li>
                    <a href="#">机票/酒店/旅游/生活</a>
                </li>
                <li>
                    <a href="#">众筹/白条/保险/企业金融</a>
                </li>
                <li>
                    <a href="#">安装/维修/清洗/二手</a>
                    <div class="second-menu">
                        <dl class="clearfix">
                            <dt><a href="#">二手家电</a></dt>
                            <dd><a href="#">洗衣机</a></dd>
                            <dd><a href="#">烘干机</a></dd>
                            <dd><a href="#">烤箱</a></dd>
                            <dd><a href="#">微波炉</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">上门清洗</a></dt>
                            <dd><a href="#">油烟机</a></dd>
                            <dd><a href="#">橱柜</a></dd>
                            <dd><a href="#">灶台</a></dd>
                            <dd><a href="#"></a></dd>
                            <dd><a href="#">燃气灶</a></dd>
                        </dl>
                    </div>
                </li>
            </ul>
            <div class="banner leftfix">
                <img src="../尚品汇_顶部导航栏/images/banner主图.png" alt="">
            </div>
            <div class="slide-other leftfix">
                <div class="message">
                    <div class="title clearfix">
                        <span class="leftfix">尚品快报</span>
                        <a href="#" class="rightfix">更多&nbsp;&gt;</a>
                    </div>
                    <ul class="msg-list">
                        <li><a href="#">[特惠] 毛衣+直筒裤才是yyds</a></li>
                        <li><a href="#">[特惠] 毛衣+直筒裤才是yyds</a></li>
                        <li><a href="#">[特惠] 毛衣+直筒裤才是yyds</a></li>
                        <li><a href="#">[特惠] 毛衣+直筒裤才是yyds</a></li>
                    </ul>
                </div>
                <div class="other-nav">
                    <ul class="other-nav-list clearfix">
                        <li>
                            <div class="picture"></div>
                            <span>话费</span>
                        </li>
                        <li>
                            <div class="picture"></div>
                            <span>话费</span>
                        </li>
                        <li>
                            <div class="picture"></div>
                            <span>话费</span>
                        </li>
                        <li>
                            <div class="picture"></div>
                            <span>话费</span>
                        </li>
                    </ul>
                    <ul class="other-nav-list clearfix">
                        <li>
                            <div class="picture"></div>
                            <span>话费</span>
                        </li>
                        <li>
                            <div class="picture"></div>
                            <span>话费</span>
                        </li>
                        <li>
                            <div class="picture"></div>
                            <span>话费</span>
                        </li>
                        <li>
                            <div class="picture"></div>
                            <span>话费</span>
                        </li>
                    </ul>
                    <ul class="other-nav-list clearfix">
                        <li>
                            <div class="picture"></div>
                            <span>话费</span>
                        </li>
                        <li> <div class="picture"></div>
                            <span>话费</span>
                        </li>
                        <li>
                            <div class="picture"></div>
                            <span>话费</span>
                        </li>
                        <li>
                            <div class="picture"></div>
                            <span>话费</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- 秒杀 -->
    <div class="seckill">
        <div class="container clearfix">
            <img src="../尚品汇_顶部导航栏/images/seckill.png" alt="秒杀">
            <img src="../尚品汇_顶部导航栏/images/banner1.png" alt="秒杀1">
            <img src="../尚品汇_顶部导航栏/images/banner2.png" alt="秒杀2">
            <img src="../尚品汇_顶部导航栏/images/banner3.png" alt="秒杀3">
            <img src="../尚品汇_顶部导航栏/images/baner4.png" alt="秒杀4">
        </div>
    </div>

    <!-- 楼层 -->
    <div class="floor">
        <div class="container">
            <!-- 上部分 -->
            <div class="floor-nav clearfix">
                <span class="floor-name leftfix">家用电器</span>
                <ul class="floor-nav-list rightfix">
                    <li><a href="#">热门</a></li>
                    <li><a href="#">大家电</a></li>
                    <li><a href="#">生活电器</a></li>
                    <li><a href="#">厨房电器</a></li>
                    <li><a href="#">应季电器</a></li>
                    <li><a href="#">空气/净水</a></li>
                    <li><a href="#">高端电器</a></li>
                </ul>
            </div>
            <!-- 下部分 -->
            <div class="floor-info">
                <div class="item item1">
                    <ul class="item1-list clearfix">
                        <li><a href="#">节能补贴</a></li>
                        <li><a href="#">4k电视</a></li>
                        <li><a href="#">空气净化器</a></li>
                        <li><a href="#">IH电饭煲</a></li>
                        <li><a href="#">滚筒洗衣机</a></li>
                        <li><a href="#">电热水器</a></li>
                    </ul>
                    <img src="../尚品汇_顶部导航栏/images/编组.png" alt="广告图">
                </div>
                <div class="item item2">
                    <img src="../尚品汇_顶部导航栏/images/appliance_banner07.png" alt="广告图">
                </div>
                <div class="item item3">
                    <img src="../尚品汇_顶部导航栏/images/微波炉.png" alt="微波炉">
                    <img src="../尚品汇_顶部导航栏/images/空气炸锅.png" alt="空气炸锅">
                </div>
                <div class="item item4">
                    <img src="../尚品汇_顶部导航栏/images/冰箱.png" alt="冰箱">
                </div>
                <div class="item item5">
                    <img src="../尚品汇_顶部导航栏/images/电饭煲.png" alt="电饭煲">
                    <img src="../尚品汇_顶部导航栏/images/电饭煲2.png" alt="电饭煲2">
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <div class="footer">
        <div class="container">
            <!-- 顶部链接 -->
            <div class="top-links clearfix">
                <ul class="links-list">
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物流程</a></li>
                    <li><a href="#">会员介绍</a></li>
                    <li><a href="#">生活旅行</a></li>
                    <li><a href="#">常见问题</a></li>
                    <li><a href="#">大家电</a></li>
                    <li><a href="#">联系客服</a></li>
                </ul>
                <ul class="links-list">
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物流程</a></li>
                    <li><a href="#">会员介绍</a></li>
                    <li><a href="#">生活旅行</a></li>
                    <li><a href="#">常见问题</a></li>
                    <li><a href="#">大家电</a></li>
                    <li><a href="#">联系客服</a></li>
                </ul>
                <ul class="links-list">
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物流程</a></li>
                    <li><a href="#">会员介绍</a></li>
                    <li><a href="#">生活旅行</a></li>
                    <li><a href="#">常见问题</a></li>
                    <li><a href="#">大家电</a></li>
                    <li><a href="#">联系客服</a></li>
                </ul>
                <ul class="links-list">
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物流程</a></li>
                    <li><a href="#">会员介绍</a></li>
                    <li><a href="#">生活旅行</a></li>
                    <li><a href="#">常见问题</a></li>
                    <li><a href="#">大家电</a></li>
                    <li><a href="#">联系客服</a></li>
                </ul>
                <ul class="links-list">
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物流程</a></li>
                    <li><a href="#">会员介绍</a></li>
                    <li><a href="#">生活旅行</a></li>
                    <li><a href="#">常见问题</a></li>
                    <li><a href="#">大家电</a></li>
                    <li><a href="#">联系客服</a></li>
                </ul>
                <ul class="links-list">
                    <li><a href="#">购物指南</a></li>
                    <li><a href="#">购物流程</a></li>
                    <li><a href="#">会员介绍</a></li>
                    <li><a href="#">生活旅行</a></li>
                    <li><a href="#">常见问题</a></li>
                    <li><a href="#">大家电</a></li>
                    <li><a href="#">联系客服</a></li>
                </ul>
            </div>
            <!-- 分割线 -->
            <div class="line"></div>
            <!-- 底部链接 -->
            <div class="bottom-links">
                <ul class="bottom-links-list clearfix">
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">联系客服</a></li>
                    <li><a href="#">合作招商</a></li>
                    <li><a href="#">商家帮助</a></li>
                    <li><a href="#">销售中心</a></li>
                    <li><a href="#">手机尚品</a></li>
                    <li><a href="#">友情链接</a></li>
                    <li><a href="#">销售联盟</a></li>
                    <li><a href="#">隐私政策</a></li>
                </ul>
                <div class="copyright">京ICP备12345678901</div>
            </div>
        </div>
    </div>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/718451.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

AIGC - Stable Diffusion WebUI 图像生成工具的环境配置

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/131528224 Stable Diffusion WebUI 是一款基于深度学习的图像生成工具&#xff0c;根据用户的输入文本或图像&#xff0c;生成高质量的新图像&…

关于VMware虚拟空间的创建、Linux系统的安装

文章目录 前言一、Windows用户安装VMware软件1.1 下载VMware1.2 正常安装VMware后&#xff0c;该软件是要收费的&#xff0c;但是下面的链接可以让你使用很久 二、Mac用户安装VMware软件2.1 下载macOS版本&#xff1a;VMware Fusion2.2 正常安装VMware后&#xff0c;该软件是要…

「2024」预备研究生mem-形式逻辑强化:推矛盾

一、推矛盾 易错题&#xff1a;重点 重点&#xff1a; 二、课后题 三、每日一练

新版本vscode使用配置文件功能,解决不同项目使用不同的插件

如果你同时有vue2,vue3的项目。一定会遇到插件的问题。因为vue2项目插件是使用vetur的&#xff0c;vue3是使用volar的。 以前vscode为了在不同项目中能使用不同的配置文件&#xff0c;是使用工作区的概念去解决的&#xff0c;但是比较复杂而且不好用。 现在新版本的vscode&…

【温故而知新】Android架构模式

Android项目工程中常用的架构模式有MVC, MVP, MVVM以及现在新出的MVI。 下面一起温故而知新。 MVC MVC&#xff08;Model-View-Controller&#xff09;是一种在Android应用程序中使用的架构模式&#xff0c;用于实现松耦合、可测试和可维护的应用程序。 MVC架构模式包括三个…

高级篇十六、多版本并发控制(重要)

目录 1、什么是MVCC2、快照读与当前读2.1 快照读2.2 当前读 3、复习3.1 隔离级别3.2 隐藏字段、Undo Log版本链 4、MVCC实现原理之ReadView4.1 什么是ReadView&#xff1f; 1、什么是MVCC MVCC &#xff08;Multiversion Concurrency Control&#xff09;&#xff0c;多版本并…

Django之ORM的锁,开启事务,Ajax

一、行锁 select_for_update(nowaitFalse, skip_lockedFalse) 注意必须用在事务里面&#xff0c;至于如何开启事务&#xff0c;我们看下面的事务一节 Book.objects.select_for_update().filter(nid3) # 锁住nid3的行select_for_update中的两个参数了解即可&#xff0c;因为在…

机器学习入门

AI人工智能 ANI 弱人工智能&#xff0c;狭义人工智能&#xff0c;指的是一种针对特定任务或领域进行优化的人工智能&#xff0c;例如语音识别、图像识别、自然语言处理、推荐系统 AGI 通用人工智能&#xff0c;强人工智能&#xff0c; ASI 超级人工智能&#xff0c;超人工智…

Erupt框架学习

Erupt框架学习 Erupt框架Erupt简介学习EruptEruptFieldErupt的逻辑删除Erupt的自定义按钮多数据源配置 Erupt框架 Erupt简介 最近因为工作所以接触到了一个低代码框架Erupt。这是一个通用的配置管理框架&#xff0c;主打就是零前端代码&#xff0c;急速开发通用管理框架。 Er…

C# 如何调用python,避免重复造轮子

文章目录 原因资源调用python文件需求解决方案1、C#里面运行python引入python文件&#xff0c;再调用其中的方法启动python脚本&#xff0c;监听返回值改造一下&#xff0c;可以入参的python调用查看是否等待python运行完成之后再运行C#如果参数比较复杂 开一个python网络后端 …

如何用Airtest脚本无线连接Android设备?

1. 前言 之前我们已经详细介绍过如何用AirtestIDE无线连接Android设备&#xff1a; 手把手教你用AirtestIDE无线连接手机&#xff01; &#xff0c;它的关键点在于&#xff0c;需要先 adb connect 一次&#xff0c;才能点击 connect 按钮无线连接上该设备&#xff1a; 但是有很…

​浅谈大型语言模型

大型语言模型&#xff08;Large Language Models&#xff0c;LLMs&#xff09;是一类强大的人工智能模型&#xff0c;具有出色的自然语言处理能力。它们在许多任务中表现出色&#xff0c;如机器翻译、文本摘要、对话生成和情感分析等。下面我们将介绍大型语言模型的训练和生成过…

海康监控摄像机接入NTV GBS GB28181平台实现远程调取监控视频

海康威视各种型号监控摄像头或硬盘录像机(NVR/HVR)接入NTV GBS GB28181平台配置过程都非常简单明了&#xff0c;但有些细节需要注意&#xff0c;避免走弯路踩泥坑。 1、基本要求 1)网络要求 总体来说&#xff0c;只要监控设备和GB28181平台的网络是连通的&#xff0c;设备可以主…

MATLAB基础篇(上)

一、MATLAB简介 MATLAB(Matrix Laboratory, 即矩阵实验室)是MathWork公司推出的一套高效率的数值计算和可视化软件.MATLAB是当今科学界最具影响力、也是最具活力的软件, 它起源于矩阵运算, 并已经发展成一种高度集成的计算机语言.它提供了强大的科学运算、灵活的程序设计流程、…

保姆级python环境配置(anaconda+pycharm+cuda+cudnn+pytorch)

文章目录 前言一、如何下载anaconda1、下载网址2、版本选择3、下载流程4、注意事项 二、如何下载pycharm1、下载网址2、下载流程 三、更新NVIDIA驱动1、下载网址2、选择相应配置进行下载 四、如何下载cuda1、查看可安装的cuda版本号2、下载网址3、下载流程4、注意事项 五、如何…

牛客网数据库sql实战基础知识

sql基础知识 1.concat(a,“-”,b)&#xff1a; 将a和b列&#xff0c;连接成字符串&#xff0c;用-分割后输出成一列。&#xff08;分隔符在参数中间&#xff09; 2.insert into values(),()&#xff1a; 插入多列时用逗号分割&#xff0c;不需要在最外层加再加括号。 3.inse…

工信部新材料大数据创新联盟成立,龙讯旷腾作为首批会员单位参与大会

近日&#xff0c;“新材料大数据创新联盟”成立大会暨第一届理事会在京召开。为深入贯彻国家创新驱动发展战略&#xff0c;联盟在工业和信息化部指导下&#xff0c;由北京科技大学、中国钢研科技集团有限公司、中关村材料试验技术联盟联合材料和信息技术领域重点高校、科研院所…

浅学CSS

目录 CSS 是什么 基本语法规范 引入方式 内部样式表 行内样式表 外部样式 代码风格 样式格式 样式大小写 空格规范 选择器 选择器的功能 选择器的种类 基础选择器 标签选择器 类选择器 id 选择器 通配符选择器 基础选择器小结 复合选择器 后代选择器 子选…

<C语言> 指针(上)

1.指针是什么&#xff1f; 指针&#xff08;Pointer&#xff09;是一种特殊的变量类型&#xff0c;它存储了一个内存地址。可以将指针视为存储了另一个变量的地址的变量。通过指针&#xff0c;可以直接访问和修改内存中的数据。 指针提供了一种间接访问内存的方式&#xff0c…