CSS3练习--电商web

嚴華  金牌会员 | 2024-10-14 17:36:28 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 914|帖子 914|积分 2742

免责声明：本文仅做分享！
   
目录
 小练--小兔鲜儿
目录构建
SEO 三大标签
Favicon 图标
布局网页
版心
快捷导航（shortcut）
头部（header）
logo
导航
搜刮
购物车
底部（footer）
服务区
资助区
版权区
中间（banner）
奇怪好物区
人气保举区
热门品牌区
生鲜区
最新专题区
base.css(清除默认样式)

小兔鲜儿 - 奇怪 惠民 快捷！ (itheima.net)
SEO、Favicon、小兔鲜儿
 小练--小兔鲜儿

（电商web）
目录构建


SEO 三大标签

SEO：搜刮引擎优化，提升网站百度搜刮排名。
提升SEO的常见方法：
1. 竞价排名（花米）
2. 将网页制作成html后缀
3. 标签语义化（在合适的地方使用合适的标签）
4. ……

网页头部 SEO 标签：
• title：网页标题标签
• description：网页形貌
• keywords：网页关键词
  1.   <!-- meta:desc -->
  2.   <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
  3.   <!-- meta:kw -->
  4.   <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
  5.   <!-- title -->
  6.   <title>小兔鲜儿-新鲜、惠民、快捷！</title>
复制代码
Favicon 图标

网页图标，出现在欣赏器标题栏，增长网站辨识度。
.ico
  1. <!-- link:favicon -->
  2.   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
复制代码
布局网页

版心

版心居中
  1. /* 版心 */
  2. .wrapper {
  3.   margin: 0 auto;
  4.   width: 1240px;   /* 自己测量 */
  5. }
复制代码
快捷导航（shortcut）


通栏 > 版心 > 导航 ul > li > a
flex-end        （右对齐）
--- 给 a 加边框线，而不给li加，让a的高与字的高一样大，高。

头部（header）

（头部的盒子尺寸，要整体布局。）

.header > logo + 导航（nav）+ 搜刮（search） + 购物车（cart）

logo

display: block;  转成块级，如许就可以设置宽高。

导航

a 有底部10px间距。


搜刮

input默认样式   （欣赏器默认 先 生效默认样式！）

购物车



  3. /* 购物车 */
  4. .cart {
  5.   position: relative;
  6.   margin-top: 32px;
  7. }
  9. .cart .iconfont {
  10.   font-size: 24px;
  11. }
  13. .cart i {
  14.   position: absolute;
  15.   /* 相对定位 */
  16.   top: 1px;
  17.   /* right 定位右对齐：如果文字多了，向左撑开，可能盖住其他的内容 */
  18.   /* right: 1px; */
  19.   /* left 定位左对齐：文字多了，向右撑开 */
  20.   left: 15px;
  21.   /* 一般要向左对齐，向右撑开，所以不右对齐 */
  24.   /* 宽度不给，将来由内容撑开 */
  26.   padding: 0 6px;
  27.   height: 15px;
  28.   background-color: #E26237;
  29.   border-radius: 8px;
  30.   font-size: 14px;
  31.   color: #FFFEFE;
  32.   line-height: 15px;
  33.   /* 文字垂直居中 ，与高度一致 */
  34. }
复制代码
底部（footer）

---由于底部与头部类似，所以先完成底部。

 
  1.   <!-- 底部 -->
  2.   <div class="footer">
  3.     <div class="wrapper">
  4.       <!-- 服务 -->
  5.       <div class="service">
  6.         <ul>
  7.           <li>
  8.             <h5></h5>
  9.             <p>价格亲民</p>
  10.           </li>
  11.           <li>
  12.             <h5></h5>
  13.             <p>物流快捷</p>
  14.           </li>
  15.           <li>
  16.             <h5></h5>
  17.             <p>品质新鲜</p>
  18.           </li>
  19.           <li>
  20.             <h5></h5>
  21.             <p>售后无忧</p>
  22.           </li>
  24.         </ul>
  25.       </div>
  26.       <!-- 帮助中心 -->
  27.       <div class="help">
  28.         <div class="left">
  29.           <dl>
  30.             <dt>购物指南</dt>
  31.             <dd><a href="#">购物流程</a></dd>
  32.             <dd><a href="#">支付方式</a></dd>
  33.             <dd><a href="#">售后规则</a></dd>
  34.           </dl>
  35.           <dl>
  36.             <dt>配送方式</dt>
  37.             <dd><a href="#">配送运费</a></dd>
  38.             <dd><a href="#">配送范围</a></dd>
  39.             <dd><a href="#">配送时间</a></dd>
  40.           </dl>
  41.           <dl>
  42.             <dt>关于我们</dt>
  43.             <dd><a href="#">平台规则</a></dd>
  44.             <dd><a href="#">联系我们</a></dd>
  45.             <dd><a href="#">问题反馈</a></dd>
  46.           </dl>
  47.           <dl>
  48.             <dt>售后服务</dt>
  49.             <dd><a href="#">售后政策</a></dd>
  50.             <dd><a href="#">退款说明</a></dd>
  51.             <dd><a href="#">取消订单</a></dd>
  52.           </dl>
  53.           <dl>
  54.             <dt>服务热线</dt>
  55.             <dd><a href="#">在线客服<span class="iconfont icon-customer-service"></span></a></dd>
  56.             <dd><a href="#">客服电话 400-0000-000</a></dd>
  57.             <dd><a href="#">工作时间 周一至周日 8:00-18:00</a></dd>
  58.           </dl>
  59.         </div>
  60.         <div class="right">
  61.           <ul>
  62.             <li>
  63.               <div class="pic"><img src="./images/wechat.png" alt=""></div>
  64.               <p>微信公众号</p>
  65.             </li>
  66.             <li>
  67.               <div class="pic"><img src="./images/app.png" alt=""></div>
  68.               <p>APP下载二维码</p>
  69.             </li>
  70.           </ul>
  71.         </div>
  72.       </div>
  73.       <!-- 版权 -->
  74.       <div class="copyright">
  75.         <p>
  76.           <a href="#">关于我们</a>|
  77.           <a href="#">帮助中心</a>|
  78.           <a href="#">售后服务</a>|
  79.           <a href="#">配送与验收</a>|
  80.           <a href="#">商务合作</a>|
  81.           <a href="#">搜索推荐</a>|
  82.           <a href="#">友情链接</a>
  83.         </p>
  84.         <p>CopyRight © 小兔鲜</p>
  85.       </div>
  86.     </div>
  87.   </div>
复制代码
 
  2. /* 底部 */
  3. .footer {
  4.   height: 580px;
  5.   background-color: #F5F5F5;
  6. }
  9. /* 服务 */
  10. .service {
  11.   padding: 60px 0;
  12.   height: 178px;
  13.   border-bottom: 1px solid #E8E8E8;
  14. }
  16. .service ul {
  17.   display: flex;
  18.   justify-content: space-evenly;
  19. }
  21. .service li {
  22.   display: flex;
  23.   width: 190px;
  24.   height: 58px;
  25.   /* background-color: pink; */
  26. }
  28. .service li h5 {
  29.   margin-right: 20px;
  30.   width: 58px;
  31.   height: 58px;
  32.   background-image: url(../images/sprite.png);
  33. }
  35. .service li p {
  36.   font-size: 28px;
  37.   line-height: 58px;
  38. }
  40. .service li:nth-child(2) h5 {
  41.   background-position: 0 -58px;
  42. }
  44. .service li:nth-child(3) h5 {
  45.   background-position: 0 -116px;
  46. }
  48. .service li:nth-child(4) h5 {
  49.   background-position: 0 -174px;
  50. }
  52. /* 帮助中心 */
  53. .help {
  54.   display: flex;
  55.   justify-content: space-between;
  56.   padding-top: 60px;
  57.   height: 300px;
  58.   /* background-color: pink; */
  59. }
  61. /* left */
  62. .help .left {
  63.   display: flex;
  64. }
  66. .help .left dl {
  67.   margin-right: 84px;
  68. }
  70. .help .left dl:last-child {
  71.   margin-right: 0;
  72. }
  74. .help .left dt {
  75.   margin-bottom: 30px;
  76.   font-size: 18px;
  77. }
  79. .help .left dd {
  80.   margin-bottom: 10px;
  81. }
  83. .help .left a {
  84.   color: #969696;
  85. }
  87. .help .left .iconfont {
  88.   color: #5EB69C;
  89. }
  91. /* right */
  92. .help .right ul {
  93.   display: flex;
  94. }
  96. .help .right li:first-child {
  97.   margin-right: 55px;
  98. }
  100. .help .right .pic {
  101.   margin-bottom: 10px;
  102.   width: 120px;
  103.   height: 120px;
  104. }
  106. .help .right p {
  107.   color: #969696;
  108.   text-align: center;
  109. }
  111. /* 版权 */
  112. .copyright {
  113.   text-align: center;
  114. }
  116. .copyright p {
  117.   margin-bottom: 10px;
  118.   color: #A1A1A1;
  119. }
  121. .copyright p a {
  122.   margin: 0 10px;
  123.   color: #A1A1A1;
  124. }
复制代码
服务区


--注意CSS精灵（雪碧图）的应用。 

资助区


分左右两部分. 

版权区


小竖线 直接打 |  

中间（banner）



通栏 > 版心 > 轮播图（ul.pic）+ 侧导航（subnav > ul）+ 圆点指示器（ol）
        定位（子绝父相） 

 侧导航 
 右下角圆点指示器  ol > li > i（li 是大圆，i 是小圆）
 
  1. /* banner */
  2. .banner {
  3.   height: 500px;
  4.   background-color: #F5F5F5;
  5. }
  7. .banner .wrapper {
  8.   position: relative;
  9.   height: 500px;
  10.   background-color: pink;
  11.   overflow: hidden;
  12.   /* 隐藏溢出 */
  13. }
  15. /* 图片 */
  16. .banner .pic {
  17.   display: flex;
  18.   /* flex 布局，父级宽度不够，子级被挤小，不想挤小，增大父级尺寸 */
  19.   width: 3720px;
  20. }
  22. /* 侧导航 */
  23. .subnav {
  24.   position: absolute;
  25.   left: 0;
  26.   top: 0;
  27.   width: 250px;
  28.   height: 500px;
  29.   background-color: rgba(0, 0, 0, 0.42);
  30. }
  32. .subnav li {
  33.   display: flex;
  34.   justify-content: space-between;
  35.   padding-left: 30px;
  36.   padding-right: 12px;
  37.   height: 50px;
  38.   /* background-color: pink; */
  39.   line-height: 50px;
  40.   color: #fff;
  42.   cursor: pointer;
  43. }
  45. /* a所有都是小字，分类是大字 */
  46. .subnav li a {
  47.   margin-right: 5px;
  48.   font-size: 14px;
  49.   color: #fff;
  50. }
  52. .subnav li .classify {
  53.   margin-right: 14px;
  54.   font-size: 16px;
  55. }
  57. .subnav li .iconfont {
  58.   font-size: 14px;
  59. }
  61. .subnav li:hover {
  62.   background-color: #00BE9A;
  63. }
  65. /* 圆点指示器 */
  66. .banner ol {
  67.   position: absolute;
  68.   bottom: 17px;
  69.   right: 16px;
  70.   display: flex;
  71. }
  73. .banner ol li {
  74.   margin-left: 8px;
  75.   width: 22px;
  76.   height: 22px;
  77.   /* background-color: pink; */
  78.   border-radius: 50%;
  79.   cursor: pointer;
  80. }
  82. .banner ol i {
  83.   display: block;
  84.   margin: 4px;
  85.   width: 14px;
  86.   height: 14px;
  87.   background-color: rgba(255, 255, 255, 0.5);
  88.   border-radius: 50%;
  89. }
  91. /* 选中：li半透明； i白色 */
  92. .banner ol .current {
  93.   background-color: rgba(255, 255, 255, 0.5);
  94. }
  96. .banner ol .current i {
  97.   background-color: #fff;
  98. }
复制代码
 
奇怪好物区


标题（title） + 内容（bd）
（样式共用）
标题：

内容：

人气保举区

与上面类似
热门品牌区


箭头--定位。
 


 
生鲜区


标题+内容
鼠标悬停表现 -- 》过渡结果。

  1. /* 生鲜 */
  2. .fresh .title {
  3.   margin-top: 60px;
  4.   margin-bottom: 20px;
  5. }
  7. .title .right {
  8.   display: flex;
  9. }
  11. .title .right ul {
  12.   display: flex;
  13.   margin-top: 10px;
  14.   margin-right: 58px;
  15. }
  17. .title .right ul a {
  18.   display: block;
  19.   margin-left: 6px;
  20.   padding: 0 7px;
  21.   height: 20px;
  22.   /* background-color: pink; */
  23.   line-height: 20px;
  24. }
  26. .title .right ul .active {
  27.   background-color: #00BE9A;
  28.   color: #fff;
  29. }
  31. /* 生鲜内容 */
  32. .content {
  33.   display: flex;
  34.   justify-content: space-between;
  35. }
  37. .content .left {
  38.   width: 248px;
  39.   height: 610px;
  40.   /* background-color: pink; */
  41. }
  43. .content .right {
  44.   width: 968px;
  45.   height: 610px;
  46.   /* background-color: pink; */
  47. }
  49. .content .right ul {
  50.   display: flex;
  51.   flex-wrap: wrap;
  52. }
  54. .content .right li {
  55.   position: relative;
  56.   padding: 10px 21px 0;
  57.   width: 242px;
  58.   height: 305px;
  59.   border: 2px solid #fff;
  61.   /* 为了隐藏绿色cover */
  62.   overflow: hidden;
  63. }
  65. /* 产品内容 */
  66. .content .pic {
  67.   width: 200px;
  68.   height: 180px;
  69. }
  71. .content .info {
  72.   margin-top: 14px;
  73.   margin-bottom: 5px;
  74.   height: 60px;
  75.   line-height: 19px;
  76. }
  78. .content .price {
  79.   color: #AF2F22;
  80. }
  82. .content .price span {
  83.   margin-left: 5px;
  84.   font-size: 22px;
  85. }
  87. /* 产品底部绿色区域 */
  88. .content li .cover {
  89.   position: absolute;
  90.   left: 0;
  91.   /* bottom: 0; */
  92.   bottom: -86px;
  93.   padding-top: 15px;
  94.   width: 242px;
  95.   height: 84px;
  96.   background-color: #00BE9A;
  97.   text-align: center;
  98.   color: #fff;
  99.   transition: all 0.5s;
  100. }
  102. .content .cover p:nth-child(1) {
  103.   font-size: 18px;
  104. }
  106. .content .cover p:nth-child(2) {
  107.   margin: 3px auto 6px;
  108.   width: 120px;
  109.   height: 1px;
  110.   background-color: rgba(255, 255, 255, 0.11);
  111. }
  113. .content .cover p:nth-child(3) {
  114.   font-size: 13px;
  115. }
  117. .content .cover p:nth-child(3) .iconfont {
  118.   font-size: 14px;
  119. }
  121. /* 鼠标悬停到li，显示cover，改变位置 */
  122. .content .right li:hover .cover {
  123.   bottom: 0;
  124. }
  126. .content .right li:hover {
  127.   border: 2px solid #00BE9A;
  128. }
复制代码


最新专题区


ul > li * 3 
 渐变？？？颜色

  3. /* 最新专题 */
  4. .topic {
  5.   margin-bottom: 40px;
  6. }
  8. .topic .title {
  9.   margin-top: 100px;
  10. }
  12. .topic-bd ul {
  13.   display: flex;
  14.   justify-content: space-between;
  15. }
  17. .topic-bd li {
  18.   width: 405px;
  19.   height: 355px;
  20.   /* background-color: pink; */
  21. }
  23. .topic-bd .pic {
  24.   position: relative;
  25.   width: 405px;
  26.   height: 288px;
  27. }
  29. .topic-bd .txt {
  30.   display: flex;
  31.   justify-content: space-between;
  32.   align-items: center;
  33.   padding: 0 15px;
  34.   width: 405px;
  35.   height: 67px;
  36.   /* background-color: skyblue; */
  37.   font-size: 14px;
  38.   color: #666;
  39. }
  41. .topic-bd .txt .left {
  42.   display: flex;
  43. }
  45. .topic-bd .txt .left p {
  46.   margin-right: 20px;
  47. }
  49. .topic-bd .txt .left p:nth-child(1) i {
  50.   color: #AA2113;
  51. }
  53. /* 定位区域 - 文字 */
  54. .topic-bd .cover {
  55.   position: absolute;
  56.   left: 0;
  57.   bottom: 0;
  59.   display: flex;
  60.   justify-content: space-between;
  61.   align-items: center;
  63.   padding: 0 15px;
  64.   width: 405px;
  65.   height: 90px;
  66.   background-image: linear-gradient(180deg, rgba(137, 137, 137, 0.00) 0%, rgba(0, 0, 0, 0.90) 100%);
  67. }
  69. .topic-bd .cover .left {
  70.   color: #fff;
  71. }
  73. .topic-bd .cover .left h4 {
  74.   margin-bottom: 6px;
  75.   font-size: 20px;
  76. }
  78. .topic-bd .cover .right {
  79.   padding: 0 7px;
  80.   height: 25px;
  81.   background-color: #fff;
  82.   color: #AA2113;
  83.   font-size: 15px;
  84. }
  86. .topic-bd .cover .right span {
  87.   font-size: 18px;
  88. }
复制代码

base.css(清除默认样式)

  1. /* 去除常见标签默认的 margin 和 padding */
  2. * {
  3.   margin: 0;
  4.   padding: 0;
  5.   box-sizing: border-box;
  6. }
  8. /* 设置网页统一的字体大小、行高、字体系列相关属性 */
  9. body {
  10.   font: 16px/1.5  "Microsoft Yahei",
  11.     "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
  12.   color: #333;
  13. }
  15. /* 去除列表默认样式 */
  16. ul,
  17. ol {
  18.   list-style: none;
  19. }
  21. /* 去除默认的倾斜效果 */
  22. em,
  23. i {
  24.   font-style: normal;
  25. }
  27. /* 去除a标签默认下划线，并设置默认文字颜色 */
  28. a {
  29.   text-decoration: none;
  30.   color: #333;
  31. }
  33. /* 设置img的垂直对齐方式为居中对齐，去除img默认下间隙 */
  34. img {
  35.   width: 100%;
  36.   height: 100%;
  37.   vertical-align: middle;
  38. }
  40. /* 去除input默认样式 */
  41. input {
  42.   border: none;
  43.   outline: none;
  44.   color: #333;
  45. }
  47. h1,
  48. h2,
  49. h3,
  50. h4,
  51. h5,
  52. h6 {
  53.   font-weight: 400;
  54. }
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

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

本版积分规则

嚴華

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

楼主热帖

标签云

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