本文介绍了如何使用HTML和CSS创建静态电商页面，包括设计目标、CSS制作、图标规范和SEO优化。通过设置标题、描述、关键词，以及使用字体图标和合理的CSS结构，实现跨浏览器兼容性和移动端适配。提供了代码资源链接和注意事项。
使用html+css实现-静态开源案例-品优购
此静态页面在2k分辨率下显示最佳
1080p 正常显示但是元素可能相对大
2k以上无法正常显示 2k以下均可兼容
本文代码与原版的psd文件
链接：https://pan.baidu.com/s/12E5d3XJJ3IaNw6kJ5d3FCA
提取码：ptcg
设计目标
保证ie7以及以上，火狐，360，safari，chrome等 可以正常显示
熟悉CSS+DIV布局，页面搭建
了解常用电商网站布局模式
为了做移动端铺垫
css制作
css制作需要有base.css 进行必要的页面初始化
公共样式 放入common.css 公共样式 例如头部导航相同 尾部的网站信息相同这些 每个页面都有的东西
图标规范
浏览器网页图标添加
在根目录或其他位置存放 favicon(前缀名称可以修改).ico 图标类型文件
通过link rel=“shortcut icon” type=“image/x-icon” href=“文件位置” 来调用这个图标
这个图标可以让美工提供 也可以自己从psd上切一个然后找个第三方网站导出一个ico文件
seo优化
网站优化三大标签
seo search engine optimization 搜索引擎优化
重要的三大标签
网页标题 title
标题长度
谷歌70kb 35个中文字符
百度56kb 28个中文字符
关键字分布 最先出现的词语权重越高
关键词词频 主关键词出现3次 辅关键词出现一次
建议：网站名(产品名)-网站的简介
例如：
小米商城 - 小米10 Pro、Redmi 10X、小米MIX Alpha，小米电视官方网站
京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！
淘宝网 - 淘！我喜欢
微博-随时随地发现新鲜事
description 网站说明 显示在搜索引擎后方的解释
注意问题：
描述中出现关键词与正文内容相关，吸引用户，让用户知道你是干啥的
简短原则，字符不要超过240个字符 也就是120个汉字
补充在title和keywords中未能充分表述的语句
用英文字符, 关键词1,关键词2
使用标签<meta name="description" content="具体的内容">
Keywords关键词
主要突出你是干啥的 比如京东卖3c主要突出3c产品 做软件开发的说项目或者技术
卖电脑的推硬件
控制在6-8个关键词左右
使用<meta name="Keywords" content="具体的内容">
字体图标
典型的是 例如京东里的选择位置前头的那个红色图标 那实际是个字体图标
还有小米里的购物车图标 那也是一个字体图标
图片的缺点:增加项目文件大小,增大了http请求,降低性能,图片不能很好缩放,不同分辨率会出现失真情况,移动端响应 希望图标可以缩放
所以需要字体图标来解决这个问题
字体图标 本质上是文字 文字效果都可以上上 跟图片没啥区别
重点是占用空间小了,信息没丢失,支持所有浏览器,移动端响应必备
正常流程:
1.制作svg字体图标效果图
2.上传生成字体文件包
3.下载本地
4.字体文件引入html
引入方法
1.先把字体文件 .eot .svg .ttf .woff 放到fonts中
2.在标签中调用字体包里的字体 通常情况下 在下载的包里有相应的那个字体啥样 一般可见的都是 这样的字符 因为你没安装
<span></span>
3.在样式里声明字体一般的内容在字体包中携带
例如
/* 字体声明 一般从网上下载的字体包文件自带这个东西*/
@font-face {
/* 字体名,想叫啥叫啥但是下头调用的时候得写正确 */
font-family: 'icomoon';
/* 路径问题需要注意这里边的内容一般都不会一样 都在下载的字体包中的css文件存在 */
src: url('../fonts/icomoon.eot?xn4h7e');
src: url('../fonts/icomoon.eot?xn4h7e#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?xn4h7e') format('truetype'),
url('../fonts/icomoon.woff?xn4h7e') format('woff'),
url('../fonts/icomoon.svg?xn4h7e#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
若要追加字体图标 则需要原本文件中的.json文件 在对应下载网站上导入
然后重新下载整个文件 把字体文件中的内容导入到项目里
注意搭建整个页面时的路径问题
因css单独存放在了一个文件夹中
所以每个需要调用的文件的路径需要跳转至html所在目录来看 先要…/跳转至上一级也就是html文件目录后
再去找文件名 注意这个问题
html代码
首页(index.html)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!-- 网站title -->
<title>品优购(PYJ.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
<!-- 网站描述 -->
<meta name="description" content="品优购PYJ.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!">
<!-- 网站关键词 -->
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购">
<!-- 网站图标 -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<!-- 初始化css -->
<link rel="stylesheet" type="text/css" href="css/base.css">
<!-- 公共css文件 -->
<link rel="stylesheet" type="text/css" href="css/common.css">
<!-- 首页css文件 -->
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<!-- 快捷导航栏开始 -->
<div class="shortcut">
<!-- 版心容器 -->
<div class="w">
<!-- 左浮动容器 登陆链接 -->
<ul class="login fl">
<li>品优购欢迎您！</li>
<li>
<a href="#">请登录</a>
<a href="register.html" class="font_color_red">免费注册</a>
</li>
</ul>
<!-- 右浮动容器 导航菜单-->
<ul class="shortcut_nav fr">
<li><a href="#">我的订单</a></li>
<li class="style_y"></li>
<li>
<a href="#">我的品优购</a>
<i class="font_icon_down"></i>
</li>
<li class="style_y"></li>
<li><a href="#">品优购会员</a></li>
<li class="style_y"></li>
<li><a href="#">企业采购</a></li>
<li class="style_y"></li>
<li>
<a href="#">关注品优购</a>
<i class="font_icon_down"></i>
</li>
<li class="style_y"></li>
<li>
<a href="#">客户服务</a>
<i class="font_icon_down"></i>
</li>
<li class="style_y"></li>
<li>
<a href="#">网站导航</a>
<i class="font_icon_down"></i>
</li>
<li class="style_y"></li>
<li>
<a href="#" class="jdphone">手机京东
<div class="jd_ewm">
<div class="sjd_ewm"></div>
<img src="img/下载.png">
</div>
</a>
</li>
</ul>
</div>
</div>
<!-- 快捷导航栏结束 -->
<!-- 头部制作开始 -->
<div class="header w">
<!-- 企业logo 需要一定的优化 要放入h1标签为了提权
h1里放一个链接 可以返回首页 链接需要大小 并且把logo作为背景放进链接中
链接里需要文字 网站名 为了让搜索引擎收录 但文字不需要显示
使用text-indent移动到盒子外 然后用overflow:hidden(淘宝)
或者直接给font-size:0 (京东)
最后直接给链接一个title 给用户提示信息
-->
<div class="logo">
<h1>
<a href="index.html" title="品优购">品优购</a>
</h1>
</div>
<!-- 搜索框 -->
<div class="search">
<input type="text" value="语言开发">
<button>搜索</button>
</div>
<!-- 热搜词 -->
<ul class="hotwords">
<li><a href="#" class="font_color_red">家居神券日</a></li>
<li><a href="#">手机</a></li>
<li><a href="#">户外仪表</a></li>
<li><a href="#">领券减60</a></li>
<li><a href="#">88购物节</a></li>
<li><a href="#">电脑免息</a></li>
<li><a href="#">薇诺娜</a></li>
<li><a href="#">车主福利</a></li>
<li><a href="#">KPL</a></li>
</ul>
<!-- 购物车 -->
<div class="shopcar">
<div class="icon_count">
<!-- count购物车计数器 注意不要给定宽度 因为你不知道这个人购物车放了多少东西-->
<i class="count">80</i>
<i class="font_icon_shopcar"></i>
<a href="#">我的购物车</a>
<i class="font_icon_right"></i>
</div>
</div>
</div>
<!-- 头部制作结束 -->
<!-- 导航栏开始 -->
<div class="nav">
<div class="w">
<!-- 下拉菜单 -->
<div class="dropdown fl">
<div class="dt">
<a href="#">全部商品分类</a>
</div>
<div class="dd">
<li class="item_fore1">
<a href="#">家用电器</a>
<i class="font_icon_right"></i>
</li>
<li class="item_fore2">
<a href="list.html">手机</a> /
<a href="#">数码</a> /
<a href="#">通信</a>
<i class="font_icon_right"></i>
</li>
<li class="item_fore3">
<a href="#">电脑</a> /
<a href="#">办公</a>
<i class="font_icon_right"></i>
</li>
<li class="item_fore4">
<a href="#">家居</a> /
<a href="#">家具</a> /
<a href="#">家装</a> /
<a href="#">厨具</a>
<i class="font_icon_right"></i>
</li>
<li class="item_fore5">
<a href="#">男装</a> /
<a href="#">女装</a> /
<a href="#">童装</a> /
<a href="#">内衣</a>
<i class="font_icon_right"></i>
</li>
<li class="item_fore6">
<a href="#">美妆</a> /
<a href="#">个人清洁</a> /
<a href="#">宠物用品</a>
<i class="font_icon_right"></i>
</li>
<li class="item_fore7">
<a href="#">鞋靴</a> /
<a href="#">箱包</a> /
<a href="#">珠宝</a> /
<a href="#">奢侈品</a>
<i class="font_icon_right"></i>
</li>
<li class="item_fore8">
<a href="#">运动户外</a> /
<a href="#">钟表</a>
<i class="font_icon_right"></i>
</li>
<li class="item_fore9">
<a href="#">汽车</a> /
<a href="#">汽车用品</a>
<i class="font_icon_right"></i>
</li>
<li class="item_fore10">
<a href="#">母婴</a> /
<a href="#">玩具乐器</a>
<i class="font_icon_right"></i>
</li>
<li class="item_fore11">
<a href="#">食品</a> /
<a href="#">酒类</a> /
<a href="#">生鲜</a> /
<a href="#">特产</a>
<i class="font_icon_right"></i>
</li>
<li class="item_fore12">
<a href="#">医药保健</a>
<i class="font_icon_right"></i>
</li>
<li class="item_fore13">
<a href="#">图书</a> /
<a href="#">音像</a> /
<a href="#">电子书</a>
<i class="font_icon_right"></i>
</li>
<li class="item_fore14">
<a href="#">彩票</a> /
<a href="#">旅行</a> /
<a href="#">充值</a> /
<a href="#">票务</a>
<i class="font_icon_right"></i>
</li>
<li class="item_fore15">
<a href="#">理财</a> /
<a href="#">众筹</a> /
<a href="#">白条</a> /
<a href="#">保险</a>
<i class="font_icon_right"></i>
</li>
</div>
</div>
<!-- 导航展示内容 -->
<div class="nav_items">
<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>
</ul>
</div>
</div>
</div>
<!-- 导航栏结束 -->
<!-- main开始 -->
<div class="main w">
<!-- 焦点图 -->
<div class="focus">
<!-- 左箭头 -->
<button class="button_arrowleft">
<i class="font_icon_left"></i>
</button>
<!-- 右箭头 -->
<button class="button_arrowright">
<i class="font_icon_right"></i>
</button>
<!-- 底部轮换按钮 这个按钮如果想实现京东的样式需要做个特效 -->
<div class="button_bottom">
<li><button></button></li>
<li><button></button></li>
<li><button></button></li>
<li><button></button></li>
<li><button></button></li>
<li><button></button></li>
<li><button></button></li>
<li><button></button></li>
</div>
<!-- 焦点图需要有一堆 先给好容器 -->
<li>
<a href="#">
<img src="upload/focus.png">
</a>
</li>
</div>
<!-- 新闻快报 -->
<div class="newflash">
<!-- 快报标题模块 -->
<div class="news">
<li>
<h3>品优购快报</h3>
</li>
<li>
<a href="#">更多</a>
</li>
<i class="font_icon_right"></i>
</div>
<!-- 快报内容模块 -->
<div class="news_content">
<ul>
<li>
<a href="#" class="font_weight_600">[特惠]</a>
<a href="#">备战开学季 全民半价购数码</a>
</li>
<li>
<a href="#" class="font_weight_600">[公告]</a>
<a href="#">品优稳占家电网购六成份额</a>
</li>
<li>
<a href="#" class="font_weight_600">[特惠]</a>
<a href="#">百元中秋全品类礼券限量领</a>
</li>
<li>
<a href="#" class="font_weight_600">[公告]</a>
<a href="#">上品优生鲜 享阳澄湖大闸蟹</a>
</li>
<li>
<a href="#" class="font_weight_600">[特惠]</a>
<a href="#">每日享折扣优 品质游</a>
</li>
</ul>
</div>
<!-- 生活服务 lifeservice -->
<div class="lifeservice">
<ul>
<li>
<img src="img/话费.png">
<a href="#">话费</a>
</li>
<li>
<img src="img/机票.png">
<a href="#">机票</a>
</li>
<li>
<img src="img/酒店.png">
<a href="#">酒店</a>
</li>
<li>
<img src="img/游戏.png">
<a href="#">游戏</a>
</li>
<li>
<img src="img/加油卡.png">
<a href="#">加油卡</a>
</li>
<li>
<img src="img/火车票.png">
<a href="#">火车票</a>
</li>
<li>
<img src="img/众筹.png">
<a href="#">众筹</a>
</li>
<li>
<img src="img/理财.png">
<a href="#">理财</a>
</li>
<li>
<img src="img/白条.png">
<a href="#">白条</a>
</li>
<li>
<img src="img/电影票.png">
<a href="#">电影票</a>
</li>
<li>
<img src="img/企业购.png">
<a href="#">企业购</a>
</li>
<li>
<img src="img/礼品卡.png">
<a href="#">礼品卡</a>
</li>
</ul>
</div>
<!-- 特加商品bargain -->
<div class="bargain">
<img src="upload/bargain.png">
</div>
</div>
<!-- 侧工具栏 -->
</div>
<!-- main结束 -->
<!-- 推荐模块开始 recommend -->
<div class="recommend w">
<div class="re_hd">
<img src="img/clock.png">
<h3>今日推荐</h3>
</div>
<div class="re_bd">
<li><a href="#"><img src="upload/recommend (2).png"></a></li>
<li><a href="#"><img src="upload/recommend (3).png"></a></li>
<li><a href="#"><img src="upload/recommend (4).png"></a></li>
<li><a href="#" class="last"><img src="upload/recommend (1).png"></a></li>
</div>
</div>
<!-- 推荐模块结束 -->
<!-- 猜你喜欢模块 -->
<div class="likes w">
<div class="likes_title">
<h3>猜你喜欢</h3>
<button>换一批<i>圆圈</i></button>
</div>
<div class="likes_bd">
<li>
<img src="upload/likes (2).png" class="likes_itmes1">
<a href="#">
<p>阳光美包新款单肩包女包</p>
<p>时尚母子包四件套</p>
<h3><i>￥</i>116.00</h3>
</a>
</li>
<li>
<img src="upload/likes (3).png" class="likes_itmes2">
<a href="#">
<p>爱仕达 30CM炒锅不粘锅</p>
<p>NWG8330E电磁炉炒锅</p>
<h3><i>￥</i>99.00</h3>
</a>
</li>
<li>
<img src="upload/likes (4).png" class="likes_itmes3">
<a href="#">
<p>捷波朗（jabra）</p>
<p>BOOSI劲步无线蓝牙耳机</p>
<h3><i>￥</i>245.00</h3>
</a>
</li>
<li>
<img src="upload/likes (5).png" class="likes_itmes4">
<a href="#">
<p>欧普JYLZ08</p>
<p>面板灯平板灯铝合金</p>
<h3><i>￥</i>238.00</h3>
</a>
</li>
<li>
<img src="upload/likes (6).png" class="likes_itmes5">
<a href="#">
<p>三星（G5500）</p>
<p>移动联通4G智能手机</p>
<h3><i>￥</i>649.00</h3>
</a>
</li>
<li>
<img src="upload/likes (1).png" class="likes_itmes6">
<a href="#" class="border_none">
<p>韩国所望</p>
<p>紧致湿润精华露400ml</p>
<h3><i>￥</i>649.00</h3>
</a>
</li>
</div>
</div>
<!-- 猜你喜欢模块结束 -->
<!-- 品牌好物模块 -->
<div class="good w">
<div class="good_title">
<h3>品牌好物</h3>
</div>
<div class="good_bd">
<!-- 图书榜 -->
<div class="book">
<a href="#">
<h3>品优购图书推荐</h3>
畅销推荐低至一折
<div class="icon_goods1"></div>
</a>
</div>
<!-- 好东西 -->
<div class="thing">
<div class="thing_title">好东西</div>
<!-- 达人推荐 -->
<li class="wise">
<a href="#">
<h3>达人推荐</h3>
雷神金属机械键盘<br>
<i>与你相见恨晚</i>
<div class="icon_goods2"></div>
</a>
</li>
<!-- 发现好物 -->
<li class="find">
<a href="#">
<h3>发现好物</h3>
一不小心霸气外露<br>
<i>等你来</i>
<div class="icon_goods3"></div>
</a>
</li>
</div>
<!-- 品牌街 -->
<div class="major">
<div class="major_title">品牌街</div>
<!-- 苏泊尔 -->
<li class="supor">
<a href="#">
<h3>苏泊尔</h3>
返场大秀场<br>
<i>爆品直降100元</i>
<div class="icon_goods4"></div>
</a>
</li>
<!-- 国际大牌 -->
<li class="adidas">
<a href="#">
<h3>国际大牌</h3>
adidas<br>
<i>部分3免1</i>
<div class="icon_goods5"></div>
</a>
</li>
<!-- 本周特卖 -->
<li class="week">
<a href="#">
<h3>本周特卖</h3>
大牌折扣<br>
<i>每周上新</i>
<div class="icon_goods6"></div>
</a>
</li>
</div>
<!-- 推荐品牌 -->
<div class="company">
<li><a href="#"></a></li>
<li><a href="#" class="bordernone"></a></li>
<li><a href="#"></a></li>
<li><a href="#" class="bordernone"></a></li>
<li><a href="#"></a></li>
<li><a href="#" class="bordernone"></a></li>
<li><a href="#"></a></li>
<li><a href="#" class="bordernone"></a></li>
<li><a href="#"></a></li>
<li><a href="#" class="bordernone"></a></li>
<li><a href="#"></a></li>
<li><a href="#" class="bordernone"></a></li>
<li><a href="#" class="bordernone2"></a></li>
<li><a href="#" class="bordernone bordernone2"></a></li>
<div class="icon_goods7"></div>
</div>
</div>
</div>
<!-- 品牌好物结束 -->
<!-- 电梯展示的内容开始 -->
<div class="floor w">
<!-- 第一层标题 -->
<div class="box_hd">
<h3 id="appliances">家用电器</h3>
<ul class="tab_list">
<li><a href="#" class="font_color_red">热门</a></li>
<li class="style_y"></li>
<li><a href="#">大家电</a></li>
<li class="style_y"></li>
<li><a href="#">生活电器</a></li>
<li class="style_y"></li>
<li><a href="#">厨房电器</a></li>
<li class="style_y"></li>
<li><a href="#">个护健康</a></li>
<li class="style_y"></li>
<li><a href="#">应季电器</a></li>
<li class="style_y"></li>
<li><a href="#">空气/净水</a></li>
<li class="style_y"></li>
<li><a href="#">新奇特</a></li>
<li class="style_y"></li>
<li><a href="#">高端电器</a></li>
</ul>
</div>
<!-- 第一层内容 -->
<div class="box_bd">
<!-- 由于内容和上述的li应该时对应的所以下方按理来说有很多的ul来存放对应的元素 -->
<ul class="tab_content">
<li class="t_c_1">
<ul class="t_hotwords">
<li><a href="#">节能补贴</a></li>
<li><a href="#">4K电视</a></li>
<li><a href="#">空气净化器</a></li>
<li><a href="#">IH电饭煲</a></li>
<li><a href="#">滚筒洗衣机</a></li>
<li><a href="#">电热水器</a></li>
</ul>
<a href="#" class="tc1_a">
<h3>三星曲面电视</h3>
抽奖送豪礼
<img src="upload/floor1.png">
</a>
</li>
<li class="t_c_2">
<a href="#">
<h3>烧水壶智能光控泡茶壶茶具套装</h3>
满299.00减40.00
<img src="upload/floor2.png">
</a>
</li>
<li class="t_c_3">
<a href="#" class="tc3_a1">
<h3>每满200减20元</h3>
烘焙节1元抢购
<img src="upload/floor3.png">
</a>
<a href="#" class="tc3_a2">
<h3>买乐视电视享钜惠</h3>
送60个月会员
<img src="upload/floor4.png">
</a>
</li>
<li class="t_c_4">
<a href="#">
<h3>8.20彩电宅购节</h3>
65寸4K智能电视3799
<img src="upload/floor5.png" class="margin-left-20">
</a>
</li>
<li class="t_c_5">
<a href="#" class="tc5_a1">
<h3>消暑神器全场领券</h3>
1元赢空调
<img src="upload/floor6.png">
</a>
<a href="#" class="tc5_a2">
<h3>夏日清凉换装好礼</h3>
空调品牌享0元装机
<img src="upload/floor7.png">
</a>
</li>
</ul>
</div>
<!-- 第一层下部品牌链接容器 -->
<div class="box_ft">
<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>
<li><a href="#"></a></li>
<img
最低0.47元/天 解锁文章
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
