ToB企服应用市场:ToB评测及商务社交产业平台

标题: CSS3练习--电商web [打印本页]

---

作者: 嚴華    时间: 2024-10-14 17:36
标题: CSS3练习--电商web
免责声明：本文仅做分享！
   
目录
 小练--小兔鲜儿
目录构建
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企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4