使用html+css实现-静态开源案例-品优购

最新推荐文章于 2024-05-07 22:37:05 发布

SHoadgnaw

最新推荐文章于 2024-05-07 22:37:05 发布

阅读量7k

点赞数 5

分类专栏：小项目文章标签： css3 html5 css

本文链接：https://blog.csdn.net/weixin_44541948/article/details/114272013

版权

本文介绍了如何使用HTML和CSS创建静态电商页面，包括设计目标、CSS制作、图标规范和SEO优化。通过设置标题、描述、关键词，以及使用字体图标和合理的CSS结构，实现跨浏览器兼容性和移动端适配。提供了代码资源链接和注意事项。

摘要由CSDN通过智能技术生成

此静态页面在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