Web网页项目实战-----小兔鲜儿项目

大号在练葵花宝典  金牌会员 | 2025-1-1 00:21:24 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 897|帖子 897|积分 2691

本网站是一个电商网站，重要由Html、CSS、JS来完成，实现的功能重要是可以购买产品，展示产品，查看订单等功能，结果如下，如有需要项目代码的可以私信我，或者文章底下批评，我给分享原项目和资源文件







一、项目样式补充

目标：能够利用精灵图，能够给元素添加阴影结果，能够让元素完成过渡结果

学习路径：

1.精灵图

1）精灵图的介绍
a.场景：项目中将多张小图片，归并成一张大图片，这张大图片称之为精灵图
b.优点：减少服务器发送次数，减少服务器的压力，提高页面加载速率
2）精灵图的利用步调
a.创建一个盒子， 设置盒子的尺寸和小图尺寸雷同
b.将精灵图设置为盒子的背景图片
c.修改背景图位置
通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position:x y
  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4.     <title>Document</title>
  5.     <style>
  6.         span {
  7.             display: inline-block;
  8.             width: 18px;
  9.             height: 24px;
  10.             background-color: pink;
  11.             background-image: url(images/taobao.png);
  12.             /* 背景图位置属性，改变背景图的位置 */
  13.             /* 水平方向位置 垂直方向的位置 */
  14.             /* 想要左侧移动图片，位置取负数 */
  15.             background-position: -3px 0px;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <!-- 精灵图不能设置为图片，会把整个的都显示出来 -->
  21.     <!-- <img src="images/taobao.png" alt=""> -->
  22.     <!-- 精灵图的标签都用行内标签  span,b,i -->
  23.     <span></span>
  24. </body>
复制代码


2.背景图片大小

1）作用：设置背景图片的大小
2）语法：background-size:宽度 高度;
3）取值：

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4.     <title>Document</title>
  5.     <style>
  6.         .box {
  7.             width: 400px;
  8.             height: 300px;
  9.             background-color: pink;
  10.             background-image: url(images/1.jpg);
  11.             background-repeat: no-repeat;
  12.             /* background-size: 300px; */
  13.             /* background-size: 50%; */
  14.             /* 如果图的宽或者高与盒子的尺寸相同了，另一个方向停止缩放 */
  15.             background-size: contain;
  16.             /* 保证宽高和盒子尺寸完全相同，导致图片显示不全 */
  17.             /* background-size: cover; */
  18.             /* 工作中，图的比例和盒子的比例是相同的 */
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <div class="box"></div>
  24. </body>
复制代码
设置为contain的结果为当图片的宽度或者是高度等于了盒子的宽度和高度中最小的那个的时候，就停止缩放了

设置为cover的时候，显示结果为按比例缩放，直到填充到整个盒子，所以会显示不全

4）background连写拓展
a.完备连写：background:color image repeat position/size;
b.注意点：background-size和background连写同时设置时，需要注意覆盖问题
c.解决：
要么单独的样式写连写的下面
要么单独的样式写在连写的内里
3.文字阴影

4.盒子阴影

1）作用：给盒子添加阴影结果，吸引用户注意，体现页面的制作细节
2）属性名：box-shadow
3）取值：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         .box {
  9.             width: 200px;
  10.             height: 200px;
  11.             background-color: pink;
  12.             /* box-shadow: 5px 10px 20px 10px green inset; */
  13.             box-shadow: 5px 10px 20px 10px green;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.     <div class="box"></div>
  19. </body>
  20. </html>
复制代码


5.过渡

1）作用：让元素的样式渐渐的变化，长配合hover利用，增强网页交互体验
2）属性名：transition
3）常见取值：

4）注意点：
a.过渡需要：默认状态和hover状态样式不同，才能有过渡结果
b.transition属性给需要过渡的元素本身加
c.transition属性设置在不同的状态中，结果是不同的
给默认状态设置，鼠标移入移出都有过渡结果
给hover状态设置，鼠标移入有过渡结果，移出没有过渡结果
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         .box {
  9.             width: 200px;
  10.             height: 200px;
  11.             background-color: pink;
  12.             /* 宽度200，悬停的时候宽度为600，花费1秒钟 */
  13.             /* transition: width 1s, background-color 2s; */
  14.             /* 如果过渡变化的属性很多，那么可以设置为all */
  15.             transition: all 1s;
  16.         }
  17.         .box:hover {
  18.             width: 600px;
  19.             background-color:green;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <div class="box"></div>
  25. </body>
  26. </html>
复制代码


二、项目前置认知

目标：能够知道SEO三大标签，能够设置网页的ico图标，能够书写板心公共类代码

学习路径：

1.网页和网站的关系

网站是由多个网页构成的
2.骨架布局标签

1）DOCTYPE文档说明
  1. <!DOCTYPE html>
复制代码
文档范例声明，告诉浏览器该网页的HTML版本，上面的说明是H5版本
2）网页语言
  1. <html lang="en">
复制代码
a.标识网页利用的语言
b.作用：搜索引擎归类+浏览器翻译
c.常见语言：zh-CN中文简体/en英文
3）字符编码（UTF-8）
  1. <meta charset="UTF-8">
复制代码
a.标识网页利用的字符编码
b.作用：生存和打开的字符编码需要同一设置，否则可能会出现乱码
c.常见字符编码：
UTF-8:万国码，国际化的字符编码，收录了全国语言的文字
GB2312:6000+汉字
GBK:200000+汉字
注意点：开发中同一利用UTF-8字符编码即可
3.SEO三大标签

1）SEO（Search Engine Optimization）：搜索引擎优化
2）作用：让网站在搜索引擎上的排名靠前
3）提拔SEO的常见方法：
a.竞价排名
b.将网页制作成html后缀
c.标签语义化（在符合的地方利用符合的标签）
4）SEO三大标签

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>    <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>京东-正品低价</title>   <meta name="description" content="京东JD.COM-专业的综合网上购物商城,为您提供正品低价的购物选择、优质便捷的服务体验。商品来自环球数十万品牌商家,席卷家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类">   <meta name="keywords" content="网上购物，手机，家电，服装，居家"></head><body>    </body></html>
复制代码
4.ico图标设置

1）场景：显示在标签页标题左侧的小图标，风俗利用.ico格式的图标
2）常见代码：
  1. <link rel="shortcut icon" href="favicon.ico">
复制代码
需要注意的是rel内里必须是shortcut icon，不能是从前引入css的

5.版心

三、项目布局搭建

目标：能够利用专业方式完成项目布局搭建和基础公共样式

学习路径：

1.文件和目录预备

1）新建项目文件夹xtx-pc-client，在VSCode中打开
a.在实际开发中，项目文件夹不建议利用中文
b.全部项目相关文件都生存在xtx-pc-client目录中
2）复制favicon.ico到xtx-pc-client目录中
a.一样平常风俗将ico图标放在项目根目录
3）复制images和uploads目录到xtx-pc-client目录中
a.imgaes：存放网站固定利用的图片素材，如：logo、样式装饰图片…等
b.uploads：存放网站非固定利用的图片素材，如：商品图片、宣传图片…等
4）新建index.html在根目录
5）新建css文件夹生存网站的样式，并且新建以下CSS文件
a.base.css：基础公共样式
b.common.css：该网站中多个网页雷同模块的重复样式，如：头部、底部
c.index.css首页样式

2.基础公共样式

  1. /* 清除默认样式的代码 */
  2. /* 去除常见标签默认的 margin 和 padding */
  3. body,
  4. h1,
  5. h2,
  6. h3,
  7. h4,
  8. h5,
  9. h6,
  10. p,
  11. ul,
  12. ol,
  13. li,
  14. dl,
  15. dt,
  16. dd,
  17. input {
  18.   margin: 0;
  19.   padding: 0;
  20. }
  22. /* 內减模式 */
  23. * {
  24.     box-sizing: border-box;
  25. }
  27. /* 设置网页统一的字体大小、行高、字体系列相关属性 */
  28. body {
  29.   font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei",
  30.     "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
  31.   color: #333;
  32. }
  34. /* 去除列表默认样式 */
  35. ul,
  36. ol {
  37.   list-style: none;
  38. }
  40. /* 去除默认的倾斜效果 */
  41. em,
  42. i {
  43.   font-style: normal;
  44. }
  46. /* 去除a标签默认下划线，并设置默认文字颜色 */
  47. a {
  48.   text-decoration: none;
  49.   color: #333;
  50. }
  52. /* 设置img的垂直对齐方式为居中对齐，去除img默认下间隙 */
  53. img {
  54.   vertical-align: middle;
  55. }
  57. /* 去除input默认样式 */
  58. input {
  59.   border: none;
  60.   outline: none;
  61.   color: #333;
  62. }
  64. /* 左浮动 */
  65. .fl {
  66.   float: left;
  67. }
  69. /* 右浮动 */
  70. .fr {
  71.   float: right;
  72. }
  74. /* 双伪元素清除法 */
  75. .clearfix::before,
  76. .clearfix::after {
  77.   content: "";
  78.   display: table;
  79. }
  80. .clearfix::after {
  81.   clear: both;
  82. }
复制代码
3.index页面骨架

1)搭建快捷导航
结果：

  1. <!-- 快捷导航 -->
  2.     <div class="shortcut">
  3.         <div class="wrapper">
  4.             <ul>
  5.                 <li><a href="#">请先登录</a></li>
  6.                 <li><a href="#">免费注册</a></li>
  7.                 <li><a href="#">我的订单</a></li>
  8.                 <li><a href="#">会员中心</a></li>
  9.                 <li><a href="#">帮助中心</a></li>
  10.                 <li><a href="#">在线客服</a></li>
  11.                 <li><a href="#"><span></span>手机版</a></li>
  12.             </ul>
  13.         </div>
  14.     </div>
  16. /* 各个页面相同的样式表：头、尾部 */
  17. /* 版心 */
  18. .wrapper {
  19.     width: 1240px;
  20.     margin: 0 auto;
  21. }
  23. /* 快捷导航 */
  24. .shortcut {
  25.     height: 52px;
  26.     background-color: #333;
  27. }
  29. .shortcut .wrapper {
  30.     height: 52px;
  31. }
  33. .shortcut .wrapper ul {
  34.     float: right;
  35. }
  37. .shortcut .wrapper li {
  38.     float: left;
  39.     line-height: 52px;
  40. }
  42. .shortcut .wrapper a {
  43.     padding: 0 16px;
  44.     border-right: 1px solid #666;
  45.     font-size: 14px;
  46.     color: #dcdcdc;
  47. }
  49. .shortcut .wrapper a span {
  50.     display: inline-block;
  51.     margin-right: 8px;
  52.     width: 11px;
  53.     height: 16px;
  54.     background-image: url(../images/sprites.png);
  55.     background-position: -160px -70px;
  56.     vertical-align: middle;
  57. }
复制代码
2）导航栏
结果：

html内容
  1. <!-- 头部 -->
  2.     <div class="header wrapper">
  3.         <!-- .logo+.nav+.search+.car -->
  4.         <div class="logo">
  5.             <!-- logo优化 搜索引擎优化-->
  6.             <h1><a href="#">小兔鲜儿</a></h1>
  7.         </div>
  8.         <div class="nav">
  9.             <ul>
  10.                 <li><a href="#">首页</a></li>
  11.                 <li><a href="#">生鲜</a></li>
  12.                 <li><a href="#">美食</a></li>
  13.                 <li><a href="#">餐厨</a></li>
  14.                 <li><a href="#">电器</a></li>
  15.                 <li><a href="#">居家</a></li>
  16.                 <li><a href="#">洗护</a></li>
  17.                 <li><a href="#">孕婴</a></li>
  18.                 <li><a href="#">服装</a></li>
  19.             </ul>
  20.         </div>
  21.         <div class="search">
  22.            <input type="text" placeholder="搜一搜">
  23.            <!-- 定位放大镜 -->
  24.            <span></span>
  25.         </div>
  26.         <div class="car">
  27.             <span>2</span>
  28.         </div>
  29.     </div>
  31. .header {
  32.     margin: 30px auto;
  33.     height: 70px;
  34.     /* background-color: pink; */
  35. }
  37. .logo {
  38.     float: left;
  39.     width: 207px;
  40.     height: 70px;
  41.     /* background-color: pink; */
  42. }
  44. /* logo 搜索引擎优化做法 */
  45. .logo h1 {
  46.     width: 207px;
  47.     height: 70px;
  48. }
  50. .logo h1 a {
  51.     display: block;
  52.     width: 207px;
  53.     height: 70px;
  54.     background-image: url(../images/logo.png);
  55.     background-size: contain;
  56.     /* 字号归0，主要是让字隐藏 */
  57.     font-size: 0;
  58. }
  60. .nav {
  61.     float: left;
  62.     margin-left: 40px;
  63.     height: 70px;
  64.     /* background-color: pink; */
  65. }
  67. .nav li {
  68.     float: left;
  69.     margin-right: 48px;
  70.     line-height: 70px;
  71. }
  73. .nav li a {
  74.     padding-bottom: 7px;
  75. }
  77. .nav li a:hover {
  78.     color: #27ba9b;
  79.     border-bottom: 1px solid #27ba9b;
  80. }
  82. .search {
  83.     float: left;
  84.     margin-top: 24px;
  85.     margin-left: 34px;
  86.     width: 172px;
  87.     height: 30px;
  88.     border-bottom: 2px solid #e7e7e7;
  89.     position: relative;
  90. }
  92. .search input {
  93.     padding-left: 30px;
  94.     width: 172px;
  95.     height: 28px;
  96. }
  98. .search input::placeholder {
  99.     font-size: 16px;
  100.     color: #ccc;
  101. }
  103. .search span {
  104.     display: inline-block;
  105.     width: 18px;
  106.     height: 18px;
  107.     background-image: url(../images/sprites.png);
  108.     background-position: -79px -69px;
  109.     position: absolute;
  110.     left: 2px;
  111.     top: 0px;
  112. }
  114. .car {
  115.     position: relative;
  116.     float: left;
  117.     margin-left:15px;
  118.     margin-top: 28px;
  119.     width: 23px;
  120.     height: 23px;
  121.     background-image: url(../images/sprites.png);
  122.     background-position: -119px -69px;
  123. }
  125. .car span {
  126.     /* 因为是绝对定位，盒子具备行内块特点 */
  127.     position: absolute;
  128.     right: -13px;
  129.     top: -6px;
  130.     width: 20px;
  131.     height: 15px;
  132.     background-color: #e26237;
  133.     border-radius:8px;
  134.     font-size: 13px;
  135.     color:#fff;
  136.     text-align: center;
  137.     line-height: 15px;
  138. }
复制代码
3）版权模块
结果：

html
  1. <div class="footer">
  2.         <div class="wrapper">
  3.             <div class="top">
  4.                 <ul>
  5.                     <li>
  6.                         <!-- 通过伪元素添加标签实现精灵图 -->
  7.                         <span>价格亲民</span>
  8.                     </li>
  9.                     <li>
  10.                         <span>物流快捷</span>
  11.                     </li>
  12.                     <li>
  13.                         <span>品质新鲜</span>
  14.                     </li>
  15.                 </ul>
  16.             </div>
  17.             <div class="bottom">
  18.                 <p>
  19.                     <a href="#">关于我们</a> |
  20.                     <a href="#">帮助中心</a> |
  21.                     <a href="#">售后服务</a> |
  22.                     <a href="#">配送与验收</a> |
  23.                     <a href="#">商务合作</a> |
  24.                     <a href="#">搜索推荐</a> |
  25.                     <a href="#">友情链接</a>
  26.                 </p>
  27.                 <p>
  28.                     CopyRight  @ 小兔鲜儿
  29.                 </p>
  30.             </div>
  31.         </div>
  32.     </div>
复制代码
css
  1. .footer {
  2.     height: 342px;
  3.     background-color: #333;
  4. }
  6. .footer .wrapper {
  7.     width: 1393px;
  8. }
  10. .footer .top {
  11.     padding-top: 59px;
  12.     padding-left: 135px;
  13.     height: 175px;
  14.     border-bottom: 3px solid #434343;
  15. }
  17. .footer .top li {
  18.     float: left;
  19.     position: relative;
  20.     margin-right: 300px;
  21.     width: 195px;
  22.     height: 58px;
  23.     line-height: 58px;
  24. }
  26. .footer .top li:last-child {
  27.     margin-right: 0;
  28. }
  30. /* 伪元素添加的标签 行内 */
  31. .footer .top li::before {
  32.     position: absolute;
  33.     left: 0;
  34.     top: 0;
  35.     display: inline-block;
  36.     content: '';
  37.     width: 58px;
  38.     height: 58px;
  39.     background-image: url(../images/sprites.png);
  40.     vertical-align: middle;
  41. }
  43. /* 如果vertical-align加了，行高加了，还是不能够居中，就进行定位 */
  44. /* 这种情况是在图片和文字一起的时候并且是居中的时候，而且是给图片加定位 */
  45. .footer .top li span {
  46.    margin-left: 77px;
  47.    font-size: 28px;
  48.    color: #fff;
  49. }
  51. /* 第二个li里面的before添加背景图位置属性 */
  52. .footer .top li:nth-child(2)::before {
  53.     background-position: -129px 0;
  54. }
  56. .footer .top li:nth-child(3)::before {
  57.     background-position: -64px 0;
  58. }
  60. .footer .bottom {
  61.     padding-top: 40px;
  62.     font-size: 14px;
  63.     color: #999;
  64.     text-align: center;
  65. }
  67. .footer .bottom a {
  68.     font-size: 14px;
  69.     color: #999;
  70. }
  72. .footer .bottom p {
  73.     margin-bottom: 20px;
  74. }
复制代码
4）banner图模块
结果：

html:
  1. <!-- banner图 -->
  2.     <div class="banner">
  3.         <div class="wrapper">
  4.             <!-- 有几个图，就写多少个li -->
  5.             <ul>
  6.                 <li><a href="#"><img src="uploads/banner_1.png" alt=""></a></li>
  7.             </ul>
  8.             <!-- 侧导航 -->
  9.             <div class="aside">
  10.                 <ul>
  11.                     <li><a href="#">生鲜<span>水果&nbsp;&nbsp;蔬菜</span></a></li>
  12.                     <li><a href="#">美食<span>面点&nbsp;&nbsp;干果</span></a></li>
  13.                     <li><a href="#">餐厨<span>数码产品</span></a></li>
  14.                     <li><a href="#">电器<span>床品&nbsp;&nbsp;四件套&nbsp;&nbsp;被枕</span></a></li>
  15.                     <li><a href="#">居家<span>奶粉&nbsp;&nbsp;玩具&nbsp;&nbsp;辅食</span></a></li>
  16.                     <li><a href="#">洗护<span>洗发&nbsp;&nbsp;洗护&nbsp;&nbsp;美妆</span></a></li>
  17.                     <li><a href="#">孕婴<span>奶粉&nbsp;&nbsp;玩具</span></a></li>
  18.                     <li><a href="#">服装<span>女装&nbsp;&nbsp;男装</span></a></li>
  19.                     <li><a href="#">杂货<span>户外&nbsp;&nbsp;图书</span></a></li>
  20.                     <li><a href="#">品牌<span>品牌制造</span></a></li>
  21.                 </ul>
  22.             </div>
  23.             <!-- 箭头 -->
  24.             <!-- prev 上一个 -->
  25.             <a href="#" class="prev"></a>
  26.             <!-- next 下一个 -->
  27.             <a href="#" class="next"></a>
  28.             <!-- 圆点 当前状态：current / active-->
  29.             <!-- js 找到用户点击的li 添加类名 li变成白色的 -->
  30.             <ol>
  31.                 <li></li>
  32.                 <li></li>
  33.                 <li class="current"></li>
  34.                 <li></li>
  35.                 <li></li>
  36.             </ol>
  37.         </div>
  38.     </div>
复制代码
css:
  1. .banner {
  2.     height: 500px;
  3.     background-color: #f5f5f5;
  4. }
  6. .banner .wrapper {
  7.     position: relative;
  8.     height: 500px;
  9.     background-color: pink;
  10. }
  12. /* 侧导航 */
  13. .banner .aside {
  14.     position: absolute;
  15.     left: 0;
  16.     top: 0;
  17.     width: 250px;
  18.     height: 500px;
  19.     background-color: rgba(0, 0, 0, .8);
  20. }
  22. .banner .aside li {
  23.     height: 50px;
  24.     line-height: 50px;
  25. }
  27. .banner .aside a {
  28.     position: relative;
  29.     /* 宽度和父级一样 */
  30.     padding-left: 36px;
  31.     display: block;
  32.     height: 50px;
  33.     /* background-color: pink; */
  34.     height: 50px;
  35.     color: #fff;
  36. }
  38. .banner .aside a span {
  39.     margin-left: 15px;
  40.     font-size: 14px;
  41. }
  43. .banner .aside a:hover {
  44.     background-color: #27ba9b;
  45. }
  47. /* a的里面最后的位置添加箭头 */
  48. .banner .aside a::after {
  49.     position: absolute;
  50.     right: 19px;
  51.     top: 19px;
  52.     content: '';
  53.     width: 6px;
  54.     height: 11px;
  55.     background-image: url(../images/sprites.png);
  56.     background-position: -80px -110px;
  57. }
  59. /* 箭头 */
  60. .prev,
  61. .next {
  62.     position: absolute;
  63.     top: 228px;
  64.     width: 45px;
  65.     height: 45px;
  66.     background-color: rgba(0, 0, 0, .2);
  67.     background-image: url(../images/sprites.png);
  68.     border-radius: 50%;
  69. }
  71. /* 背景图负责2件事情：改变箭头在盒子里面的位置，改变精灵图的位置 */
  72. /* 导致在精灵图中测量的尺寸不准确 */
  73. /* 解决方案有两种
  74.       1.书写背景图位置属性，借助谷歌的调试工具调试具体的位置数值
  75.       2.书写标签的时候，a负责盒子，里面在添加一个标签负责箭头
  76. */
  77. .prev {
  78.    left: 260px;
  79.    background-position: 14px -60px;
  80. }
  82. .next {
  83.    right: 10px;
  84.    background-position: -23px -60px;
  85. }
  87. /* 圆点 */
  88. .banner ol {
  89.     position: absolute;
  90.     left: 680px;
  91.     bottom: 30px;
  92.     height: 10px;
  93.     /* background-color: pink; */
  94. }
  96. .banner ol li {
  97.     float: left;
  98.     width: 10px;
  99.     margin-right: 24px;
  100.     height: 10px;
  101.     background-color: rgba(255, 255, 255, .4);
  102.     border-radius: 50%;
  103.     cursor: pointer;
  104. }
  106. .banner ol .current {
  107.     background-color: #fff;
  108. }
复制代码
5)生鲜好物模块
结果：

html:
  1. <!-- 新鲜好物 -->
  2.     <div class="goods wrapper">
  3.         <!-- hd header -->
  4.         <div class="hd">
  5.             <h2>新鲜好物 <span>新鲜出炉 品质保障</span></h2>
  6.             <a href="#">查看全部</a>
  7.         </div>
  8.         <!-- bd 身体 内容 -->
  9.         <div class="bd clearfix">
  10.             <ul>
  11.                 <li>
  12.                     <a href="#">
  13.                         <img src="uploads/new_goods_1.jpg" alt="">
  14.                         <h3>睿米无线吸尘器F8</h3>
  15.                         <div>￥<span>899</span></div>
  16.                         <b>新品</b>
  17.                      </a>
  18.                 </li>
  19.                 <li>
  20.                     <a href="#">
  21.                         <img src="uploads/new_goods_2.jpg" alt="">
  22.                         <h3>智能环绕3D空调</h3>
  23.                         <div>￥<span>1299</span></div>
  24.                         <b>新品</b>
  25.                      </a>
  26.                 </li>
  27.                 <li>
  28.                     <a href="#">
  29.                         <img src="uploads/new_goods_3.jpg" alt="">
  30.                         <h3>广东软软糯米煲仔饭</h3>
  31.                         <div>￥<span>129</span></div>
  32.                         <b>新品</b>
  33.                      </a>
  34.                 </li>
  35.                 <li>
  36.                     <a href="#">
  37.                         <img src="uploads/new_goods_4.jpg" alt="">
  38.                         <h3>罗西机械智能手表</h3>
  39.                         <div>￥<span>3399</span></div>
  40.                         <b>新品</b>
  41.                      </a>
  42.                 </li>
  43.             </ul>
  44.         </div>
  45.     </div>
复制代码
css:
  1. /* 新鲜好物 */
  2. .goods .hd {
  3.     height: 120px;
  4.     /* background-color: pink; */
  5.     line-height: 114px;
  6. }
  8. .goods .hd h2 {
  9.     float: left;
  10.     font-size: 29px;
  11.     font-weight: normal;
  12.     height: 114px;
  13. }
  15. .goods .hd h2 span {
  16.     margin-left: 34px;
  17.     font-size: 16px;
  18.     color: #999;
  19. }
  21. .goods .hd a ,
  22. .shengxian .hd .more{
  23.     float: right;
  24.     color: #999;
  25. }
  27. /* 如果样式一样的话就使用并集选择器 用,隔开两个标签使用同样的样式 */
  28. .goods .hd a::after,
  29. .shengxian .hd .more::after {
  30.     content: '';
  31.     display: inline-block;
  32.     margin-left: 13px;
  33.     width: 7px;
  34.     height: 13px;
  35.     background-image: url(../images/sprites.png);
  36.     background-position: 0 -110px;
  37.     vertical-align: middle;
  38. }
  40. .goods .bd li {
  41.     position: relative;
  42.     float: left;
  43.     width: 304px;
  44.     height: 405px;
  45.     background-color: #fff;
  46.     background-color: #f0f9f4;
  47.     margin-right: 8px;
  48.     text-align: center;
  49. }
  51. .goods .bd li:last-child {
  52.     margin-right: 0;
  53. }
  55. .goods .bd li img {
  56.     width: 304px;
  57. }
  59. .goods .bd li h3 {
  60.     margin-top: 16px;
  61.     margin-bottom: 10px;
  62.     font-size: 20px;
  63.     font-weight: 400;
  64. }
  66. .goods .bd li div {
  67.     color: #9a2e1f;
  68.     font-size: 17px;
  69. }
  71. .goods .bd li div span {
  72.     font-size: 23px;
  73. }
  75. .goods .bd li b {
  76.     position: absolute;
  77.     left: 17px;
  78.     top: 18px;
  79.     width: 28px;
  80.     height: 51px;
  81.     border: 1px solid #27ba9b;
  82.     border-radius: 2px;
  83.     font-size: 18px;
  84.     color: #27ba9b;
  85.     font-weight: 400;
  86.     line-height: 24px;
  87. }
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

正序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

大号在练葵花宝典

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表