[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>
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;
}
293
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
