h5电商模板_网站模板

h5电商模板_网站模板[HTML+CSS]电商网站模板b站白嫖的网课,黑马的小兔鲜儿案例,教程链接点这里就行成品文件目录结构CSSbase.css:基本样式,内外边距,字体之类的common.css:网页的公共样式,一般是header部分和footer部分index.css:首页样式imageslogo.png:网站logosprites.png:拿来存精灵图的、uploads以图片为主,主要存放需要经常更新的资源例如商品图片,活动图片等favicon.ico网站图标index.

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

[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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/187123.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 服务器出现kernel: TCP: time wait bucket table overflow解决

    服务器出现kernel: TCP: time wait bucket table overflow解决http://blog.sina.com.cn/s/blog_69cdee7f0100yowt.html#一台Nginx+php-fcgi的服务器做了负载均衡,在主控端发现一直在报错:viewsourceprint?01#—————————-引用文字-开始———————-

  • ES6基础之——继承extends

    ES6基础之——继承extends一个类可以去继承其他类里面的东西,这里定义一个叫Person的类,然后在constructor里面添加两个参数:name和birthday;下面再添加一个自定义的方法intro,这个方法就是简单地返

  • openwrt旁路由设置的正确方式

    openwrt旁路由设置的正确方式最近在玩旁路由,踩了一些坑,也学习了点相关知识,特整理记录下。一、旁路由的配置上图是旁路由的连接方式,一般作为旁路由的只有一个LAN口,让他们ip在一个网段即可比如主路由网关192.168.0.1,旁路由配置成192.168.0.21.主路由配置:手动指定LAN为192.168.0.1。#DHCP配置中把网关和DNS改成旁路由ip地址,如192.168.0.2。2.旁路由配置:关闭DHCP,把网关改成主路由地址,如192.168.0.1,关闭桥接模式.采用路由模式。这样配置后,网络流量如下图

  • RIder2021激活码(JetBrains全家桶)「建议收藏」

    (RIder2021激活码)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.htmlS32PGH0SQB-eyJsa…

  • Odin Inspector 系列教程 — Hide If Attribute[通俗易懂]

    Odin Inspector 系列教程 — Hide If Attribute[通俗易懂]HideIfAttribute用于任何属性,并且可以在检查器中隐藏该属性。使用此选项可根据对象的当前状态隐藏不相关的属性。传一个属性的名称,此属性的值如果为true或者部位null,则隐藏此属性[HideIf(“IsToggled”)]publicVector3HiddenWhenToggled;[HideIf(“Som…

  • MAC下最好用的抓包工具–charles简单操作教程

    MAC下最好用的抓包工具–charles简单操作教程一、Charles介绍给大家推荐一款在mac上我觉得很好用的抓包工具,再过去的半年中给我很大帮助,在工作学习中使用很方便。那么什情况下我们会需要使用抓包工具呢,比如我想查看一个接口请求的参数、返回值,还有移动设备上的http请求、https请求,有了charles一下搞定,妈妈再也不用担心我的学习了,咳咳……,回归正题,介绍一下charles。Charles是一个HTTP代理服务器…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号