[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













小兔鲜儿-新鲜、惠民、快捷！

















































生鲜 水果 蔬菜


美食 面点 水果


餐厨 数码产品


电器 床品 四件套 被枕


居家 奶粉 玩具 辅食


洗护 洗发 洗护 美妆


孕婴 奶粉 玩具


服饰 女装 男装


杂货 户外 图书


品牌 品牌制造











































新鲜好物 新鲜出炉 品质靠谱




查看全部













睿米无限吸尘器F8


￥ 899








智能环绕3的空调


￥ 1299








广东软软糯米煲仔饭


￥ 129








罗西机械智能手表


￥ 3399

[HTML+CSS]电商网站模板