使用html+css实现-静态开源案例-品优购
使用html+css实现-静态开源案例-品优购
- 设计目标
- css制作
- 图标规范
- seo优化
-
- 网页标题 title
- description 网站说明 显示在搜索引擎后方的解释
- Keywords关键词
- 字体图标
-
- 引入方法
- 注意搭建整个页面时的路径问题
- html代码
-
- 首页(index.html)
- 商品列表页(list.html)
- 商品详情页(detail.html)
- 注册页面(register.html)
- CSS代码
-
- 通用css(base.css)
- 公用css(common.css)
- 首页css(index.css)
- 商品列表页css(list.css)
- 商品详情页css(detail.css)
- 注册页css(register.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
使用标签
Keywords关键词
主要突出你是干啥的 比如京东卖3c主要突出3c产品 做软件开发的说项目或者技术
卖电脑的推硬件
控制在6-8个关键词左右
使用
字体图标
典型的是 例如京东里的选择位置前头的那个红色图标 那实际是个字体图标
还有小米里的购物车图标 那也是一个字体图标
图片的缺点:增加项目文件大小,增大了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)
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<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">
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/common.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">
<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="#">领券减60a>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="#">KPLa>li>
ul>
<div class="shopcar">
<div class="icon_count">
<i class="count">80i>
<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>
<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>
<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>
<div class="bargain">
<img src="upload/bargain.png">
div>