[HTML+CSS]电商网站模板
[HTML+CSS]电商网站模板
b站白嫖的网课，黑马的小兔鲜儿案例，教程链接点这里就行
成品
![[HTML+CSS]电商网站模板_第1张图片](http://img.e-com-net.com/image/info8/f2d9427faccd4c13ab02c3f66fa7e1bd.jpg)
文件目录结构
![[HTML+CSS]电商网站模板_第2张图片](http://img.e-com-net.com/image/info8/02bcf12d031e4443a88d2defe59d4a5e.jpg)
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版本，直接跟着视频数据做了。
版心
![[HTML+CSS]电商网站模板_第3张图片](http://img.e-com-net.com/image/info8/5b384a7eef5f49b99e451e6ba1c88021.jpg)
为了让不同大小屏幕都可以看到网站主体内容，我们把主题内容约束在一个叫版心的区域内
考虑到整个页面都会用到版心，复用性很高，所以我们直接定义一个类 container.css 来描述版心
头部模块
从上到下观察，分为两个模块：快捷菜单和主导航模块。
快捷菜单模块
- 背景色块为通栏，设置高度和颜色即可
- 快捷菜单整体在版心右侧，向右浮动实现
- 菜单其实就是一个导航列表，使用li标签包裹a标签，然后CSS装饰即可
- 手机版的图标可以使用伪类元素标签把图标从精灵图中插入到网页中
主导航模块
- 背景色块为通栏，设置高度和颜色即可
- 分为三块：logo 图标，导航栏 ， 搜索栏，直接左浮动
- logo图标：设置好和版心左边，上下的边距
- 导航栏：设置好和logo的间距，每一项之间的间距即可，文字和logo中部对齐。处理的时候把a标签设置成块，不然没法调大小。注意鼠标经过后样式变化。
- 搜索栏：搜索栏前面的搜索图标用伪类元素整上去，购物车上数字图标使用定位+实现
网站入口模块
![[HTML+CSS]电商网站模板_第4张图片](http://img.e-com-net.com/image/info8/299b13942c984ee0ab7ec42a2d371ac8.jpg)
轮播图
目前还写不了轮播功能，不过要预先设置好框架
li 标签包含 a 标签，a标签包含 img标签
侧边栏
- 黑色透明背景
- li标签实现列表
- 首个词语字体样式和后面的有区别，使用span把后面的包起来设置样式
- 侧边栏后面的箭头图标使用伪类元素实现，并且使用“子绝父相”的方式来定位
左右按钮
- css画圆: border-radius: 50%;
- 箭头用伪类元素弄上去
轮播图指示器
- 整体一个div盒子，内部使用li标签包含a标签，a标签包含img标签实现
- 使用active类标记选中，方便设置选中状态的样式
新鲜好物模块
![[HTML+CSS]电商网站模板_第5张图片](http://img.e-com-net.com/image/info8/d3c42fec21624a2c8149b0db8e07f9a7.jpg)
好物模块头部
- 左右两个盒子，一个左浮动，一个右浮动进行布局
- 左边盒子使用h2标签+span标签实现不同字体样式
好物模块商品列表
- 分成四个盒子，左浮动布局
- 每个盒子分为 img 标签，h3 标签，p 标签分别独占一行
底部模块
![[HTML+CSS]电商网站模板_第6张图片](http://img.e-com-net.com/image/info8/901b952d893f41f89cdba4fe9cef2caf.jpg)
宣传服务模块
- 版心内三个盒子（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">
<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>
<div class="search fl">
<input type="search" placeholder="搜一艘">
div>
<div class="cart fl">
<span>2span>
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 class="fl">
新鲜好物 <span>新鲜出炉 品质靠谱span>
h2>
<a href="#" class="fr">查看全部a>
div>
<div class="goods-list">
<ul>
<li>
<img src="./uploads/new_goods_1.jpg" alt="">
<h3>睿米无限吸尘器F8h3>
<p><span>￥span> 899p>
li>
<li>
<img src="./uploads/new_goods_2.jpg" alt="">
<h3>智能环绕3的空调h3>
<p><span>￥span> 1299p>
li>
<li>
<img src="./uploads/new_goods_3.jpg" alt="">
<h3>广东软软糯米煲仔饭h3>
<p><span>￥span> 129p>
li>
<li>
<img src="./uploads/new_goods_4.jpg" alt="">
<h3>罗西机械智能手表h3>
<p><span>￥span> 3399p>
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>
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;
}
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;
}
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;
}