运维做开发

这个屌丝很懒，什么也没留下！

热门标签

[HTML+CSS]电商网站模板_小兔鲜儿官网

作者：运维做开发 | 2024-08-18 07:37:03

踩

小兔鲜儿官网

[HTML+CSS]电商网站模板

b站白嫖的网课，黑马的小兔鲜儿案例，教程链接点这里就行

成品

在这里插入图片描述

文件目录结构

在这里插入图片描述

CSS

base.css：基本样式，内外边距，字体之类的
common.css：网页的公共样式，一般是 header 部分和 footer 部分
index.css：首页样式

images

logo.png:网站logo
sprites.png:拿来存精灵图的、

uploads

以图片为主，主要存放需要经常更新的资源例如商品图片，活动图片等

favicon.ico

网站图标

index.html

首页的html

SEO 三大标签

搜索引擎优化，又称为 SEO ，即 Search Engine Optimization
两种优化方式：氪金，优化网页相关信息
SEO 三大标签

title：网页标题标签
description：网页描述标签
keywords：网页关键词标签

页面分析

切页面啦，别人给你一个psd图片你要能转换成网页。视频里使用工具 PxCook ,由于平常用 archlinux 所以暂时没有找到它的linux版本，直接跟着视频数据做了。

版心

在这里插入图片描述为了让不同大小屏幕都可以看到网站主体内容，我们把主题内容约束在一个叫版心的区域内
考虑到整个页面都会用到版心，复用性很高，所以我们直接定义一个类 container.css 来描述版心

头部模块

在这里插入图片描述从上到下观察，分为两个模块：快捷菜单和主导航模块。

快捷菜单模块

背景色块为通栏，设置高度和颜色即可
快捷菜单整体在版心右侧，向右浮动实现
菜单其实就是一个导航列表，使用li标签包裹a标签，然后CSS装饰即可
手机版的图标可以使用伪类元素标签把图标从精灵图中插入到网页中

主导航模块

背景色块为通栏，设置高度和颜色即可
分为三块：logo 图标，导航栏，搜索栏，直接左浮动
logo图标：设置好和版心左边，上下的边距
导航栏：设置好和logo的间距，每一项之间的间距即可，文字和logo中部对齐。处理的时候把a标签设置成块，不然没法调大小。注意鼠标经过后样式变化。
搜索栏：搜索栏前面的搜索图标用伪类元素整上去，购物车上数字图标使用定位+实现

网站入口模块

在这里插入图片描述

轮播图

目前还写不了轮播功能，不过要预先设置好框架
li 标签包含 a 标签，a标签包含 img标签

侧边栏

黑色透明背景
li标签实现列表
首个词语字体样式和后面的有区别，使用span把后面的包起来设置样式
侧边栏后面的箭头图标使用伪类元素实现，并且使用“子绝父相”的方式来定位

左右按钮

css画圆: border-radius: 50%;
箭头用伪类元素弄上去

轮播图指示器

整体一个div盒子，内部使用li标签包含a标签，a标签包含img标签实现
使用active类标记选中，方便设置选中状态的样式

新鲜好物模块

在这里插入图片描述

好物模块头部

左右两个盒子，一个左浮动，一个右浮动进行布局
左边盒子使用h2标签+span标签实现不同字体样式

好物模块商品列表

分成四个盒子，左浮动布局
每个盒子分为 img 标签，h3 标签，p 标签分别独占一行

底部模块

在这里插入图片描述

宣传服务模块

版心内三个盒子（a标签浮动）三等分
图标采用伪类元素+精灵图弄上去

版权信息模块

两个p标签，每个占一行设置字体样式即可
第一行p标签包含a标签

代码

HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小兔鲜儿-新鲜、惠民、快捷！</title>
  <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
  <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  <!-- 头部模块-->
  <header>
    <!-- 快捷菜单模块-->
    <div class="xtx-shortcut">
      <div class="container"> 
        <ul class="fr">
          <li><a href="">请先登录</a>|</li>
          <li><a href="">免费注册</a>|</li>
          <li><a href="">我的订单</a>|</li>
          <li><a href="">会员中心</a>|</li>
          <li><a href="">帮助中心</a>|</li>
          <li><a href="">在线客服</a>|</li>
          <li><a href="">手机版</a></li>
        </ul>
      </div>
    </div>

    <!-- #主导航模块-->
    <div class="xtx-main-nav container">
        <!-- #logo -->
        <h1 class="logo fl">
          <a href="#">小兔鲜儿</a>
        </h1>
        <nav class="fl">
          <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">生鲜</a></li>
            <li><a href="#">美食</a></li>
            <li><a href="#">餐厨</a></li>
            <li><a href="#">电器</a></li>
            <li><a href="#">居家</a></li>
            <li><a href="#">洗护</a></li>
            <li><a href="#">孕婴</a></li>
            <li><a href="#">服装</a></li>
          </ul>
        </nav>
        <!-- #search -->
        <div class="search fl">
          <input type="search" placeholder="搜一艘">
        </div>
        <!-- #cart-->
        <div class="cart fl">
          <span>2</span>
        </div>
  </header>
  <!-- #网站入口模块-->
  <div class="xtx-entry">
    <div class="container">
      <!-- #轮播图 -->
      <ul class="banner">
        <li>
          <a href="">
            <img src="./uploads/banner_1.png" alt="">
          </a>
        </li>
      </ul>
      <!-- #侧边栏 -->
      <aside class="category">
        <ul>
          <li><a href="#">生鲜 <span>水果 蔬菜</span></a></li>
          <li><a href="#">美食 <span>面点 水果</span></a></li>
          <li><a href="#">餐厨 <span>数码产品</span></a></li>
          <li><a href="#">电器 <span>床品 四件套 被枕</span></a></li>
          <li><a href="#">居家 <span>奶粉 玩具 辅食</span></a></li>
          <li><a href="#">洗护 <span>洗发 洗护 美妆</span></a></li>
          <li><a href="#">孕婴 <span>奶粉 玩具</span></a></li>
          <li><a href="#">服饰 <span>女装 男装</span></a></li>
          <li><a href="#">杂货 <span>户外 图书</span></a></li>
          <li><a href="#">品牌 <span>品牌制造</span></a></li>
        </ul>
      </aside>
      <!-- #左右按钮 -->
      <a href="#" class="prev"></a>
      <a href="#" class="next"></a>
      <!-- #轮播图指示器 -->
      <ol class="indicator">
        <li></li>
        <li></li>
        <li class="active"></li>
        <li></li>
        <li></li>
      </ol>
    </div>
  </div>
  <!-- #新鲜好物模块 -->
  <div class="xtx-new-goods container">
    <!-- #好物模块头部 -->
    <div class="goods-hd">
      <!-- #左边h2 -->
      <h2 class="fl">
        新鲜好物 <span>新鲜出炉 品质靠谱</span>
      </h2>
      <!-- #右边的a -->
      <a href="#" class="fr">查看全部</a>
    </div>
    <!-- #好物模块列表 -->
    <div class="goods-list">
      <ul>
        <li>
          <img src="./uploads/new_goods_1.jpg" alt="">
          <h3>睿米无限吸尘器F8</h3>
          <p><span>￥</span> 899</p>
        </li>
        <li>
          <img src="./uploads/new_goods_2.jpg" alt="">
          <h3>智能环绕3的空调</h3>
          <p><span>￥</span> 1299</p>
        </li>
        <li>
          <img src="./uploads/new_goods_3.jpg" alt="">
          <h3>广东软软糯米煲仔饭</h3>
          <p><span>￥</span> 129</p>
        </li>
        <li>
          <img src="./uploads/new_goods_4.jpg" alt="">
          <h3>罗西机械智能手表</h3>
          <p><span>￥</span> 3399</p>
        </li>
      </ul>
    </div>
  </div>
  <!-- #底部模块 -->
  <footer>
    <!-- #宣传服务 -->
    <div class="xtx-service">
      <div class="container">
        <a href="#">价格亲民</a>
        <a href="#">物流快捷</a>
        <a href="#">品质新鲜</a>
      </div>
    </div>
    <!-- #版权信息 -->
    <div class="xtx-copyright">
      <div class="container">
        <p>
          <a href="#">关于我们</a> |
          <a href="#">帮助中心</a> | 
          <a href="#">售后服务</a> |
          <a href="#">配送与验收</a> |
          <a href="#">商务合作</a> |
          <a href="#">搜索推荐</a> |
          <a href="#">友情链接</a>
        </p>
        <p>
          CopyRight @ 小兔鲜儿
        </p>
      </div>
    </div>
  </footer>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166

CSS

base.css

/* 去除常见标签默认的 margin 和 padding */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
input {
  margin: 0;
  padding: 0;
}

/* 设置网页统一的字体大小、行高、字体系列相关属性 */
body {
  font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei",
    "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
  color: #333;
}

/* 去除列表默认样式 */
ul,
ol {
  list-style: none;
}

/* 去除默认的倾斜效果 */
em,
i {
  font-style: normal;
}

/* 去除a标签默认下划线，并设置默认文字颜色 */
a {
  text-decoration: none;
  color: #333;
}

/* 设置img的垂直对齐方式为居中对齐，去除img默认下间隙 */
img {
  vertical-align: middle;
}

/* 去除input默认样式 */
input {
  border: none;
  outline: none;
  color: #333;
}

/* 左浮动 */
.fl {
  float: left;
}

/* 右浮动 */
.fr {
  float: right;
}

/* 双伪元素清除法 */
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}
.clearfix::after {
  clear: both;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

common.css

/* 版心的公共块 */
.container{
    width:1240px;
    margin: 0 auto;
}
/* 快捷菜单模块xtx-shortcut */
.xtx-shortcut{
    height:52px;
    background: #333333;
}
.xtx-shortcut .container{
    height:52px;
    /* background-color: skyblue; */
}
.xtx-shortcut ul li{
    float: left;
    line-height: 52px;
    color:#dcdcdc;
}
.xtx-shortcut a{
    margin: 0 16px;
    color:#dcdcdc;
    font-size:14px;
}
.xtx-shortcut li:last-child a{
    margin-right:0;
}
.xtx-shortcut li:last-child a::before{
    content:'';
    display: inline-block;
    width: 11px;
    height: 16px;
    margin-top: -3px;
    margin-right:8px;
    background: url('../images/sprites.png') -160px -70px;
    vertical-align: middle;
}

/* 主导航模块xtx-main-nav */
.xtx-main-nav{
    height:130px;
    padding-top: 30px;
    /* background-color: pink; */
    box-sizing: border-box;
}
.xtx-main-nav .logo{
    height:70px;
    width: 207px;
    margin-left: 25px;
    /* background-color:red; */
}
.xtx-main-nav .logo a{
    display: block;
    height:70px;
    background:url('../images/logo.png');
    background-size: 100% 100%;
    font-size: 0;
}
.xtx-main-nav nav{
    margin-left: 40px;
}
.xtx-main-nav nav li{
    float: left;
    height: 70px;
    margin-right: 48px;
    line-height: 70px;
}
.xtx-main-nav nav a:hover{
    color: #27ba9b;
    border-bottom: 1px solid #27ba9b;
    padding-bottom: 7px;
}
.xtx-main-nav .search{
    width: 172px;
    height: 30px;
    background-color: orange;
    margin-top: 24px;
    margin-left: 34px;
    position: relative;
}
.xtx-main-nav .search::before{
    content: '';
    position: absolute;
    top:5px;
    left: 2px;
    width: 18px;
    height: 18px;
    /* background-color: red; */
    background: url('../images/sprites.png') -80px -70px;
}
.xtx-main-nav .search input{
    width: 172px;
    height: 30px;
    border-bottom: 2px solid #e7e7e7;
    padding-left:31px;
    line-height: 0px;
}
.xtx-main-nav .cart{
    width: 23px;
    height: 23px;
    margin-top: 28px;
    margin-left: 15px;
    position: relative;
    background: url('../images/sprites.png') -120px -70px;
}
.xtx-main-nav .cart span{
    width: 20px;
    height: 15px;
    position: absolute;
    right: -12px;
    top: -5px;
    color:#fff;
    font-size: 13px;
    text-align: center;
    border-radius: 8px;
    background-color: #e26237;
}
/* 宣传服务模块 */
.xtx-service{
    height: 174px;
    background-color: #333;
}
.xtx-service .container{
    height: 173px;
    width: 1393px;
    border-bottom: 1px solid #434343;
    /* background-color: pink; */
}
.xtx-service .container a{
    float: left;
    width: 33.33%;
    height: 173px;
    /* background-color:skyblue; */
    text-align: center;
    line-height: 173px;
    font-size: 28px;
    color: #fff;
}
.xtx-service .container a::before{
    content: '';
    display: inline-block;
    width: 58px;
    height: 58px;
    margin-right: 19px;
    background: url('../images/sprites.png') 0 0;
    /* background-color: red; */
    vertical-align: middle;
}
.xtx-service a:nth-child(2)::before{
    background: url('../images/sprites.png') -130px 0;
}
.xtx-service a:nth-child(3)::before{
    background: url('../images/sprites.png') -65px 0;
}
/* 版权信息模块 */
.xtx-copyright{
    height: 168px;
    background-color: #333;
}
.xtx-copyright .container{
    height: 168px;
    /* background-color: pink; */
    text-align: center;
    font-size: 14px;
    padding-top: 41px;
    box-sizing: border-box;
}
.xtx-copyright .container a{
    color:#999;
}
.xtx-copyright .container p{
    color:#999;
}
.xtx-copyright .container p:first-child{
    height: 35px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177

index.css

/* 网站入口模块 */
.xtx-entry{
    height: 500px;
    background-color: #f5f5f5;
}
.xtx-entry .container{
    position: relative;
    height: 500px;
    background-color: pink;
}
.xtx-entry .container .category{
    position: absolute;
    left:0;
    top:0;
    width: 251px;
    height: 500px;
    background-color:rgba(0, 0, 0, 0.8);
}
.xtx-entry .container .category a{
    color: #fff;
}
.xtx-entry .category li{
    height: 50px;
    line-height: 50px;
    padding-left: 36px;
    position: relative;
}
.xtx-entry .category li:hover{
    background-color: #27ba9b;
}
.xtx-entry .category span{
    font-size: 14px;
}

.xtx-entry .category span:first-child{
    margin-left: 15px;
}
.xtx-entry .category a::after{
    position: absolute;
    content: '';
    width: 6px;
    height: 11px;
    background-color: pink;
    top: 19px;
    right: 19px;
    background: url('../images/sprites.png') -80px -110px;
}

.xtx-entry .prev{
    position: absolute;
    width: 45px;
    height: 45px;
    top: 228px;
    left: 260px;
    border-radius: 50%;
    background: url('../images/sprites.png') 13px -60px;
    background-color: rgba(0,0,0,0.2);
}

.xtx-entry .next{
    position: absolute;
    width: 45px;
    height: 45px;
    top: 228px;
    right: 10px;
    border-radius: 50%;
    background: url('../images/sprites.png') -22px -60px;
    background-color: rgba(0,0,0,0.2);
}
.xtx-entry .indicator{
    position:absolute;
    width: 110px;
    height: 10px;
    /* background-color: pink; */
    left: 680px;
    bottom: 31px;
}
.xtx-entry .indicator li{
    float: left;
    width: 10px;
    height: 10px;
    margin-right: 15px;
    background-color: rgba(255,255,255,0.43);
    border-radius: 50%;
}
.xtx-entry .indicator li.active{
    background-color: #fff;
}
.xtx-entry .indicator li:last-child{
    margin-right: 0;
}

/* 新鲜好物模块 */
.xtx-new-goods .goods-hd{
    height: 115px;
    /* background-color: skyblue; */
    line-height: 115px;
}
.xtx-new-goods .goods-hd h2{
    height: 115px;
    font-size:29px;
    font-weight: 400;
}
.xtx-new-goods .goods-hd h2 span{
    font-size:19px;
    color: #999;
}

.xtx-new-goods .goods-hd a{
    color: #666;
}
.xtx-new-goods .goods-hd a::after{
    display: inline-block;
    content: '';
    width: 7px;
    height: 13px;
    /* background-color: red; */
    background:url('../images/sprites.png')0 -110px;
    vertical-align: middle;
    margin-left: 13px;
}
.xtx-new-goods .goods-list{
    height: 405px;
    /* background-color: pink; */
}

.xtx-new-goods .goods-list li{
    float: left;
    width: 304px;
    height: 405px;
    background-color:#f0f9f4;
    margin-right: 8px;
    text-align: center;
    line-height: 1;
}
.xtx-new-goods .goods-list li:last-child{
    margin-right: 0;
}
.xtx-new-goods .goods-list img{
    width: 100%;
}
.xtx-new-goods .goods-list li h3{
    height: 30px;
    margin-top: 22px;
    font-size: 20px;
    font-weight: 400;
}
.xtx-new-goods .goods-list li p{
    color: #9a2e1f;
    font-size: 23px;
}
.xtx-new-goods .goods-list li span{
    font-size: 17px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】