首页 > 分享 > [HTML+CSS]电商网站模板

[HTML+CSS]电商网站模板

花匠小妙招
2024-12-03 07:04

[HTML+CSS]电商网站模板

b站白嫖的网课，黑马的小兔鲜儿案例，教程链接点这里就行

成品

在这里插入图片描述

文件目录结构

在这里插入图片描述

CSS base.css：基本样式，内外边距，字体之类的common.css：网页的公共样式，一般是 header 部分和 footer 部分index.css：首页样式 images logo.png:网站logosprites.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">  <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>  <div class="search fl"> <input type="search" placeholder="搜一艘"> </div>  <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 class="fl"> 新鲜好物 <span>新鲜出炉品质靠谱</span> </h2>  <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>

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

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

/* 网站入口模块 */ .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; }