[HTML+CSS]电商网站模板

Posted 2021-09-08 鱼竿钓鱼干

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[HTML+CSS]电商网站模板相关的知识，希望对你有一定的参考价值。

[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>以上是关于[HTML+CSS]电商网站模板的主要内容，如果未能解决你的问题，请参考以下文章 
 各类电商购物网站商城系统静态网页html制作（含静态网站源码）
 html5期末大作业：基于html+css+javascript+jquery+bootstarp响应式图书电商HTML模板网上书店(25页)
 电商网站滑动门特效
 HTML+CSS项目：仿京东电商网站（免费）
 html静态网站基于品优购电商购物网站网页设计与实现共计3个页面 html+css+javascript网页设计实例 企业网站制作...
 HTML5+CSS期末大作业：个人主页介绍主题——-我们的挚爱 (7页) 学生DW网页设计作业成品 大学生个人网站作业模板 简单个人网页制作