[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;
}

[HTML+CSS]电商网站模板相关推荐

【仿淘宝首页】前端网页模板，大学生前端作业分享，html5+css电商网站模板，包含js动效
直接上代码 <!doctype html> <html lang="en"><head><meta charset="UTF-8 ...
电商网站模板_微购物商城网站建设：要做好这6点！
随着互联网电商的发展,微购物商城也开始流行起来.这种商城网站可以避免商家被电商平台抽佣,商家自己也无需缴纳高额推广费,可以节约不少成本.如何做好一个购物商城网站?至少要保证这几点: 1.用美观的建站系 ...
电商网站模板_阿里云建站:模板建站与定制建站怎么选(小白参考）
企业建站不仅是企业形象的重要组成部分,更是将自身展示给客户乃至全球的窗口,因此越来越多的企业会选择建立自己的网站,因此,现在阿里云的建站产品也越来越火了,阿里云建站产品主要分为模板建站和定制建站,模板 ...
HTML5响应式手机模板：电商网站设计——仿淘宝手机app界面模板源码 HTML+CSS+JavaScript...
HTML5响应式手机模板:电商网站设计--仿淘宝手机app界面模板源码 HTML+CSS+JavaScript 手机电商模板手机网站模板企业手机网站模板手机网站模板手机模板响应式手机网站 h ...
HTML5响应式手机模板：电商网站设计——歪秀商城手机端开发静态页面HTML+CSS+JavaScript 手机模板wap 手机网站模板企业手机网站模板...
HTML5响应式手机模板:电商网站设计--歪秀商城手机端开发静态页面HTML+CSS+JavaScript 手机模板wap 手机网站模板企业手机网站模板手机网站模板手机模板响应式手机网站 ht ...
HTML5期末大作业：花店/鲜花/购物网站设计——网上花店礼品电商购物商城 HTML+CSS+JavaScript 粉色的鲜花礼品电商网站html模板
HTML5期末大作业:花店/鲜花/购物网站设计--粉色的鲜花礼品电商网站html模板 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计 ...
HTML5响应式手机模板：电商网站设计——歪秀商城手机端开发静态页面HTML+CSS+JavaScript 手机模板wap 手机网站模板企业手机网站模板
HTML5响应式手机模板:电商网站设计--歪秀商城手机端开发静态页面HTML+CSS+JavaScript 手机模板wap 手机网站模板企业手机网站模板手机网站模板手机模板响应式手机网站 ht ...
HTML5响应式手机模板：电商网站设计——仿淘宝手机app界面模板源码 HTML+CSS+JavaScript
HTML5响应式手机模板:电商网站设计--仿淘宝手机app界面模板源码 HTML+CSS+JavaScript 手机电商模板手机网站模板企业手机网站模板手机网站模板手机模板响应式手机网站 h ...
HTML5期末大作业：电商网站设计——仿淘宝电商网站管理系统21页(含毕业设计论文7500字) HTML+CSS+JavaScript
HTML5期末大作业:电商网站设计--仿淘宝电商网站管理系统21页(含毕业设计论文7500字) HTML+CSS+JavaScript 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. ...
html期末作业代码网页设计——化妆品电商网站(4页) HTML+CSS+JavaScript 使用html+css实现一个静态页面（含源码）
HTML5期末大作业:化妆品电商网站设计--化妆品电商网站(4页) HTML+CSS+JavaScript 使用html+css实现一个静态页面(含源码) 常见网页设计作业题材有个人. 美食. 公司 ...

[HTML+CSS]电商网站模板

[HTML+CSS]电商网站模板

成品

文件目录结构

CSS

images

uploads

favicon.ico

index.html

SEO 三大标签

页面分析

版心

头部模块

快捷菜单模块

主导航模块

网站入口模块

轮播图

侧边栏

左右按钮

轮播图指示器

新鲜好物模块

好物模块头部

好物模块商品列表

底部模块

宣传服务模块

版权信息模块

代码

HTML

CSS

base.css

common.css

index.css

[HTML+CSS]电商网站模板相关推荐

最新文章

热门文章