一、样式的调试

1.1 精灵图的原理

（1）使用精灵图的核心

  • 精灵技术主要针对于背景图片的使用，就是把多个小背景图片整合到一张大图片上；
  • 这个大图片也被称为sprites，精灵图或者雪碧图；
  • 移动背景图位置，此时可以用到background-position。
  • 移动的距离就是这个目标图片的x和y轴坐标；
  • 一般情况下都是往上往左移动都是负值；
  • 使用精灵图的时候需要精确测量每个小背景图片的大小和位置；

1.2 字体图标

  • 字体图标推荐下载网址：

  • 字体图标的引用

    • 把下载的fonts文件夹放入页面工程的根目录下

    • 在CSS样式中全局声明字体：简单理解就是把这些字体文件通过CSS引入到我们的页面中。一定要注意字体文件路径问题 ```html 

  2. <a name="z216L"></a>
  3. ## 1.4 CSS三角
  5. - 网页中一些常见的三角形，使用CSS直接画出来代码如下：
  6. ```html
  7. div{
  8.     width:0;
  9.     height:0;
  10.     /*行高和字体大小是为了照护浏览器的兼容性*/
  11.     line-height:0;
  12.     font-size:0;
  13.     border:50px solid transparent;
  14.     border-left-color:black;
  15. }

1.5 用户界面的优化

（1）鼠标样式cursor

  • 格式：cursor：pointer；
  • 代码示例：
    1. <head>
    2.   <style>
    3.   .default{
    4.     /*默认情况下是白箭头光标*/
    5.       cursor:default;
    6.   }
    7.   .pointer{
    8.     /*小手*/
    9.       cursor:pointer;
    10.   }
    11.   .move{
    12.     /*移动*/
    13.       cursor:move;
    14.   }
    15.   .text{
    16.       /*文本*/
    17.     cursor:text;
    18.   }
    19.   .not-allowed{
    20.     /*禁止*/
    21.       cursor:not-allowed;
    22.   }
    23. </style>
    24. </head>
    25. <body>
    26.   <p class="default">白箭头</p>
    27. <p class="pointer">小手</p>
    28. <p class="move">移动</p>
    29. <p class="text">文本</p>
    30. <p class="not-allowed">禁止</p>
    31. </body>

（2）表单跟文本域的样式

  1. <head>
  2.     <style>
  3.     input,textarea{
  4.         /*取消表单轮廓*/
  5.       outline:none;
  6.     }
  7.     textarea{
  8.         /*防止拖拽文本域*/
  9.       resize:none;
  10.     }
  11.   </style>
  12. </head>
  13. <body>
  14.     <!--取消表单轮廓-->
  15.   <input type="text">
  16.   <!--防止拖拽文本域-->
  17.   <textarea name="" id="" cols="30" rows="10"></textarea>
  18. </body>

（3）图片、表单和文字对齐

  • vertical-align属性只针对行内元素和行内块元素，默认的vertical-align是基线对齐的；较为常用的就是将属性设置为middle就可以实现文字跟图片垂直居中对齐了
  • 用图片标签CSS高级（一） - 图1进行插入图片时，会有下边缝隙，通常采用vertical-align属性取值为middle

（4）文本溢出部分用省略号代替

  • 单行文本溢出部分用省略号代替的方法跟步骤

    1. <html>
    2. <head>
    3.   <style>
    4.     div{
    5.       width:30px;
    6.       height:50px;
    7.       background-color：pink;
    8.         /*1. 先2强制一行内显示文本,默认是normal自动换行*/
    9.       white-space:nowrap;
    10.       /*2.超出部分隐藏*/
    11.       overflow:hidden;;
    12.       /*3.文字超出部分用省略号代替*/
    13.       text-overflow:ellipsis;
    14.     }
    15.   </style>
    16. </head>
    17. <body>
    18.   <div>
    19.       此处省略一万字山外青山楼外楼
    20.   </div>
    21. </body>
    22. </html>

  • 多行文本溢出显示省略号

    1. <style>
    2. div{
    3.     overflow:hidden;
    4.   text-overflow:ellipsis;
    5.   /*弹性盒子模型显示*/
    6.   display:webkit-box;
    7.   /*限制在一个块元素显示的文本的行数*/
    8.   -webkit-line-clamp:2;
    9.   /*设置或检索伸缩盒子对象的子元素的排列方式*/
    10.   -webkit-box-orient:vertical;
    11. }
    12. </style>

（5）HTML5新增的语义标签

  • ：头部标签
  • < article>：内容标签
  • ：定义文档的某个区域
  • ：侧边栏标签
  • ：底部（尾部）标签
  • 注意：
    • 这种语义标签主要时针对搜索引擎的
    • 这些新的标签页面中可以多次使用；
    • 在IE9中，需要将这些元素转换为块级元素；
    • 其实，移动端更喜欢使用这些标签；
    • 除此之外，HTML5还增加了很多其他的标签；

（6）HTML5新增视频标签

  • 标签（块级），支持的视频格式如下： | 浏览器 | MP4 | WebM | Ogg | | —- | —- | —- | —- | | intermet explorer | yes | no | noC | | chrome | yes | yes | yes | | firefox | yes（从Firefox2.1版本开始，Linux系统从Firefox3.0开始） | yes | yes | | safari | yes | no | no | | opera | yes（从opera2.5开始） | yes | yes |

  • 语法格式：

    当浏览器不支持视频格式时这样写

  • 属性 | 属性名跟值 | 说明 | | —- | —- | | autoplay=“autoplay” | 视频主动播放（谷歌浏览器需要添加muted属性来解决自动播放的问题） | | controls=“controls” | 向用户展示播放的控件（一般不写，用js来设置） | | width=“000” | 设置视频宽度 | | height=“000” | 设置视频高度 | | loop=“loop” | 循环播放 | | preload=“auto” （预先加载）
    preload=“none”（不加载） | 规定是否预加载视频，如有了autoplay就忽略该属性 | | src=“视频地址” | 视频地址 | | poster=“等待加载时的图片地址” | 加载等待的图片 | | muted=”muted“ | 静音播放 |

（7）

  • 支持的音频格式如下 | 浏览器 | MP3 | Wav | Ogg | | —- | —- | —- | —- | | intermet explorer | yes | no | no | | chrome | yes | yes | yes | | firefox | yes | yes | yes | | safari | yes | yes | no | | opera | yes | yes | yes |

  • 语法格式： 当浏览器不支持视频格式时这样写 | 属性名和值 | 说明 | | —- | —- | | autoplay=“autoplay” | 如果出现该属性，则音频会在就绪后马上播放 | | controls=“controls” | 如果出现该属性，则向用户展示控件 | | loop=“loop” | 如果出现该属性，循环播放 | | src=“音频地址” | 音频地址 |

（8）CSS函数

  • 图像模糊函数语法： ```html filter：函数（）； 例如： 选择器{ filter:blur(5px); }
  2. - 计算函数语法
  3. ```html
  4. .son{
  5.     /*子盒子比父盒子少三十像素 注意：运算符左右的空格不能少*/
  6.     width:calc(100% - 30px);
  7. }

（9）过度

  • 语法

    1. transition:要过度的属性1 花费时间 运动曲线 何世开始,要过度的属性1 花费时间 运动曲线 何世开始（s）;
    2. transition:all 花费时间 运动曲线 何世开始;

  • 属性：想要变化的css属性

  • 花费时间：单位是秒（必写）
  • 运动曲线：默认是ease（可省）

Snipaste_2021-09-16_16-49-55.png

  • 何时开始：单位是秒（必写）可设置触发的时间，默认是0s（可省）

二、CSS3盒子位移、形状改变的控制属性

2.1 2D转换

（1）位移translate

  • 改变元素在页面中的位置，类似于定位；

  • 语法

    1. div{
    2.   transform:translate(x,y);
    3. transform:translateX(n);
    4. transform:translateY(n);
    5. }

  • 特点：

    • 定义2D转换中的位移；沿着X、Y轴移动元素
    • translate最大的特点就是，不会影响其他的元素的位置；

    • translate中的百分比单位是相对于自身元素的translate:(50%,50%)；（说白了就是移动盒子宽度、高度的百分之几）

      1. /*实现子盒子在父盒子水平居中，垂直居中*/
      2. div{
      3. height:400px;
      4. width:400px;
      5. background-color:black;
      6. }
      7. div p{
      8. position:absolute;
      9. top:50%; /*移动父盒子高度的百分之五十*/
      10. left:50%; /*移动父盒子宽度的百分之五十*/
      11. /*
      12. 以前用定位做将数据写死，不太方便；
      13. margin-top:-100px;
      14. margin-left:-100px;
      15. */
      16. /*用translate实现*/
      17. transform:translate(-50%,50%);
      18. }

    • 对行内元素没有效果；

（2）旋转rotate

  • 控制元素的旋转角度

  • 语法

    1. transform:rotate(度数deg)

  • 特点：

    • rotate里面跟度数单位：deg；
    • 正数为顺时针旋转，反之则反；
    • 默认旋转的中心是元素的中心点；

  • 设置旋转中心点

    • 语法：

      1. transform-origin:x y;

    • 特点：

      • x y可以是精确的像素、方位名词（top、bottom、left、right、center）、百分比（元素宽度、高度的百分比）

（3）缩放scale

  • 放大和缩小元素

  • 语法：

    1. transform:scale(x,y);

  • 特点

    • 里面的参数不跟单位，表示宽度乘以参数/高度乘以参数；例如：transform:scale(2,2)，就是宽度乘以二，长度乘以二，所以transform:scale(1,1)并不会发生变化；
    • 如果是等比例缩放，可以这样写：transform:scale(n);
    • 参数小于一表示缩小
    • 可以通过：transform-origin:x y; 设置缩放中心点，默认是元素中心点位置缩放，而且不影响其他盒子；

（4）转换综合写法顺序

  • 一个元素同时使用多个转换，其格式为：transform:translate() rotate() scale()……；
  • 其顺序会影响转换效果（比如：先旋转的话会改变坐标轴的方向）
  • 改变为的属性值放在最前面；

2.2 3D转换

（1）动画的基本使用

  • 动画样式的两个步骤：

    • 定义动画

      1. @keyframes 动画名称 {
      2. /*元素开始状态*/
      3. /*
      4. 0%{
      5.    属性：属性值;
      6. }
      7. */
      8. 0%{
      9.    transform:translate(0px);
      10. }
      11. /*
      12. 100%{
      13.    属性：属性值;
      14. }
      15. */
      16. 100%{
      17.    transform:translate(1000px);
      18. }
      19. }

    • 使用动画

      1. div{
      2. animation-name:动画名称;
      3. /*持续时间（单位为秒）*/
      4. animation-duration:3s;
      5. }

    • 注意：

      • 上面的百分比可以分为多个，你想要几个关键帧（状态）就用一百除以几就可以了，但是百分比的数字必须是整数
      • 动画运行到一个关键帧（状态）所用的时间是animation-duration中的时间乘以关键帧（状态）的百分比即可得出所花费的时间

（2）常用的动画属性

属性 说明
animation-name 引用动画
animation-duration 动画完成的总时间（单位秒）
animation-timing-function 动画速度曲线；默认是“ease”，还有steps(n);(可以实现打字的效果)
animation-delay 何时开始（单位秒）
animation-iteration-count 播放次数，默认是1，infinite（无限循环播放）
animation-direction 是否在下一个周期逆向播放，默认是“normal”，“alternate”逆播放
animation-play-state 动画是否正在运行或暂停；默认是running 还有paused暂停
animation-fill-mode 动画结束后的状态 ，默认是backwards回到初始状态，forwards保持运行后的状态

  • 动画属性的简写：animation：名称1 持续时间1 运动曲线1 何时开始1 播放次数1 是否反方向1 动画起始状态1，名称2 持续时间2 运动曲线2 何时开始2 播放次数2 是否反方向2 动画起始状态2

    1. animation： name 5s linear 2s infinite alternate；

  • 动画案例——热点图： ```html <!DOCTYPE html>

  2. <a name="hLA9g"></a>
  3. ### （3）透视perspective
  5. - 属性perspective，它写在被观察的盒子的父盒子上
  6. - 语法：perspective: d(px) ；d值越小表示人眼离屏幕的距离越小，所看到的物体越大
  8. <a name="LvMMQ"></a>
  9. ### （4）3d旋转rotate3d
  11. - 语法：
  12.    - transform:rotateX(n(deg))：沿着x轴旋转
  13.    - transform:rotateY(n(deg))：沿着y轴旋转
  14.    - transform:rotateZ(n(deg))：沿着z轴旋转
  15.    - transform:rotate3d（x,y,z,n(deg)）：沿着任意轴旋转，xyz经过矢量相加的方式计算旋转轴
  16. - 保持3d样式属性
  17.    - 控制子元素是否开启三维立体环境；
  18.    - transform-style：flat   子元素不开启三维立体样式，是默认的
  19.    - transform-style：preserve-3d   子元素开启三维立体空间；
  20.    - 该属性写在父级元素，跟透视属性一样写在父级元素上
  21.    - 重要！！！
  23. <a name="mfw7h"></a>
  24. ### （5）综合案例品优购
  26. - 项目结构：
  27.    - css（文件夹）
  28.    - fonts（文件夹）
  29.    - images（文件夹）
  30.    - upload（文件夹）
  31.    - 页面就写在这些工程文件夹的同级下
  32. <a name="vbiTC"></a>
  33. #### 首页——index.html
  34. ```html
  35. <!DOCTYPE html>
  36. <html lang="zh-CN">
  38. <head>
  39.     <meta charset="UTF-8">
  40.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  41.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  42.     <title>品优购商城-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
  43.     </title>
  44.     <!-- 网站说明 -->
  45.     <meta name="description"
  46.         content="品优购商城-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
  47.     <!-- 关键字 -->
  48.     <meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />
  50.     <!-- 引入favicon图标 -->
  51.     <link rel="shortcut icon" href="favicon.ico" />
  52.     <!-- 引入我们初始化样式文件 -->
  53.     <link rel="stylesheet" href="css/base.css">
  54.     <!-- 引入我们公共的样式文件 -->
  55.     <link rel="stylesheet" href="css/common.css">
  56.     <!-- 引入我们index.css文件  -->
  57.     <link rel="stylesheet" href="css/index.css">
  58. </head>
  60. <body>
  61.     <!-- 快捷导航模块 start -->
  62.     <section class="shortcut">
  63.         <div class="w">
  64.             <div class="fl">
  65.                 <ul>
  66.                     <li>品优购欢迎您！&nbsp;</li>
  67.                     <li>
  68.                         <a href="#">请登录</a> &nbsp; <a href="register.html" class="style_red">免费注册</a>
  69.                     </li>
  70.                 </ul>
  71.             </div>
  72.             <div class="fr">
  73.                 <ul>
  74.                     <li>我的订单</li>
  75.                     <li></li>
  76.                     <li class="arrow-icon">我的品优购</li>
  77.                     <li></li>
  78.                     <li>品优购会员</li>
  79.                     <li></li>
  80.                     <li>企业采购</li>
  81.                     <li></li>
  82.                     <li class="arrow-icon">关注品优购</li>
  83.                     <li></li>
  84.                     <li class="arrow-icon">客户服务</li>
  85.                     <li></li>
  86.                     <li class="arrow-icon">网站导航</li>
  87.                 </ul>
  88.             </div>
  89.         </div>
  90.     </section>
  91.     <!-- 快捷导航模块 end -->
  92.     <!-- header头部模块制作 start -->
  93.     <header class="header w">
  94.         <!-- logo模块 -->
  95.         <div class="logo">
  96.             <h1>
  97.                 <a href="index.html" title="品优购商城">品优购商城</a>
  98.             </h1>
  99.         </div>
  100.         <!-- search搜索模块 -->
  101.         <div class="search">
  102.             <input type="search" name="" id="" placeholder="语言开发">
  103.             <button>搜索</button>
  104.         </div>
  105.         <!-- hotwords模块制作 -->
  106.         <div class="hotwords">
  107.             <a href="#" class="style_red">优惠购首发</a>
  108.             <a href="#">亿元优惠</a>
  109.             <a href="#">9.9元团购</a>
  110.             <a href="#">美满99减30</a>
  111.             <a href="#">办公用品</a>
  112.             <a href="#">电脑</a>
  113.             <a href="#">通信</a>
  114.         </div>
  115.         <!-- 购物车模块 -->
  116.         <div class="shopcar">
  117.             我的购物车
  118.             <i class="count">8</i>
  119.         </div>
  120.     </header>
  121.     <!-- header头部模块制作 end -->
  122.     <!-- nav模块制作 start -->
  123.     <nav class="nav">
  124.         <div class="w">
  125.             <div class="dropdown">
  126.                 <div class="dt">全部商品分类</div>
  127.                 <div class="dd">
  128.                     <ul>
  129.                         <li><a href="#">家用电器</a> </li>
  130.                         <li><a href="list.html">手机</a>、 <a href="#">数码</a>、<a href="#">通信</a> </li>
  131.                         <li><a href="#">电脑、办公</a> </li>
  132.                         <li><a href="#">家居、家具、家装、厨具</a> </li>
  133.                         <li><a href="#">男装、女装、童装、内衣</a> </li>
  134.                         <li><a href="#">个户化妆、清洁用品、宠物</a> </li>
  135.                         <li><a href="#">鞋靴、箱包、珠宝、奢侈品</a> </li>
  136.                         <li><a href="#">运动户外、钟表</a> </li>
  137.                         <li><a href="#">汽车、汽车用品</a> </li>
  138.                         <li><a href="#">母婴、玩具乐器</a> </li>
  139.                         <li><a href="#">食品、酒类、生鲜、特产</a> </li>
  140.                         <li><a href="#">医药保健</a> </li>
  141.                         <li><a href="#">图书、音像、电子书</a> </li>
  142.                         <li><a href="#">彩票、旅行、充值、票务</a> </li>
  143.                         <li><a href="#">理财、众筹、白条、保险</a> </li>
  145.                     </ul>
  146.                 </div>
  147.             </div>
  148.             <div class="navitems">
  149.                 <ul>
  150.                     <li><a href="#">服装城</a></li>
  151.                     <li><a href="#">服装城</a></li>
  152.                     <li><a href="#">服装城</a></li>
  153.                     <li><a href="#">服装城</a></li>
  154.                     <li><a href="#">服装城</a></li>
  155.                     <li><a href="#">服装城</a></li>
  156.                     <li><a href="#">服装城</a></li>
  157.                     <li><a href="#">服装城</a></li>
  158.                 </ul>
  159.             </div>
  160.         </div>
  161.     </nav>
  162.     <!-- nav模块制作 end -->
  163.     <!-- 首页专有的模块 main  start -->
  164.     <div class="w">
  165.         <div class="main">
  166.             <div class="focus">
  167.                 <ul>
  168.                     <li>
  169.                         <img src="upload/focus1.png" alt="">
  170.                     </li>
  171.                 </ul>
  172.             </div>
  173.             <div class="newsflash">
  174.                 <div class="news">
  175.                     <div class="news-hd">
  176.                         <h5>品优购快报</h5>
  177.                         <a href="#" class="more">更多</a>
  178.                     </div>
  179.                     <div class="news-bd">
  180.                         <ul>
  181.                             <li><a href="#"><strong>[重磅]</strong> 它来了它来了，pink老师走来了, 它是谁？</a></li>
  182.                             <li><a href="#"><strong>[重磅]</strong> 它来了它来了，pink老师走来了</a></li>
  183.                             <li><a href="#"><strong>[重磅]</strong> 它来了它来了，pink老师走来了</a></li>
  184.                             <li><a href="#"><strong>[重磅]</strong> 它来了它来了，pink老师走来了</a></li>
  185.                             <li><a href="#"><strong>[重磅]</strong> 它来了它来了，pink老师走来了, 它是谁？</a></li>
  186.                         </ul>
  187.                     </div>
  188.                 </div>
  189.                 <div class="lifeservice">
  190.                     <ul>
  191.                         <li>
  192.                             <i></i>
  193.                             <p>话费</p>
  194.                         </li>
  195.                         <li>
  196.                             <i></i>
  197.                             <p>话费</p>
  198.                         </li>
  199.                         <li>
  200.                             <i></i>
  201.                             <p>话费</p>
  202.                         </li>
  203.                         <li>
  204.                             <i></i>
  205.                             <p>话费</p>
  206.                         </li>
  207.                         <li>
  208.                             <i></i>
  209.                             <p>话费</p>
  210.                         </li>
  211.                         <li>
  212.                             <i></i>
  213.                             <p>话费</p>
  214.                         </li>
  215.                         <li>
  216.                             <i></i>
  217.                             <p>话费</p>
  218.                         </li>
  219.                         <li>
  220.                             <i></i>
  221.                             <p>话费</p>
  222.                         </li>
  223.                         <li>
  224.                             <i></i>
  225.                             <p>话费</p>
  226.                         </li>
  227.                         <li>
  228.                             <i></i>
  229.                             <p>话费</p>
  230.                         </li>
  231.                         <li>
  232.                             <i></i>
  233.                             <p>话费</p>
  234.                         </li>
  235.                         <li>
  236.                             <i></i>
  237.                             <p>话费</p>
  238.                         </li>
  239.                     </ul>
  240.                 </div>
  241.                 <div class="bargain">
  242.                     <img src="upload/bargain.png" alt="">
  243.                 </div>
  244.             </div>
  245.         </div>
  246.     </div>
  247.     <!-- 首页专有的模块 main  end -->
  248.     <!-- 推荐模块 start-->
  249.     <div class="w recom">
  250.         <div class="recom_hd">
  251.             <img src="images/recom.png" alt="">
  252.         </div>
  253.         <div class="recom_bd">
  254.             <ul>
  255.                 <li><img src="upload/recom_03.jpg" alt=""></li>
  256.                 <li><img src="upload/recom_03.jpg" alt=""></li>
  257.                 <li><img src="upload/recom_03.jpg" alt=""></li>
  258.                 <li><img src="upload/recom_03.jpg" alt=""></li>
  259.             </ul>
  260.         </div>
  261.     </div>
  262.     <!-- 推荐模块 end-->
  263.     <!-- 楼层区域制作start -->
  264.     <div class="floor">
  265.         <!-- 1楼家用电器楼层 -->
  266.         <div class="w jiadian">
  267.             <div class="box_hd">
  268.                 <h3>家用电器</h3>
  269.                 <div class="tab_list">
  270.                     <ul>
  271.                         <li> <a href="#" class="style_red">热门</a>|</li>
  272.                         <li><a href="#">大家电</a>|</li>
  273.                         <li><a href="#">生活电器</a>|</li>
  274.                         <li><a href="#">厨房电器</a>|</li>
  275.                         <li><a href="#">生活电器</a>|</li>
  276.                         <li><a href="#">个护健康</a>|</li>
  277.                         <li><a href="#">应季电器</a>|</li>
  278.                         <li><a href="#">空气/净水</a>|</li>
  279.                         <li><a href="#">新奇特</a>|</li>
  280.                         <li><a href="#"> 高端电器</a></li>
  281.                     </ul>
  282.                 </div>
  283.             </div>
  284.             <div class="box_bd">
  285.                 <div class="tab_content">
  286.                     <div class="tab_list_item">
  287.                         <div class="col_210">
  288.                             <ul>
  289.                                 <li><a href="#">节能补贴</a></li>
  290.                                 <li><a href="#">节能补贴</a></li>
  291.                                 <li><a href="#">节能补贴</a></li>
  292.                                 <li><a href="#">节能补贴</a></li>
  293.                                 <li><a href="#">节能补贴</a></li>
  294.                                 <li><a href="#">节能补贴</a></li>
  295.                             </ul>
  296.                             <a href="#">
  297.                                 <img src="upload/floor-1-1.png" alt="">
  298.                             </a>
  299.                         </div>
  300.                         <div class="col_329">
  301.                             <a href="#">
  302.                                 <img src="upload/floor-1-b01.png" alt="">
  303.                             </a>
  304.                         </div>
  305.                         <div class="col_221">
  306.                             <a href="#" class="bb"> <img src="upload/floor-1-2.png" alt=""></a>
  307.                             <a href="#"> <img src="upload/floor-1-3.png" alt=""></a>
  308.                         </div>
  309.                         <div class="col_221">
  310.                                 <a href="#"> <img src="upload/floor-1-4.png" alt=""></a>
  312.                         </div>
  313.                         <div class="col_219">
  314.                                 <a href="#" class="bb"> <img src="upload/floor-1-5.png" alt=""></a>
  315.                                 <a href="#"> <img src="upload/floor-1-6.png" alt=""></a>
  316.                         </div>
  317.                     </div>
  318.                 </div>
  319.             </div>
  320.         </div>
  321.         <!-- 2楼手机楼层 -->
  322.         <div class="w shouji">
  323.                 <div class="box_hd">
  324.                     <h3>手机通讯</h3>
  325.                     <div class="tab_list">
  326.                         <ul>
  327.                             <li> <a href="#" class="style_red">热门</a>|</li>
  328.                             <li><a href="#">大家电</a>|</li>
  329.                             <li><a href="#">生活电器</a>|</li>
  330.                             <li><a href="#">厨房电器</a>|</li>
  331.                             <li><a href="#">生活电器</a>|</li>
  332.                             <li><a href="#">个护健康</a>|</li>
  333.                             <li><a href="#">应季电器</a>|</li>
  334.                             <li><a href="#">空气/净水</a>|</li>
  335.                             <li><a href="#">新奇特</a>|</li>
  336.                             <li><a href="#"> 高端电器</a></li>
  337.                         </ul>
  338.                     </div>
  339.                 </div>
  340.                 <div class="box_bd">
  341.                     <div class="tab_content">
  342.                         <div class="tab_list_item">
  343.                             <div class="col_210">
  344.                                 <ul>
  345.                                     <li><a href="#">节能补贴</a></li>
  346.                                     <li><a href="#">节能补贴</a></li>
  347.                                     <li><a href="#">节能补贴</a></li>
  348.                                     <li><a href="#">节能补贴</a></li>
  349.                                     <li><a href="#">节能补贴</a></li>
  350.                                     <li><a href="#">节能补贴</a></li>
  351.                                 </ul>
  352.                                 <a href="#">
  353.                                     <img src="upload/floor-1-1.png" alt="">
  354.                                 </a>
  355.                             </div>
  356.                             <div class="col_329">
  357.                                 <a href="#">
  358.                                     <img src="upload/floor-1-b01.png" alt="">
  359.                                 </a>
  360.                             </div>
  361.                             <div class="col_221">
  362.                                 <a href="#" class="bb"> <img src="upload/floor-1-2.png" alt=""></a>
  363.                                 <a href="#"> <img src="upload/floor-1-3.png" alt=""></a>
  364.                             </div>
  365.                             <div class="col_221">
  366.                                     <a href="#"> <img src="upload/floor-1-4.png" alt=""></a>
  368.                             </div>
  369.                             <div class="col_219">
  370.                                     <a href="#" class="bb"> <img src="upload/floor-1-5.png" alt=""></a>
  371.                                     <a href="#"> <img src="upload/floor-1-6.png" alt=""></a>
  372.                             </div>
  373.                         </div>
  374.                     </div>
  375.                 </div>
  376.             </div>
  377.     </div>
  378.     <!-- 楼层区域制作end -->
  379.     <!-- 底部模块的制作 start -->
  380.     <footer class="footer">
  381.         <div class="w">
  382.             <div class="mod_service">
  383.                 <ul>
  384.                     <li>
  385.                         <h5></h5>
  386.                         <div class="service_txt">
  387.                             <h4>正品保障</h4>
  388.                             <p>正品保障,提供发票</p>
  389.                         </div>
  390.                     </li>
  391.                     <li>
  392.                         <h5></h5>
  393.                         <div class="service_txt">
  394.                             <h4>正品保障</h4>
  395.                             <p>正品保障,提供发票</p>
  396.                         </div>
  397.                     </li>
  398.                     <li>
  399.                         <h5></h5>
  400.                         <div class="service_txt">
  401.                             <h4>正品保障</h4>
  402.                             <p>正品保障,提供发票</p>
  403.                         </div>
  404.                     </li>
  405.                     <li>
  406.                         <h5></h5>
  407.                         <div class="service_txt">
  408.                             <h4>正品保障</h4>
  409.                             <p>正品保障,提供发票</p>
  410.                         </div>
  411.                     </li>
  412.                 </ul>
  413.             </div>
  414.             <div class="mod_help">
  415.                 <dl>
  416.                     <dt>服务指南</dt>
  417.                     <dd><a href="#">购物流程</a></dd>
  418.                     <dd><a href="#">会员介绍</a></dd>
  419.                     <dd><a href="#">生活旅行/团购</a></dd>
  420.                     <dd><a href="#">常见问题</a></dd>
  421.                     <dd><a href="#">大家电</a></dd>
  422.                     <dd><a href="#">联系客服</a></dd>
  423.                 </dl>
  424.                 <dl>
  425.                     <dt>服务指南</dt>
  426.                     <dd><a href="#">购物流程</a></dd>
  427.                     <dd><a href="#">会员介绍</a></dd>
  428.                     <dd><a href="#">生活旅行/团购</a></dd>
  429.                     <dd><a href="#">常见问题</a></dd>
  430.                     <dd><a href="#">大家电</a></dd>
  431.                     <dd><a href="#">联系客服</a></dd>
  432.                 </dl>
  433.                 <dl>
  434.                     <dt>服务指南</dt>
  435.                     <dd><a href="#">购物流程</a></dd>
  436.                     <dd><a href="#">会员介绍</a></dd>
  437.                     <dd><a href="#">生活旅行/团购</a></dd>
  438.                     <dd><a href="#">常见问题</a></dd>
  439.                     <dd><a href="#">大家电</a></dd>
  440.                     <dd><a href="#">联系客服</a></dd>
  441.                 </dl>
  442.                 <dl>
  443.                     <dt>服务指南</dt>
  444.                     <dd><a href="#">购物流程</a></dd>
  445.                     <dd><a href="#">会员介绍</a></dd>
  446.                     <dd><a href="#">生活旅行/团购</a></dd>
  447.                     <dd><a href="#">常见问题</a></dd>
  448.                     <dd><a href="#">大家电</a></dd>
  449.                     <dd><a href="#">联系客服</a></dd>
  450.                 </dl>
  451.                 <dl>
  452.                     <dt>服务指南</dt>
  453.                     <dd><a href="#">购物流程</a></dd>
  454.                     <dd><a href="#">会员介绍</a></dd>
  455.                     <dd><a href="#">生活旅行/团购</a></dd>
  456.                     <dd><a href="#">常见问题</a></dd>
  457.                     <dd><a href="#">大家电</a></dd>
  458.                     <dd><a href="#">联系客服</a></dd>
  459.                 </dl>
  460.                 <dl>
  461.                     <dt>帮助中心</dt>
  462.                     <dd>
  463.                         <img src="images/wx_cz.jpg" alt="">
  464.                         品优购客户端
  465.                     </dd>
  466.                 </dl>
  467.             </div>
  468.             <div class="mod_copyright">
  469.                 <div class="links">
  470.                     <a href="#">关于我们</a> | <a href="#">联系我们</a> | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 |
  471.                     品优购公益 | English Site | Contact U
  472.                 </div>
  473.                 <div class="copyright">
  474.                     地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>
  475.                     京ICP备08001421号京公网安备110108007702
  476.                 </div>
  477.             </div>
  478.         </div>
  479.     </footer>
  480.     <!-- 底部模块的制作 end -->
  481. </body>
  482. </html>

公共样式文件——common.css

  1. @font-face {
  2.     font-family: "iconfont"; /* Project id  */
  3.     src: url('../fonts/iconfont.ttf?t=1631878933978&') format('truetype');
  4. }
  6. @font-face{
  7.     font-family: "iconfont"; /* Project id  */
  8.     src:url('../fonts/iconfont(1).ttf?t=1632034472850') format('truetype');
  9. }
  11. /* 版心 */
  12. .w{
  13.     width:1200px;
  14.     margin:0 auto;
  15. }
  16. /* 快捷导航模块 */
  17. .fl{
  18.     float:left;
  19. }
  21. .fr{
  22.     float:right;
  23. }
  25. .shortcut{
  26.     height:31px;
  27.     line-height:31px;
  28.     background-color:#f1f1f1;
  29. }
  31. .shortcut ul li{
  32.     line-height:31px;
  33.     float:left;
  34. }
  36. .shortcut .fr ul li:nth-child(even){
  37.     width:1px;
  38.     height:12px;
  39.     background-color:#666;
  40.     margin:9px 15px 0;
  41. }
  43. .arrows_icon::after{
  44.     font-family: "iconfont" !important;
  45.     content:"\e62d";
  46.     margin:0 0 0 5px;
  47.     /* content: "1"; */
  48. }
  50. .clearfix:before,.clearfix:after{
  51.     content:"";
  52.     display:table;
  53. }
  55. .clearfix:after{
  56.     clear:both;
  57. }
  59. .clearfix{
  60.     *zoom:1;
  61. }
  63. .style_red{
  64.     color:red;
  65. }
  67. /* 头部份 */
  68. .header{
  69.     position:relative;
  70.     height:105PX;
  71.     background-color:rgb(255, 255, 255);
  72. }
  74. .logo{
  75.     position:absolute;
  76.     top:25px;
  77.     width:171px;
  78.     height:61px;
  79.     background-color:#b1191a;
  80. }
  82. .logo a{
  83.     display:block;
  84.     width:171px;
  85.     height:61px;
  86.     background:url(../images/) no-repeat;
  87.     /* 方法一： */
  88.     /* font-size:0; */
  89.     /* 方法二： */
  90.     text-indent:-999px;
  91.     overflow:hidden;
  92. }
  94. .search{
  95.     position:absolute;
  96.     left:346px;
  97.     top:25px;
  98.     width:538px;
  99.     height:36px;
  100.     border:2px solid #b1191a;
  101. }
  103. .search input{
  104.     float:left;
  105.     width:454px;
  106.     height:32px;
  107.     padding-left:10px;
  108. }
  110. .search button{
  111.     float:left;
  112.     width:80px;
  113.     height:32px;
  114.     background-color:#b1191a;
  115.     font-size:16px;
  116.     color:#fff;
  117. }
  119. .hotword{
  120.     position:absolute;
  121.     top:66px;
  122.     left:346px;
  123. }
  125. .hotword a{
  126.     margin:0 10px;
  127. }
  129. .shopcar{
  130.     position:absolute;
  131.     right:60px;
  132.     top:25px;
  133.     width:140px;
  134.     height:35px;
  135.     text-align:center;
  136.     line-height:35px;
  137.     color:#e60012;
  138.     border:1px solid #dfdfdf;
  139.     background-color:#f7f7f7;
  140. }
  142. .shopcar::before{
  143.     font-family: "iconfont" !important;
  144.     content:"\f0179";
  145. }
  147. .shopcar::after{
  148.     font-family: "iconfont" !important;
  149.     content:"\e667";
  150. }
  152. .count{
  153.     position:absolute;
  154.     top:-5px;
  155.     left:105px;
  156.     height:14px;
  157.     line-height:14px;
  158.     color:#fff;
  159.     background-color:#e60012;
  160.     padding:0 5px;
  161.     border-radius:7px 7px 7px 0;
  162. }
  163. /* 导航部分 */
  164. .nav{
  165.     height:47px;
  166.     border-bottom:2px solid #b1191a;
  167. }
  169. .nav .dropdown{
  170.     float:left;
  171.     width:210px;
  172.     height:47px;
  173.     background-color:#b1191a;
  174. }
  176. .dropdown .dt{
  177.     width:100%;
  178.     height:100%;
  179.     color:#fff;
  180.     text-align:center;
  181.     line-height:47px;
  182.     font-size:16px;
  183. }
  185. .dropdown .dd{
  186.     display:none;
  187.     width:210px;
  188.     height:465px;
  189.     background-color:#c81623;
  190.     margin-top:2px;
  191. }
  193. /* .dropdown .dt:hover{
  194.     display:block;
  195. } */
  197. .dropdown .dd ul li{
  198.     position:relative;
  199.     height:31px;
  200.     line-height:31px;
  201.     margin-left:2px;
  202.     padding-left:10px;
  203. }
  205. .dropdown .dd ul li a{
  206.     font-size:14px;
  207.     color:#fff;
  208. }
  210. .dropdown .dd ul li:hover{
  211.     background-color:#fff;
  212. }
  214. .dropdown .dd ul li:hover a{
  215.     color:#c81623;
  216. }
  218. .dropdown .dd ul li::after{
  219.     position:absolute;
  220.     top:1px;
  221.     right:10px;
  222.     color:#fff;
  223.     font-family: "iconfont"; /* Project id  */
  224.     content:"\e667";
  225. }
  227. .navitems{
  228.     float:left;
  229. }
  231. .navitems ul li a{
  232.     display:block;
  233.     height:100%;
  234.     line-height:23.5px;
  235.     font-size:16px;
  236.     padding:0 25px;
  237. }
  239. .navitems ul li{
  240.     float:left;
  241. }
  243. /* 底部模块 */
  244. .footer{
  245.     height:415px;
  246.     background-color:#f5f5f5;
  247.     padding-top:30px;
  248. }
  250. .mod_service ul li{
  251.     float:left;
  252.     width:300px;
  253.     height:50px;
  254.     /* background-color:rgb(255, 255, 255); */
  255.     /* margin-bottom:30px; */
  256.     padding-left:35px;
  257.     /* border-bottom:1px solid #c0bebe; */
  258. }
  260. .mod_service ul li h5{
  261.     float:left;
  262.     width:50px;
  263.     height:50px;
  264.     border-radius:25px;
  265.     background-color:#c81623;
  266.     margin-right:10px;
  267. }
  268. .service_txt{
  269.     float:left;
  270.     margin-top:5px;
  271. }
  273. .service_txt h4{
  274.     font-size:14px;
  275. }
  277. /* .service_txt p{
  278.     font-size:12px;
  279. } */
  281. .mod_help{
  282.     height:185px;
  283.     border-bottom:1px solid #ccc;
  284.     border-top:1px solid #ccc;
  285.     margin-top:20px;
  286.     padding-left:50px;
  287. }
  289. .mod_help dl dt{
  290.     font-size:16px;
  291.     margin-bottom:10px;
  292. }
  294. .mod_help dl{
  295.     float:left;
  296.     width:200px;
  297. }
  298. .mod_help dl:last-child{
  299.     width:90px;
  300.     text-align:center;
  301. }

首页特有的样式——index.css

  1. .main {
  2.     width: 980px;
  3.     height: 455px;
  4.     margin-left: 220px;
  5.     margin-top: 10px;
  6. }
  7. .focus {
  8.     float: left;
  9.     width: 721px;
  10.     height: 455px;
  11.     background-color: purple;
  12. }
  13. .newsflash {
  14.     float: right;
  15.     width: 250px;
  16.     height: 455px;
  17. }
  18. .news {
  19.     height: 165px;
  20.    border: 1px solid #e4e4e4;
  21. }
  22. .news-hd {
  23.     height: 33px;
  24.     line-height: 33px;
  25.     border-bottom: 1px dotted #e4e4e4;
  26.     padding: 0 15px;
  27. }
  28. .news-hd h5 {
  29.     float: left;
  30.     font-size: 14px;
  31. }
  32. .news-hd .more {
  33.     float: right;
  34. }
  35. .news-hd .more::after {
  36.     font-family: 'icomoon';
  37.     content: '\e920';
  38. }
  39. .news-bd {
  40.     padding: 5px 15px 0;
  41. }
  42. .news-bd ul li {
  43.     height: 24px;
  44.     line-height: 24px;
  45.     overflow: hidden;
  46.     white-space: nowrap;
  47.     text-overflow: ellipsis;
  48. }
  49. .lifeservice {
  50.     overflow: hidden;
  51.     height: 209px;
  52.     /* background-color: purple; */
  53.     border: 1px solid #e4e4e4;
  54.     border-top: 0;
  55. }
  56. .lifeservice ul {
  57.     width: 252px;
  58. }
  59. .lifeservice ul li {
  60.     float: left;
  61.     width: 63px;
  62.     height: 71px;
  63.     border-right: 1px solid #e4e4e4;
  64.     border-bottom: 1px solid #e4e4e4;
  65.     text-align: center;
  66. }
  67. .lifeservice ul li i {
  68.     display: inline-block;
  69.     width: 24px;
  70.     height: 28px;
  71.     background-color: pink;
  72.     margin-top: 12px;
  73.     background: url(../images/icons.png) no-repeat -19px -15px;
  74. }
  75. .bargain {
  76.     margin-top: 5px;
  77. }
  78. /* 推荐模块 */
  79. .recom {
  80.     height: 163px;
  81.     background-color: #ebebeb;
  82.     margin-top: 12px;
  83. }
  84. .recom_hd {
  85.     float: left;
  86.     height: 163px;
  87.     width: 205px;
  88.     background-color: #5c5251;
  89.     text-align: center;
  90.     padding-top: 30px;
  91. }
  92. .recom_bd {
  93.     float: left;
  94. }
  95. .recom_bd ul li {
  96.     position: relative;
  97.     float: left;
  98. }
  99. .recom_bd ul li img {
  100.     width: 248px;
  101.     height: 163px;
  102. }
  103. .recom_bd ul li:nth-child(-n+3)::after {
  104.     content: '';
  105.     position: absolute;
  106.     right: 0;
  107.     top: 10px;
  108.     width: 1px;
  109.     height: 145px;
  110.     background-color: #ddd;
  111. }
  112. /* 家用电梯模块 */
  113. .box_hd {
  114.     height: 30px;
  115.     border-bottom: 2px solid #c81623;
  116. }
  117. .box_hd  h3 {
  118.     float: left;
  119.     font-size: 18px;
  120.     color: #c81623;
  121.     font-weight: 400;
  122. }
  123. .tab_list {
  124.     float: right;
  125.     line-height: 30px;
  126. }
  127. .tab_list ul li {
  128.     float: left;
  129. }
  130. .tab_list ul li a {
  131.     margin: 0 15px;
  132. }
  133. .floor .w {
  134.     margin-top: 30px;
  135. }
  136. .box_bd {
  137.     height: 361px;
  139. }
  140. .tab_list_item>div {
  141.     float: left;
  142.     height: 361px;
  143. }
  145. .col_210 {
  146.     width: 210px;
  147.     background-color: #f9f9f9;
  148.     text-align: center;
  149. }
  150. .col_210  ul li {
  151.     float: left;
  152.     width: 85px;
  153.     height: 34px;
  154.     border-bottom: 1px solid #ccc;
  155.     text-align: center;
  156.     line-height: 33px;
  157.     margin-right: 10px;
  158. }
  159. .col_210  ul {
  160.     padding-left: 12px;
  161. }
  162. .col_329 {
  163.     width: 329px;
  164. }
  165. .col_221 {
  166.     width: 221px;
  167.     border-right: 1px solid #ccc;
  168. }
  169. .col_219 {
  170.     width: 219px;
  171. }
  172. .bb {
  173.     /* 一般情况下，a如果包含有宽度的盒子，a需要转为块级元素 */
  174.     display: block;
  175.     border-bottom: 1px solid #ccc;
  176. }

商品列表页面——list.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>列表页-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
  9.     </title>
  10.     <!-- 网站说明 -->
  11.     <meta name="description"
  12.         content="品优购商城-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
  13.     <!-- 关键字 -->
  14.     <meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />
  15.     <!-- 引入favicon图标 -->
  16.     <link rel="shortcut icon" href="favicon.ico" />
  17.     <!-- 引入我们初始化样式文件 -->
  18.     <link rel="stylesheet" href="css/base.css">
  19.     <!-- 引入我们公共的样式文件 -->
  20.     <link rel="stylesheet" href="css/common.css">
  21.     <!-- 引入我们列表页的css文件 -->
  22.     <link rel="stylesheet" href="css/list.css">
  23. </head>
  25. <body>
  26.     <!-- 快捷导航模块 start -->
  27.     <section class="shortcut">
  28.         <div class="w">
  29.             <div class="fl">
  30.                 <ul>
  31.                     <li>品优购欢迎您！&nbsp;</li>
  32.                     <li>
  33.                         <a href="#">请登录</a> &nbsp; <a href="#" class="style_red">免费注册</a>
  34.                     </li>
  35.                 </ul>
  36.             </div>
  37.             <div class="fr">
  38.                 <ul>
  39.                     <li>我的订单</li>
  40.                     <li></li>
  41.                     <li class="arrow-icon">我的品优购</li>
  42.                     <li></li>
  43.                     <li>品优购会员</li>
  44.                     <li></li>
  45.                     <li>企业采购</li>
  46.                     <li></li>
  47.                     <li class="arrow-icon">关注品优购</li>
  48.                     <li></li>
  49.                     <li class="arrow-icon">客户服务</li>
  50.                     <li></li>
  51.                     <li class="arrow-icon">网站导航</li>
  52.                 </ul>
  53.             </div>
  54.         </div>
  55.     </section>
  56.     <!-- 快捷导航模块 end -->
  57.     <!-- header头部模块制作 start -->
  58.     <header class="header w">
  59.         <!-- logo模块 -->
  60.         <div class="logo">
  61.             <h1>
  62.                 <a href="index.html" title="品优购商城">品优购商城</a>
  63.             </h1>
  64.         </div>
  65.         <!-- 列表页的秒杀模块 -->
  66.         <div class="sk">
  67.             <img src="images/sk.png" alt="">
  68.         </div>
  69.         <!-- search搜索模块 -->
  70.         <div class="search">
  71.             <input type="search" name="" id="" placeholder="语言开发">
  72.             <button>搜索</button>
  73.         </div>
  74.         <!-- hotwords模块制作 -->
  75.         <div class="hotwords">
  76.             <a href="#" class="style_red">优惠购首发</a>
  77.             <a href="#">亿元优惠</a>
  78.             <a href="#">9.9元团购</a>
  79.             <a href="#">美满99减30</a>
  80.             <a href="#">办公用品</a>
  81.             <a href="#">电脑</a>
  82.             <a href="#">通信</a>
  83.         </div>
  84.         <!-- 购物车模块 -->
  85.         <div class="shopcar">
  86.             我的购物车
  87.             <i class="count">8</i>
  88.         </div>
  89.     </header>
  90.     <!-- header头部模块制作 end -->
  91.     <!-- nav模块制作 start -->
  92.     <nav class="nav">
  93.         <div class="w">
  94.             <div class="sk_list">
  95.                 <ul>
  96.                     <li><a href="#">品优秒杀</a></li>
  97.                     <li><a href="#">品优秒杀</a></li>
  98.                     <li><a href="#">品优秒杀</a></li>
  99.                 </ul>
  100.             </div>
  101.             <div class="sk_con">
  102.                 <ul>
  103.                     <li><a href="#">女装</a></li>
  104.                     <li><a href="#" class="style_red">女鞋</a></li>
  105.                     <li><a href="#">女装</a></li>
  106.                     <li><a href="#">女装</a></li>
  107.                     <li><a href="#">女装</a></li>
  108.                     <li><a href="#">女装</a></li>
  109.                     <li><a href="#">女装</a></li>
  110.                     <li><a href="#">女装</a></li>
  111.                     <li><a href="#">更多分类</a></li>
  112.                 </ul>
  113.             </div>
  114.         </div>
  115.     </nav>
  116.     <!-- nav模块制作 end -->
  117.     <!-- 列表页主体部分 -->
  118.     <div class="w sk_container">
  119.         <div class="sk_hd">
  120.             <img src="upload/bg_03.png" alt="">
  121.         </div>
  122.         <div class="sk_bd">
  124.              <ul class="clearfix">
  125.                 <li>
  126.                     <img src="upload/list.jpg" alt="">
  127.                 </li>
  128.                 <li>
  129.                     <img src="upload/list.jpg" alt="">
  130.                 </li>
  131.                 <li>
  132.                     <img src="upload/list.jpg" alt="">
  133.                 </li>
  134.                 <li>
  135.                     <img src="upload/list.jpg" alt="">
  136.                 </li>
  137.                 <li>
  138.                     <img src="upload/list.jpg" alt="">
  139.                 </li>
  140.                 <li>
  141.                     <img src="upload/list.jpg" alt="">
  142.                 </li>
  143.                 <li>
  144.                     <img src="upload/list.jpg" alt="">
  145.                 </li>
  146.                 <li>
  147.                     <img src="upload/list.jpg" alt="">
  148.                 </li>
  149.                 <li>
  150.                     <img src="upload/list.jpg" alt="">
  151.                 </li>
  152.             </ul>
  153.         </div>
  154.     </div>
  155.     <!-- 底部模块的制作 start -->
  156.     <footer class="footer">
  157.         <div class="w">
  158.             <div class="mod_service">
  159.                 <ul>
  160.                     <li>
  161.                         <h5></h5>
  162.                         <div class="service_txt">
  163.                             <h4>正品保障</h4>
  164.                             <p>正品保障,提供发票</p>
  165.                         </div>
  166.                     </li>
  167.                     <li>
  168.                         <h5></h5>
  169.                         <div class="service_txt">
  170.                             <h4>正品保障</h4>
  171.                             <p>正品保障,提供发票</p>
  172.                         </div>
  173.                     </li>
  174.                     <li>
  175.                         <h5></h5>
  176.                         <div class="service_txt">
  177.                             <h4>正品保障</h4>
  178.                             <p>正品保障,提供发票</p>
  179.                         </div>
  180.                     </li>
  181.                     <li>
  182.                         <h5></h5>
  183.                         <div class="service_txt">
  184.                             <h4>正品保障</h4>
  185.                             <p>正品保障,提供发票</p>
  186.                         </div>
  187.                     </li>
  188.                 </ul>
  189.             </div>
  190.             <div class="mod_help">
  191.                 <dl>
  192.                     <dt>服务指南</dt>
  193.                     <dd><a href="#">购物流程</a></dd>
  194.                     <dd><a href="#">会员介绍</a></dd>
  195.                     <dd><a href="#">生活旅行/团购</a></dd>
  196.                     <dd><a href="#">常见问题</a></dd>
  197.                     <dd><a href="#">大家电</a></dd>
  198.                     <dd><a href="#">联系客服</a></dd>
  199.                 </dl>
  200.                 <dl>
  201.                     <dt>服务指南</dt>
  202.                     <dd><a href="#">购物流程</a></dd>
  203.                     <dd><a href="#">会员介绍</a></dd>
  204.                     <dd><a href="#">生活旅行/团购</a></dd>
  205.                     <dd><a href="#">常见问题</a></dd>
  206.                     <dd><a href="#">大家电</a></dd>
  207.                     <dd><a href="#">联系客服</a></dd>
  208.                 </dl>
  209.                 <dl>
  210.                     <dt>服务指南</dt>
  211.                     <dd><a href="#">购物流程</a></dd>
  212.                     <dd><a href="#">会员介绍</a></dd>
  213.                     <dd><a href="#">生活旅行/团购</a></dd>
  214.                     <dd><a href="#">常见问题</a></dd>
  215.                     <dd><a href="#">大家电</a></dd>
  216.                     <dd><a href="#">联系客服</a></dd>
  217.                 </dl>
  218.                 <dl>
  219.                     <dt>服务指南</dt>
  220.                     <dd><a href="#">购物流程</a></dd>
  221.                     <dd><a href="#">会员介绍</a></dd>
  222.                     <dd><a href="#">生活旅行/团购</a></dd>
  223.                     <dd><a href="#">常见问题</a></dd>
  224.                     <dd><a href="#">大家电</a></dd>
  225.                     <dd><a href="#">联系客服</a></dd>
  226.                 </dl>
  227.                 <dl>
  228.                     <dt>服务指南</dt>
  229.                     <dd><a href="#">购物流程</a></dd>
  230.                     <dd><a href="#">会员介绍</a></dd>
  231.                     <dd><a href="#">生活旅行/团购</a></dd>
  232.                     <dd><a href="#">常见问题</a></dd>
  233.                     <dd><a href="#">大家电</a></dd>
  234.                     <dd><a href="#">联系客服</a></dd>
  235.                 </dl>
  236.                 <dl>
  237.                     <dt>帮助中心</dt>
  238.                     <dd>
  239.                         <img src="images/wx_cz.jpg" alt="">
  240.                         品优购客户端
  241.                     </dd>
  242.                 </dl>
  243.             </div>
  244.             <div class="mod_copyright">
  245.                 <div class="links">
  246.                     <a href="#">关于我们</a> | <a href="#">联系我们</a> | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 |
  247.                     品优购公益 | English Site | Contact U
  248.                 </div>
  249.                 <div class="copyright">
  250.                     地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>
  251.                     京ICP备08001421号京公网安备110108007702
  252.                 </div>
  253.             </div>
  254.         </div>
  255.     </footer>
  256.     <!-- 底部模块的制作 end -->
  257. </body>
  259. </html>

商品列表样式——list.css

  1. /* 列表页专有的css */
  2. .nav {
  3.     overflow: hidden;
  4. }
  5. .sk {
  6.     position: absolute;
  7.     left: 190px;
  8.     top: 40px;
  9.     border-left: 1px solid #c81523;
  10.     padding: 3px 0 0  14px;
  11. }
  12. .sk_list {
  13.     float: left;
  14. }
  15. .sk_list  ul li {
  16.     float: left;
  17. }
  18. .sk_list  ul li a {
  19.     display: block;
  20.     line-height: 47px;
  21.     padding: 0 30px;
  22.     font-size: 16px;
  23.     font-weight: 700;
  24.     color: #000;
  25. }
  26. .sk_con {
  27.     float: left;
  28. }
  29. .sk_con ul li {
  30.     float: left;
  31. }
  32. .sk_con  ul li a {
  33.     display: block;
  34.     line-height: 49px;
  35.     padding: 0 20px;
  36.     font-size: 14px;
  38. }
  39. .sk_con  ul li:last-child a::after {
  40.     content: '\e91e';
  41.     font-family: 'icomoon';
  42. }
  43. .sk_bd ul li {
  44.     overflow: hidden;
  45.     float: left;
  46.     margin-right: 13px;
  47.     width: 290px;
  48.     height: 460px;
  49.     border: 1px solid transparent;
  50. }
  51. .sk_bd ul li:nth-child(4n) {
  52.     margin-right: 0;
  53. }
  54. .sk_bd ul li:hover {
  55.     border: 1px solid #c81523;
  56. }

登录注册页面——login.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>个人注册</title>
  9.     <!-- 引入favicon图标 -->
  10.     <link rel="shortcut icon" href="favicon.ico" />
  11.     <!-- 引入我们初始化的css -->
  12.     <link rel="stylesheet" href="css/base.css">
  13.     <!-- 引入我们自己的注册页面的css -->
  14.     <link rel="stylesheet" href="css/register.css">
  15. </head>
  17. <body>
  18.     <div class="w">
  19.         <header>
  20.             <div class="logo">
  21.                 <a href="index.html"> <img src="images/logo.png" alt=""></a>
  22.             </div>
  23.         </header>
  24.         <div class="registerarea">
  25.             <h3>注册新用户
  26.                 <div class="login">我有账号，去<a href="#">登陆</a></div>
  27.             </h3>
  28.             <div class="reg_form">
  29.                 <form action="">
  30.                     <ul>
  31.                         <li><label for="">手机号：</label> <input type="text" class="inp">
  32.                             <span class="error"> <i class="error_icon"></i> 手机号码格式不正确，请从新输入 </span></li>
  33.                         <li><label for="">短信验证码：</label> <input type="text" class="inp">
  34.                             <span class="success"> <i class="success_icon"></i> 短信验证码输入正确 </span></li>
  35.                         <li><label for="">登录密码：</label> <input type="password" class="inp">
  36.                             <span class="error"> <i class="error_icon"></i> 手机号码格式不正确，请从新输入 </span></li>
  37.                         <li class="safe">安全程度 <em class="ruo">弱</em> <em class="zhong">中</em> <em class="qiang">强</em> </li>
  38.                         <li><label for="">确认密码：</label> <input type="password" class="inp">
  39.                             <span class="error"> <i class="error_icon"></i> 手机号码格式不正确，请从新输入 </span></li>
  40.                         <li class="agree"><input type="checkbox" name="" id=""> 
  41.                             同意协议并注册 <a href="#">《知晓用户协议》</a>
  43.                         </li>
  44.                         <li>
  45.                             <input type="submit" value="完成注册" class="btn">
  46.                         </li>
  47.                     </ul>
  48.                 </form>
  49.             </div>
  50.         </div>
  51.         <footer>
  52.             <div class="mod_copyright">
  53.                 <div class="links">
  54.                     <a href="#">关于我们</a> | <a href="#">联系我们</a> | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 |
  55.                     品优购公益 | English Site | Contact U
  56.                 </div>
  57.                 <div class="copyright">
  58.                     地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>
  59.                     京ICP备08001421号京公网安备110108007702
  60.                 </div>
  61.             </div>
  62.         </footer>
  63.     </div>
  64. </body>
  66. </html>

登录注册页面样式——login.css

  1. .w {
  2.     width: 1200px;
  3.     margin: 0 auto;
  4. }
  5. header {
  6.     height: 84px;
  7.     border-bottom: 2px solid #c81523;
  8. }
  9. .logo {
  10.     padding-top: 18px;
  11. }
  12. .registerarea {
  13.     height: 522px;
  14.     border: 1px solid #ccc;
  15.     margin-top: 20px;
  16. }
  17. .registerarea h3 {
  18.     height: 42px;
  19.     border-bottom: 1px solid #ccc;
  20.     background-color: #ececec;
  21.     line-height: 42px;
  22.     padding: 0 10px;
  23.     font-size: 18px;
  24.     font-weight: 400;
  25. }
  26. .login {
  27.     float: right;
  28.     font-size: 14px;
  29. }
  30. .login a {
  31.     color: #c81523;
  32. }
  33. .reg_form {
  34.     width: 600px;
  36.     margin: 50px auto 0;
  37. }
  38. .reg_form ul li {
  39.     margin-bottom: 20px;
  40. }
  41. .reg_form ul li label {
  42.     display: inline-block;
  43.     width: 88px;
  44.     text-align: right;
  45. }
  46. .reg_form ul li .inp {
  47.     width: 242px;
  48.     height: 37px;
  49.     border: 1px solid #ccc;
  50. }
  51. .error {
  52.     color: #c81523;
  53. }
  54. .error_icon,
  55. .success_icon {
  56.     display: inline-block;
  57.     vertical-align: middle;
  58.     width: 20px;
  59.     height: 20px;
  60.     background: url(../images/error.png) no-repeat;
  61.     margin-top: -2px;
  62. }
  63. .success {
  64.     color: green;
  65. }
  66. .success_icon {
  67.     background: url(../images/success.png) no-repeat;
  68. }
  69. .safe {
  70.     padding-left: 170px;
  71. }
  72. .safe em {
  73.     padding: 0 12px;
  74.     color: #fff;
  75. }
  76. .ruo {
  77.     background-color: #de1111;
  78. }
  79. .zhong {
  80.     background-color: #40b83f;
  81. }
  83. .qiang {
  84.     background-color: #f79100;
  85. }
  86. .agree {
  87.     padding-left: 95px;
  88. }
  89. .agree input {
  90.     vertical-align: middle;
  91. }
  92. .agree a {
  93.     color: #1ba1e6;
  94. }
  95. .btn {
  96.     width: 200px;
  97.     height: 34px;
  98.     background-color: #c81623;
  99.     font-size: 14px;
  100.     color: #fff;
  101.     margin: 30px 0 0 70px;
  102. }
  103. .mod_copyright {
  104.     text-align: center;
  105.     padding-top: 20px;
  106. }
  107. .links {
  108.     margin-bottom: 15px;
  109. }
  110. .links a {
  111.     margin: 0 3px;
  112. }
  113. .copyright {
  114.     line-height: 20px;
  115. }

（6）web端初始化css

  1. /*
  2. 1）去掉边框值
  3. 2）统一页面字体和大小
  4. 3）去掉外边距和内边距
  5. */
  6. HTML, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
  7. pre, form, fieldset, table, th, td {
  8.     border:none;
  9.     /* font-family:"微软雅黑","黑体","宋体"; */
  10.     /* font-family:Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif; */
  11.     /* font-size:14px; */
  12.     font:12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
  13.     margin:0px;
  14.     padding:0px;
  15.     /* css3盒子模型 */
  16.     box-sizing:border-box;
  17.     }
  19. /*
  20. 让文档和文档的主题的高宽度保持和可视范围的高宽度一致
  21. */
  22. html,body{
  23.     height: 100%;
  24.     width: 100%;
  25.     }
  27. /*
  28. 设置字体样式和粗细保持默认
  29. */
  30. address, caption, cite, code, dfn, em, strong, th, var {
  31.     font-style: normal;
  32.     font-weight: normal;
  33. }
  35. /*
  36. 去掉链接标签默认的下划线
  37. */
  38. a{
  39.     display:inline-block;
  40.     color:#000;
  41.     text-decoration:none;
  42. }
  44. input{
  45.     font-family:Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
  46.     border:0;
  47.     outline:none;
  48. }
  50. button{
  51.     border:0;
  52.     margin:0;
  53.     padding:0;
  54. }
  56. i,em{
  57.     font-style: normal;
  58. }
  60. /*未访问过的链接*/
  61. /* a:link{
  62.     color:#000;
  63.     text-decoration:none; 
  64. }*/
  65. /* 已经访问过的链接 */
  66. /* a:visited{
  67.     color:#000;
  68.     text-decoration:none;
  69. } */
  70. /* a:hover{
  71.     color:#fff;
  72. }
  73. a:active{
  74.     color:#fff;
  75. } */
  76. /* input::-ms-clear{
  77.     display:none;
  78. }
  79. input::-ms-reveal{
  80.     display:none;
  81. }
  82. input{
  83.     -webkit-appearance: none;
  84.     margin: 0;
  85.     outline: none;
  86.     padding: 0;
  87. }
  88. input::-webkit-input-placeholder{
  89.     color: #ccc;
  90. }
  91. input::-ms-input-placeholder{
  92.     color: #ccc;
  93. }
  94. input::-moz-placeholder{
  95.     color: #ccc;
  96. }
  97. input[type=submit],input[type=button]{
  98.     cursor: pointer;
  99. }
  100. button[disabled], input[disabled] {
  101.     cursor: default;
  102. } */
  103. img{
  104.     border:none;
  105. }
  106. ul,ol,li{
  107.     list-style-type:none;
  108. }
  109. /*公共方法*/
  110. .clear{
  111.     clear: both;
  112. }
  113. .clearleft{
  114.     clear: left;
  115. }
  116. .clearright{
  117.     clear: right;
  118. }
  119. .floatleft{
  120.     float: left;
  121. }
  122. .floatright{
  123.     float: right;
  124. }
  125. .cursor{
  126.     cursor: pointer;
  127. }
  128. /*背景及色值表*/
  129. .bg000{
  130.     background: #000;
  131. }
  132. .color000{
  133.     color: #000;
  134. }