临泉建设网站,wordpress企业网站源码,做旅游网站当地人服务赚钱吗,南阳网站关键词品优购案例
一、品优购项目规划
1. 品优购项目整体介绍
项目名称#xff1a;品优购
项目描述#xff1a;品优购是一个电商网站#xff0c;我们要完成 PC 端首页、列表页、注册页面的制作
2. 品优购项目学习目的
1. 电商类网站比较综合#xff0c;里面需要大量的布…品优购案例
一、品优购项目规划
1. 品优购项目整体介绍
项目名称品优购
项目描述品优购是一个电商网站我们要完成 PC 端首页、列表页、注册页面的制作
2. 品优购项目学习目的
1. 电商类网站比较综合里面需要大量的布局技术包括布局方式、常见效果以及周边技术。
2. 品优购项目能复习、总结、提高基础班所学布局技术。
3. 写完品优购项目能对实际开发中制作 PC 端页面流程有一个整体的感知。
4. 为后期学习移动端项目做铺垫。
3. 开发工具以及技术栈
3.1 开发工具 切图用ps 代码用Vscode测试用chrome
3.2 技术栈
利用 HTML5 CSS3 手动布局可以大量使用 H5 新增标签和样式
采取结构与样式相分离模块化开发
良好的代码规范有利于团队更好的开发协作提高代码质量因此品优购项目里面请同学们遵循以下代 码规范。详情见素材文件夹--- 品优购代码规范.md
4 品优购项目搭建工作
4.1 需要创建如下文件夹 4.2 需要创建如下文件
有些网站初始化的不太提倡 * { margin: 0; padding: 0; }
比如新浪
html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img{margin:0;padding:0}
base.css
/* 把所有标签的内外边距清零 */
* {margin: 0;padding: 0;
}/* em 和 i 斜体的文字不倾斜 */
em,
i {font-style: normal;
}/* 去掉li的小圆点 */
li {list-style: none;
}img {/* border: 0; 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */border: 0;/* 取消图片底侧有空白缝隙的问题 */vertical-align: middle;
}button {/* 当鼠标经过button 按钮时鼠标变成小手 */cursor: pointer;
}a {color: #666;text-decoration: none;
}a:hover {color: #c81623
}button,
input {/* \5B8B\4F53 宋体 浏览器兼容性比较好 */font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, \5B8B\4F53, sans-serif
}body {/* CSS3 抗锯齿形 让文字显示的更加清晰 */-webkit-font-smoothing: antialiased;background-color: #fff;/* 字号12px 行号1.5倍 */font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, \5B8B\4F53, sans-serif;color: #666
}.hide,
.none {display: none
}/* 清除浮动 */
.clearfix:after {visibility: hidden;clear: both;display: block;content: .;height: 0
}.clearfix {zoom: 1
} 4.3 模块化开发
有些样式和结构在很多页面都会出现比如页面头部和底部大部分页面都有。此时可以把这些结构 和样式单独作为一个模块然后重复使用
这里最典型的应用就是 common.css 公共样式。写好一个样式其余的页面用到这些相同的样式
模块化开发具有重复使用、修改方便等优点 common.css 公共样式里面包含版心宽度、清除浮动、页面文字颜色等公共样式。
5、网站favicon图标
favicon.ico 一般用于作为缩略的网站标志它显示在浏览器的地址栏或者标签上。
目前主要的浏览器都支持 favicon.ico 图标。
5.1 制作favicon图标 把品优购图标切成png图片 把png图片转换为ico图标这需要借助于第三方转换网站例如比特虫http://www.bitbug.net/
5.2 favicon图标放到网站根目录下
5.3 HTML页面引入favicon图标 在html页面里面的head /head元素之间引入代码。 link relshortcut icon hreffavicon.ico typeimage/x-icon/
7、网站TDK三大标签SEO优化
SEOSearch Engine Optimization汉译为搜索引擎优化是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。
SEO 的目的是对网站进行深度的优化从而帮助网站获取免费的流量进而在搜索引擎上提升网站的排名提高网站的知名度。
页面必须有三个标签用来符合 SEO 优化有专门的 SEO 人员准备。 7.1 title网站标题
title 具有不可替代性是我们内页的第一个重要标签是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。
建议网站名产品名- 网站的介绍 尽量不要超过30个汉字
例如
京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物
小米商城 - 小米5s、红米Note 4、小米MIX、小米笔记本官方网站
7.2 description 网站说明
简要说明我们网站主要是做什么的。
我们提倡description 作为网站的总体业务和主题概括多采用“我们是…”、“我们提供…”、“×××网作为…”、“电话010…”之类语句。
例如
meta namedescription content京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务为您提供愉悦的网上购物体验! /
3. keywords 关键字
keywords 是页面关键词是搜索引擎的关注点之一。
keywords 最好限制为 68 个关键词关键词之间用英文逗号隔开采用 关键词1,关键词2 的形式。
例如
meta name keywords content网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东 /
二、品优购首页制作
网站的首页一般都是使用 index 命名比如 index.html 或者 index.php 。
开始制作首页的头部和底部的时候根据模块化开发样式要写到common.css里面
2.1 常用模块类名命名 2.2 快捷导航shortcut制作 HTML
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title品优购商城-综合网购首选、正品低价、品质保障、配送及时、轻松购物/title!-- 网站说明 --meta namedescription content选优购商品-专业的综合网上购物商城,销售家电、数码通讯、电脑、
家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务为您提供愉悦的网上购物
体验!!-- 页面关键词是搜索引擎的关注点之一。 --meta name keywords content网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东 /!-- 网站 favicon 图标 根目录下直接文件名 --link relshortcut icon hreffavicon.ico /!-- 引入初始化标签 --link relstylesheet href./css/base.CSS!-- 引入公共标签 --link relstylesheet href./css/common.css
/headbody!-- 快捷导航 shortcut 制作 --section classshortcut!-- 版心 --div classwdiv classleftulli品优购欢迎您nbsp;/lilia href#请登录nbsp;/aa classstyle_red免费注册/a/li/ul/divdiv classrightulli我的订单/lili/lili classarrow-icon我的品优购/lili/lili品优购会员/lili/lili企业采购/lili/lili classarrow-icon关注品优购/lili/lili classarrow-icon客户服务/lili/lili classarrow-icon网站导航/li/ul/div/div/section
/body/html
CSS
/* 声明字体图标 */
font-face {font-family: icomoon;src: url(../fonts/icomoon.eot?tomleg);src: url(../fonts/icomoon.eot?tomleg#iefix) format(embedded-opentype),url(../fonts/icomoon.ttf?tomleg) format(truetype),url(../fonts/icomoon.woff?tomleg) format(woff),url(../fonts/icomoon.svg?tomleg#icomoon) format(svg);font-weight: normal;font-style: normal;font-display: block;
}/* 快捷导航 shortcut 制作 */
.w {width: 1200px;margin: 0 auto;
}.shortcut {height: 31px;background-color: #f1f1f1;
}.left {float: left;
}.style_red {color: #c81623;
}.right {float: right;
}.shortcut ul li {float: left;line-height: 31px;}.shortcut .right ul li:nth-child(even) {width: 1px;height: 12px;background-color: #666;margin: 9px 15px 0px;
}.arrow-icon::after {margin-left: 6px;font-family: icomoon;content: \e91e;
}
2.3 header制作 LOGO SEO优化
1. logo 里面首先放一个 h1 标签目的是为了提权告诉搜索引擎这个地方很重要。
2. h1 里面再放一个链接可以返回首页的把 logo 的背景图片给链接即可。
3. 为了搜索引擎收录我们我们链接里面要放文字网站名称但是文字不要显示出来。
方法1text-indent 移到盒子外面text-indent: -9999px) 然后 overflow:hidden 淘宝的做法
方法2直接给 font-size: 0; 就看不到文字了京东的做法。
4. 最后给链接一个 title 属性这样鼠标放到 logo 上就可以看到提示文字了。
HTML !-- header 制作 --header classheader w!-- logo 标志定位 --div classlogoh1a href#品优购商城/a/h1/div!-- search 搜索模块定位 --div classsearchinput typesearch name id placeholder语言开发button搜索/button/div!-- hotwords 热词模块定位 --div classhotwordsa href# classstyle_red优惠购首发/aa href#亿元优惠/aa href#9.9元团购/aa href#美满99减30/aa href#办公用品/aa href#电脑/aa href#通信/a/div!-- shopcar 购物车模块 --div classshopcar我的购物车i classcount8/i/div/header
CSS
/* header 制作 */
.header {position: relative;height: 105px;
}.header .logo {position: absolute;top: 25px;height: 56px;width: 171px;background-image: url(../images/logo.png);
}.logo a {font-size: 0px;display: block;width: 171px;height: 56px;background-image: url(../images/logo.png);
}.search {position: absolute;left: 346px;top: 25px;width: 538px;height: 36px;border: 2px solid #b1191a;
}.search input {float: left;/* position: relative; */height: 32px;width: 454px;padding-left: 10px;
}.search button {float: left;width: 84px;height: 36px;background-color: #b1191a;font-size: 16px;color: #fff;
}.hotwords {position: absolute;left: 346px;top: 70px;
}.hotwords a {margin: 0 10px;
}.shopcar {position: absolute;width: 140px;height: 31px;border: 1px solid #dfdfdf;background-color: #f7f7f7;right: 100px;top: 25px;line-height: 31px;color: #b1191a;text-align: center;
}.shopcar::before {content: \e93a;font-family: icomoon;margin-right: 5px;
}.shopcar::after {font-family: icomoon;content: \e920;margin-left: 10px;
}.count {position: absolute;top: -5px;left: 105px;height: 14px;line-height: 14px;color: #fff;background-color: #e60012;padding: 0 5px;border-radius: 7px 7px 7px 0;
} 2.4 nav导航制作
nav 盒子通栏有高度而且有个下边框
1 号盒子左侧浮动dropdown
2 号盒子左侧浮动navitems 导航栏组
1号盒子有讲究根据相关性 里面包含 .dt 和 .dd 两个盒子 HTML !-- nav 导航制作 --div classnavdiv classw!-- dropdown 下拉 --div classdropdowndiv classdt全部商品分类/divdiv classddullia href#家用电器/a/lilia href#手机、数码、通信/a/lilia href#电脑、办公/a/lilia href#家居、家具、家装、厨具/a/lilia href#男装、女装、童装、内衣/a/lilia href#个户化妆、清洁用品、宠物/a/lilia href#鞋靴、箱包、珠宝、奢侈品/a/lilia href#运动户外、钟表/a/lilia href#汽车、汽车用品/a/lilia href#母婴、玩具乐器/a/lilia href#食品、酒类、生鲜、特产/a/lilia href#医药保健/a/li/ul/div/div!-- navitems 导航栏组 --div classnavitemsullia href#服装城/a/lilia href#美妆馆/a/lilia href#传智超市/a/lilia href#全球购/a/lilia href#闪购/a/lilia href#团购/a/lilia href#拍卖/a/li/ul/div/div/div CSS
/* nav 导航制作 */
/* dropdown 下拉 */
.nav {height: 47px;border-bottom: 2px solid #b1191a;
}.nav .dropdown {float: left;width: 210px;height: 45px;background-color: #b1191a;
}.nav .navitems {float: left;
}.dropdown .dt {width: 100%;height: 100%;color: #fff;text-align: center;line-height: 45px;font-size: 16px;
}.dropdown .dd {width: 210px;height: 465px;background-color: #c81623;margin-top: 2px;
}.dropdown .dd ul li {position: relative;margin-left: 2px;height: 31px;line-height: 31px;padding-left: 10px;
}.dropdown .dd ul li:hover {background-color: #fff;
}.dropdown .dd ul li a {font-size: 14px;color: #fff;
}.dropdown .dd ul li:hover a {color: #c81623;
}.dropdown .dd ul li::after {font-family: icomoon;content: \e920;color: #fff;position: absolute;top: 5px;right: 5px;
}/* navitems 导航栏组 */
.navitems ul li {float: left;
}.navitems ul li a {display: block;height: 45px;line-height: 45px;font-size: 16px;padding: 0 25px;
}
效果图 2.5 footer 底部制作 HTML !-- footer 底部制作 --footer classfooterdiv classw!-- 服务模块 --div classmod_serviceullih5/h5div classservice_txth4正品保障/h4p正品保障提供发票达/p/div/lilih5/h5div classservice_txth4极速物流/h4p急速物流急速送达/p/div/lilih5/h5div classservice_txth4无忧售后/h4p7天无理由退换货/p/div/lilih5/h5div classservice_txth4特色服务/h4p私人定制家电套餐/p/div/lilih5/h5div classservice_txth4帮助指南/h4p您的购物指南/p/div/li/ul/div!-- 帮助模块 --div classmode_helpdldt购物流程/dtdda href#会员介绍/a/dddda href#生活旅行/团购/a/dddda href#常见问题/a/dddda href#大家电/a/dddda href#联系客服/a/dd/dldldt购物流程/dtdda href#会员介绍/a/dddda href#生活旅行/团购/a/dddda href#常见问题/a/dddda href#大家电/a/dddda href#联系客服/a/dd/dldldt购物流程/dtdda href#会员介绍/a/dddda href#生活旅行/团购/a/dddda href#常见问题/a/dddda href#大家电/a/dddda href#联系客服/a/dd/dldldt购物流程/dtdda href#会员介绍/a/dddda href#生活旅行/团购/a/dddda href#常见问题/a/dddda href#大家电/a/dddda href#联系客服/a/dd/dldldt购物流程/dtdda href#会员介绍/a/dddda href#生活旅行/团购/a/dddda href#常见问题/a/dddda href#大家电/a/dddda href#联系客服/a/dd/dldldt帮助中心/dtddimg src./images/wx_cz.jpg alt品优购客户端/dd/dl/div!-- 版权模块 --div classmod_copyrightdiv classlinksa href#关于我们/a |a href#联系我们/a |a href#联系客服/a |a href#商家入驻/a |a href#营销中心/a |a href#手机品优购/a |a href#友情链接/a |a href#销售联盟/a |a href#品优购社区/a |a href#品优购公益/a |a href#English Site/a |a href#Contact U/a/divdiv classcopyright地址北京市昌平区建材城西路金燕龙办公楼一层 邮编100096 电话400-618-4000 传真010-82935100 邮箱: zhanghjitcast.cnbr京ICP备08001421号京公网安备110108007702/div/div/div/footer
CSS /* footer 底部结束 */
.footer {width: 1920px;height: 417px;background-color: #f5f5f5;padding-top: 30px;
}.footer .mod_service {height: 80px;width: 1200px;border-bottom: 1px solid #ccc;
}.mod_service ul li {float: left;width: 230px;height: 50px;
}.mod_service ul li h5 {width: 50px;height: 52px;float: left;background: url(../images/icons.png) no-repeat -253px 0;
}.mod_service ul li div {float: left;
}.service_txt {margin-right: 8px;
}.service_txt h4 {font-size: 14px;
}.service_txt p {font-size: 12px;
}.mode_help {height: 185px;border-bottom: 1px solid #ccc;padding-top: 20px;padding-left: 50px;
}.mode_help dl {float: left;width: 200px;
}.mode_help dl:last-child {width: 90px;text-align: center;
}.mode_help dl dt {font-size: 16px;margin-bottom: 10px;
}/* !-- 版权模块 -- */
.mod_copyright {text-align: center;margin-top: 20px;
}.links {margin-bottom: 15px;
}.links a {margin: 0 3px;
}.copyright {line-height: 20px;
}
