css2学习总结之尚品汇静态页面

星空寻流年

已于 2025-04-07 09:58:33 修改

阅读量751

点赞数 20

分类专栏：前端基础(css+html) 文章标签：学习 css

于 2025-04-07 09:56:19 首次发布

本文链接：https://blog.csdn.net/qq_36260963/article/details/147036734

版权

前端基础(css+html) 专栏收录该内容

29 篇文章

订阅专栏

css2总结之尚品汇

一、布局

在 PC 端网页中，一般都会有一个固定宽度且水平居中的盒子，来显示网页的主要内容，这是网页
的版心。
版心的宽度一般是 960 ~ 1200 像素之间。
版心可以是一个，也可以是多个。

二、布局相关名词

我们一般布局给对应的class取一个名称，该名称有一定的的要求，那就是需要见名之意，我们看一看默认的规范

位置
顶部导航条	topbar
页头	header 、 page-header
导航	nav 、 navigator 、 navbar
搜索框	search 、 search-box
横幅、广告、宣传图	banner
主要内容	content 、 main
侧边栏	aside 、 sidebar
页脚	footer 、 page-footer

三、重置默认样式

p 元素有默认的上下 margin 。
h1~h6 标题也有上下 margin ，且字体加粗。
body 元素有默认的 8px 外边距。
超链接有默认的文字颜色和下划线。
ul 元素有默认的左 pading 。
…

在早期，元素默认样式，能够让我们快速的绘制网页，但如今网页的设计越来越复杂，内容越来越
多，而且很精细，这些默认样式会给我们绘制页面带来麻烦；而且这些默认样式，在不同的浏览器
上呈现出来的效果也不一样，所以我们需要重置这些默认样式。

方案1：全局选择器

{
margin: 0;
padding: 0;
 ......
}

此种方法，在简单案例中可以用一下，但实际开发中不会使用，因为 * 选择的是所有元素，而并
不是所有的元素都有默认样式；而且我们重置时，有时候是需要做特定处理的，比如：想让 a 元
素的文字是灰色，其他元素文字是蓝色。

方案2：reset.css

选择到具有默认样式的元素，清空其默认的样式

经过 reset 后的网页，好似“一张白纸”，开发人员可根据设计稿，精细的去添加具体的样式。

方案3：Normalize.css

Normalize.css 是一种最新方案，它在清除默认样式的基础上，保留了一些有价值的默认样式。

官网地址：http://necolas.github.io/normalize.css/

相对于 reset.css ， Normalize.css 有如下优点：

1. 保护了有价值的默认样式，而不是完全去掉它们。
2. 为大部分HTML元素提供一般化的样式。
3. 新增对 HTML5 元素的设置。
4. 对并集选择器的使用比较谨慎，有效避免调试工具杂乱。

备注： Normalize.css 的重置，和 reset.css 相比，更加的温和，开发时可根据实际情况进行
选择。

4、尚品汇

案例是根据尚硅谷老师，天禹老师的视频讲解的尚品汇案例结合所实现的一套静态页面，参照的是视频讲解。

码云地址：git clone https://gitee.com/numyang/css-shangpinhui.git

完成后的效果

4.1 文件结构

源码地址：git clone https://gitee.com/numyang/css-shangpinhui.git

里面目录不是一个整体页面，也是没一章节都有一个对应的文件夹，到最终的页脚整个页面完成

4.2 reset.css

里面是重置样式，多个官网均有下载

/* 基础设置 */
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{
  margin: 0;
  padding: 0;
}

ul,ol {
  list-style: none;
}

img {
  /* 底部留白 */
  display: block;
border:0;
}

b,strong {
  font-weight: 400;
}

h1,h2,h3,h4,h5,h6 {
  /* 父元素字号的百分比 */
  font-size: 100%;
  font-weight: normal;
}

i,em {
  /* 不倾斜 */
  font-style: normal;
}

u,ins,s,del {
  /* 去掉中划线和下划线 */
  text-decoration: none;
}

table {
  border: 1px solid #999;
  /* 相当于是cellspacing */
  border-spacing: 0;
  /* 1px边框 */
  border-collapse: collapse;
}

td,th {
  border: 1px solid #999;
}

input,button {
  /* 去掉轮廓线 */
  outline: none;
  border:none;
}

/* 风格设置 */
body {
  font: 12px/1.5 "Microsoft YaHei", Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
  color: #333;
}

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

a:hover {
  color:#DD302D;
  text-decoration: none;
}

.leftfix {
  float: left;
}

.rightfix {
  float: right;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

4.2 index.html

页面结构，div布局相关

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <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="regiester">免费注册</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>

    <!-- 头部logo区域 -->
    <div class="header">
      <div class="container clearfix">
         <div class="logo leftfix">
            <img src="../images/logo.png" alt="logo">
         </div>
         <div class="search rightfix">
            <form action="#">
                <input type="text">
                <button></button>
            </form>
         </div>
      </div>
    </div>


    <!-- 主导航区 -->
    <div class="mian-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="slide-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="slide-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="slide-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="slide-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="slide-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="slide-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="slide-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>
                  <div class="slide-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="slide-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="slide-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>
                  </div>
              </li>
              <li>
                  <a href="#">艺术/礼品鲜花/农资绿植</a>
                  <div class="slide-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="slide-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="#">DHA</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="slide-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="slide-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="slide-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>
              <li>
                  <a href="#">安装/维修/清洗/二手</a>
                  <div class="slide-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="other-news">
                    <div class="title clearfix">
                        <span class="leftfix">尚品快报</span>
                        <a  class="rightfix" href="#">更多&nbsp;&gt;</a>
                    </div>
                    <ul class="msg-list">
                        <li><a href="#">[特惠] 毛衣+直筒裤，才是YYDS。</a></li>
                        <li><a href="#">[特惠] 超大容量的满足感来啥子于</a></li>
                        <li><a href="#">[特惠] 每日一件，衣柜满到塞不下。</a></li>
                        <li><a href="#">[特惠] 媳妇儿再买，我就疯给他看。</a></li>
                    </ul>
                </div>
                <div class="other-nav-icon">
                     <ul class="other-nav-item 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-item 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-item 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="banner图1">
            <img src="../images/banner2.png" alt="banner图2">
            <img src="../images/banner3.png" alt="banner图3">
            <img src="../images/baner4.png" alt="banner图4">
         </div>
     </div> 


     <!-- 楼层1 -->
     <div class="floor">
         <div class="container">
            <div class="floor-nav clearfix">
                 <span class="leftfix">家用电器</span>
                 <ul class="rightfix 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>
                 </ul>   
            </div>
            <div class="floor-inf clearfix">
                 <div class="item item1">
                    <ul class="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="商品1">
                 </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>

      <!-- 楼层2 -->
      <div class="floor">
        <div class="container">
           <div class="floor-nav clearfix">
                <span class="leftfix">家用电器</span>
                <ul class="rightfix 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>
                </ul>   
           </div>
           <div class="floor-inf clearfix">
                <div class="item item1">
                   <ul class="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="商品1">
                </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="#">211限时达</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>
                </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>
                </ul>
                <ul class="links-list">
                    <li><a href="#">特色服务</a></li>
                    <li><a href="#">夺宝岛</a></li>
                    <li><a href="#">DIY装机</a></li>
                    <li><a href="#">延保服务</a></li>
                    <li><a href="#">尚品汇E卡</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="#">尚品汇已向全国2661个区县</a></li>
                    <li><a href="#">提供自 营配送服务，支持货到</a></li>
                    <li><a href="#">付款、POS 机刷卡和售后上门</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="links-item 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>

4.4 index.css

里面包含的 index.html页面给加的一层外衣。样式都在这里面

/* 版心 */
.container {
   width: 1190px;
   margin: 0 auto;
}


/* #region  顶部开始 */
.topbar {
   height: 30px;
   background-color: #ECECEC;
}

.topbar .welcome {
  height: 30px;
  line-height: 30px;
  font-size: 0;
  color: #666666;
}

.topbar .welcome span,a {
  font-size: 12px;
}

.topbar .hello {
  margin-right: 28px;
}

.topbar .login {
  padding-right: 10px;
  border-right: 1px solid #666666;
}

.topbar .regiester {
  margin-left: 10px;
}

/*  */
.topbar .topbar-nav {
   height: 30px;
   line-height: 30px;
}

.topbar-nav .list li {
   float: left;
}


.topbar-nav .list li>a {
  border-right: 1px solid #666666;
  padding: 0 15px;
}

.topbar-nav .list li:first-child>a {
  padding-left: 0;
}

.topbar-nav .list li:last-child>a {
  border: 0;
  padding-right: 0;
}


/* #endregion  顶部结束 */




/* #region     头部开始 */
.header {
  height: 120px;
}

.header form input {
  width: 508px;
  height: 34px;
  border: 1px solid #DD302D;
}

.header form button {
  width: 80px;
  height: 36px;
  background-color:  #DD302D;
  vertical-align:bottom;
  background-image: url('../../images/serch_icon.png');
  background-repeat: no-repeat;
  background-position: 26px 6px;
}

.header .search {
  margin-top: 42px;
  font-size: 0;
}


/* #endregion  头部结束 */





/* #region 主导航区开始   */
.mian-nav {
   height: 48px;
   line-height: 48px;
   border-bottom: 1px solid #DD302D;
}

.mian-nav .all-types {
   width: 190px;
   height: 48px;
   background-color: #DD302D;
   font-size: 16px;
   color: #FFFFFF;
   text-align: center;
} 


.mian-nav .main-nav-list {
  height: 48px;
  line-height: 48px;
}

.mian-nav .main-nav-list li {
   float: left;
   margin: 0 10px;
   font-size: 16px;
}


.mian-nav .main-nav-list>li>a {
  font-size: 16px;
  font-weight: 500;
  /* color: #333333; */
}



/* #endregion 主导航区结束   */



/* #region  内容区，左侧导航开始 */
.main-content {
   height: 458px;
   margin: 10px 0;
}

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

.main-content .slide-second-menu {
  width: 680px;
  height: 458px;
  background-color:  #F4F4F4;
  position: absolute;
  top: 0;
  left: 190px;
  padding-left: 20px;
  display: none;
}

/* 鼠标点中的时候显示图层 */
.main-content .slide-nav li:hover .slide-second-menu {
   display: block;
}

.main-content .slide-second-menu>dl {
  height: 36px;
  line-height: 36px;
}

.main-content .slide-second-menu dl:first-child {
  margin-top: 10px;
}

.main-content .slide-second-menu>dl>dt,dd {
  float: left;
}

.main-content .slide-second-menu>dl>dt {
  width: 70px;
  font-size: 14px;
  font-weight: bold;
  margin-right: 10px;
}

.main-content .slide-second-menu>dl dd>a {
  padding: 0 10px;
  border-left: 1px solid #666;
}




/* 中间 */
.main-content .banner {
  width: 690px;
  height: 458px;
  margin: 0 10px;
}

.main-content .banner img {
  width: 690px;
  height: 458px;
}


/* 右侧上方 */
.main-content .slide-other {
  width: 290px;
  height: 458px;
}

.slide-other .other-news {
   width: 260px;
   height: 156px;
   border: 1px solid #D9D9D9;
   padding: 0 14px;
}

.slide-other .other-news .title {
   height: 38px;
   line-height: 38px;
   border-bottom: 1px solid #D9D9D9;
}

.slide-other .other-news .title span {
  font-size: 14px;
  color: #000000;
}

.slide-other .other-news .title a {
  font-size: 12px;
}

.slide-other .msg-list li {
   height: 26px;
   line-height: 26px;
}



/* 右侧下方 */
.slide-other .other-nav-icon {
  width: 290px;
  height: 290px;
  margin-top: 10px;
  /* background-color: gold; */
  overflow: hidden;
}


.other-nav-icon .other-nav-item li {
   width: 48px;
   height: 70px;
   /* background-color: pink; */
   float: left;
   margin: 0 11px;
   text-align: center;
   cursor: pointer;
}

.other-nav-icon .other-nav-item:first-child {
  margin-top: 16px;
}

.other-nav-icon .other-nav-item:nth-child(2) {
  margin: 17px 0;
}

.other-nav-icon .other-nav-item li:first-child {
  margin-left: 16px;
}

/* 第一列 */
.other-nav-icon .other-nav-item .picture {
   width: 48px;
   height: 48px;
   background-image: url('../../images/精灵图-侧边功能.png');
}

.other-nav-icon .other-nav-item:nth-child(1) li:nth-child(1)>.picture {
  background-position: 0 0;
}

.other-nav-icon .other-nav-item:nth-child(1) li:nth-child(2)>.picture  {
  background-position: -48px 0;
}

.other-nav-icon .other-nav-item:nth-child(1) li:nth-child(3)>.picture  {
  background-position: -96px 0;
}

.other-nav-icon .other-nav-item:nth-child(1) li:nth-child(4)>.picture  {
  background-position: -144px 0;
}


/* 第二列 */
.other-nav-icon .other-nav-item:nth-child(2) li:nth-child(1)>.picture {
  background-position: 0 -48px;
}

.other-nav-icon .other-nav-item:nth-child(2) li:nth-child(2)>.picture  {
  background-position: -48px -48px;
}

.other-nav-icon .other-nav-item:nth-child(2) li:nth-child(3)>.picture  {
  background-position: -96px -48px;
}

.other-nav-icon .other-nav-item:nth-child(2) li:nth-child(4)>.picture  {
  background-position: -144px -48px;
}

/* 第三列 */
.other-nav-icon .other-nav-item:nth-child(3) li:nth-child(1)>.picture {
  background-position: 0 -96px;
}

.other-nav-icon .other-nav-item:nth-child(3) li:nth-child(2)>.picture  {
  background-position: -48px -96px;
}

.other-nav-icon .other-nav-item:nth-child(3) li:nth-child(3)>.picture  {
  background-position: -96px -96px;
}

.other-nav-icon .other-nav-item:nth-child(3) li:nth-child(4)>.picture  {
  background-position: -144px -96px;
}

.other-nav-icon .other-nav-item span {
  width: 48px;
  height: 22px;
  text-align: center;
  font-weight: bold;
}

/* #endregion  内容区，左侧导航开始 */


/* #region  秒杀开始 */
.seckill img {
   float: left;
   margin-right: 11px;
}

.seckill img:last-child {
  margin-right: 0;
}

/* #endregion  秒杀结束 */



/* #region  楼层 开始 */
.floor {
  margin-top: 48px;
}

.floor .floor-nav {
  height: 30px;
  line-height: 30px;
  padding-bottom: 4px;
  border-bottom: 2px solid #DD302D;
}

.floor-nav span {
  font-size: 20px;
  font-weight: bold;
}

.floor-nav ul>li {
  float: left;

}
.floor-nav ul>li>a {
  font-size: 16px;
  border-right: 1px solid #666666;
  padding: 0 10px;
}

.floor-nav ul>li:first-child>a {
  padding-left: 0;
  color: #DD302D ;
}

.floor-nav ul>li:last-child>a {
  border: 0;
  padding-right: 0;
}

.floor-inf .item {
   height: 432px;
   float: left;
}

.floor-inf .item:first-child {
  width: 190px;
  height: 392px;
  background-color: #F4F4F4;
  padding: 20px;
}

.floor-inf .item1 li:nth-child(2n-1) {
  float: left;
}

.floor-inf .item1 li:nth-child(2n) {
  float: right;
}

.floor-inf .item1 li {
  width: 90px;
  height: 22px;
  border-bottom: 1px solid #D9D9D9;
  font-size: 16px;
  padding-bottom: 3.5px;
}

.floor-inf .item1 li a {
  font-size: 16px;
}

.floor-inf .item1 li:nth-child(3)
,.item1 li:nth-child(4) {
  margin: 14.4px 0;
}

.floor-inf .item1 li:nth-child(2n) {
  float: right;
}

.floor-inf .item1 img {
   margin-top: 30px;
}


.floor-inf .item:nth-child(2) {
  width: 340px;
}


.floor-inf .item:nth-child(3)
,.item:nth-child(4) {
  width: 206px;
  border-right: 1px solid #E2E2E2;
}
.floor-inf .item:nth-child(3) img,
.item:nth-child(4) img 
,.item:nth-child(5) img{
  border-bottom: 1px solid #E2E2E2 ;
}


/* .floor-inf .item:nth-child(4) {
  width: 206px;
  border-right: 1px solid #E2E2E2;
} */

/* .floor-inf .item:nth-child(4) img {
  border-bottom: 1px solid #E2E2E2 ;
} */


.floor-inf .item:nth-child(5) {
  width: 206px;
}

/* .floor-inf .item:nth-child(5) img {
  border-bottom: 1px solid #E2E2E2 ;
} */

/* #endregion  楼层 结束 */



/* #region     页脚 开始 */
.footer {
  margin-top: 48px;
  height: 440px;
  background-color: #483E3E;
}

.footer .top-links>.links-list {
  float: left;
  width: 190px;
  height: 176px;
  color: #FFFFFF;
  margin-top: 48px;
  margin-right: 10px;
}

.footer .top-links>.links-list:last-child {
  margin-right: 0;
}

.footer .top-links>.links-list a {
  color: #FFFFFF;
}

.footer .line {
  height: 1px;
  background-color: #584D4D;
  margin-top: 22px;
}

.footer .bottom-links {
  margin-top: 47px;
  text-align: center;
}

.footer .links-item {
  display: inline-block;
}
.footer .links-item li {
  float: left;
}

.footer .links-item li a {
  color: #FFFFFF;
  padding: 0 26px;
  border-right: 1px solid #FFFFFF ;
}

.footer .links-item li:first-child a {
  padding-left: 0;
}

.footer .links-item li:last-child a {
  padding-right: 0;
  border: 0;
}

.footer .copyright {
  margin-top: 10px;
  color: #FFFFFF;
}


/* #endregion  页脚 结束 */