品优购页面制作过程与方法（笔记）

一、搜索导航模块区

1、对类名的定义

名称	说明
快捷导航栏	shortcut
头部	header
标志	logo
购物车	shopcar
搜索	search
热点词	hotwords
导航	nav
导航左侧	nav_left
导航右侧	nav_right
页面底部	footer
页面底部服务模块	mod_service
页面底部帮助模块	mod_help
页面底部版权模块	mod_copyright

2、对快捷导航栏区制作思路：

3、对于主页和内页一模一样的section我们采取模块式开发，在同一个css中进行样式书写。

书写误区：对文字垂直居中误解利用line-heighrt=line;就可以快速实现功能

4、在快捷导航区对右侧模块的竖线制作思路：

利用ul中的li去做盒子嵌套，其次利用结构选择器nth-child(even(偶数（关键字）))设置一系列相同属性使其展现

5、对于导航中下拉图标的制作

1、调用初始源码

/*调用特殊字符声明，此为初始代码子使用过程需对路径进行修改
@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;
} */

2、在css或HTML结构中写明对字体的调用（建议利用伪类选择器去调用）

伪类选择器中内容部分是 “字体图标代码”需要利用转义字符去调用

二、header头部模块

A：左侧logo根据SEO优化方式去制作

SEO优化目的：告诉搜索引擎网站关键字，提高网页推广量。

1. logo盒子里面首先放一个h1标签,目的是为了提权,告诉搜索引擎,这个地方很重要。
2. h1里面再放一个超链接,可以返回首页的,把logo的背景图片给链接即可。
3.为了搜索引擎收录我们,我们链接里面要放文字(网站名称) ,但是文字不要显示出来。
●方法1 : text-indent移到盒子外面( text -indent: -9999px) ,然后overflow:hidden ,淘宝的做法。
●方法2:直接给font-size:0; 就看不到文字了,京东的做法。
4.最后给链接一个title属性,这样鼠标放到logo上就可以看到提示文字了。

B:中间搜索框模块

1、给父盒子一个2px的边框里面的子盒子不设边框完成定型

2、对于搜索框中,,文字缩进我们采取了border-sizing=border-box,,盒子的宽度已经控制住了，不会因为内容的增大而撑开盒子，所以我们设置padding-left属性会让内边距往里缩进，进而实现文字缩进效果

* {margin: 0;padding: 0;/* 1. box-sizing: content-box盒子大小为width + padding + border ( 默认情况) *//* 2. box- sizing:border-box盒子大小为
width（其余设计的尺寸在盒子内部伸缩进行变化不会让盒子变大） */box-sizing: border-box;
}

三、在侧边栏中加入字体图标利用css伪元素，然后在css中利用定位去置右放置

第一部分主页区：代码如下

HTML：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="description" content="品优购-专业的综合网上购物商城销售家电、数码通讯、电脑、
家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物
体验!" /><meta name="keywords" content="网上购物，网上商城手机,笔记本,电脑,MP3,CD,VCD,DV，相机,数码配
件,手表存储卡,品优购" /><title>品优购-综合网购首选-正品低价、品质保障、配送快捷！</title><link rel="stylesheet" href="css/base.css"><link rel="stylesheet" href="css/common.css"><!-- 标题栏图标引入 --><link rel="shortcut icon" href="title_logo.ico" type="image/x-icon">
</head><body><!-- 快捷导航模块 start--><section class="shortcut"><!-- 版心模块 --><div class="edition_heart1"><div class="fl"><ul><li>品优购欢迎你！&nbsp;</li><li><a href="#">请登入 &nbsp;</a><a href="#" class="redword">免费注册</a></li></ul></div><div class="fr"><ul><li>我的订单</li><li></li><li class="list-icon">我的品优购</li><li></li><li>品优购会员</li><li></li><li>企业采购</li><li></li><li class="list-icon">关注品优购</li><li></li><li class="list-icon">客户服务</li><li></li><li class="list-icon">网站导航</li></ul></div></div></section><!-- 快捷导航模块 end--><!-- 中间搜索框区域（logo、hotword）--><header class="header edition_heart1"><!-- logo部分 开始 --><div class="logo"><h1><a href="index.html" title="好物就找品优购，质量有保证！">品优购-综合网购首选-正品低价、品质保障、配送快捷！</a></h1></div><!-- logo部分 结束 --><!-- 搜索框开始 --><div class="search"><input type="search" name="" id="" value="语音开发"><button>搜索</button></div><!-- 搜索框结束 --><!-- 搜索框底部热点词区域 --><div class="hotword"><a href="#" class="redword">优惠购首发</a><a href="#">亿元优惠</a><a href="#">9.9元团购</a><a href="#">美满99减30</a><a href="#">办公用品</a><a href="#">电脑</a><a href="#">通信</a></div><!-- 搜索框底部热点词区域  结束--><!-- 购物车模块开始 --><div class="shopcar"><!-- 利用伪类元素制作了一系列样式在css结构中 -->我的购物车<i><!-- 右上角图标 -->8</i></div><!-- 购物车模块结束 --><!-- 中间通栏导航区 开始 --><!-- 中间通栏导航区 结束 --></header><!-- 左侧与上面通告导航栏 开始 --><nav><div class="edition_heart1"><div class="nav-left"><dt>全部商品分类</dt><dd><ul><li><a href="">家用电器、</a><a href="">厨具</a></li><li><a href="">手机、</a><a href="">数码、</a><a href="">通信</a></li><li><a href="">电脑、</a><a href="">办公</a></li><li><a href="">家居、</a><a href="">家具、</a><a href="">家装</a></li><li><a href="">男装、</a><a href="">女装、</a><a href="">童装</a></li><li><a href="">个户化妆、</a><a href="">清洁用品、</a><a href="">宠物</a></li><li><a href="">鞋靴、</a><a href="">箱包、</a><a href="">珠宝</a></li><li><a href="">运动户外、</a><a href="">钟表</a></li><li><a href="">汽车、</a><a href="">汽车用品</a></li><li><a href="">母婴、</a><a href="">玩具乐器、</a><a href="">特产</a></li><li><a href="">食品、</a><a href="">酒类、</a><a href="">生鲜</a></li><li><a href="">医药保健、</a><a href="">众筹、</a><a href="">保险</a></li><li><a href="">图书、</a><a href="">电子书、</a><a href="">音效</a></li><li><a href=""> 彩票、</a><a href="">旅行、</a><a href="">充值</a></li><li><a href="">理财、</a><a href="">白条、</a><a href="">票务</a></li></ul></dd></div><div class="nav-right"><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></nav><!-- 左侧与上面通告导航栏 结束 --><!-- 底部模块第一部分 开始 --><footer class="footer"><!-- 大框中间到版心 --><div class="edition_heart1"><!-- 第一个服务模块 --><div class="mod-service1"><ul><li><div class="service-picture1 pic"></div><div class="service-picture-text"><h4 style="font-size: 14px;">正品保障</h4><p style="font-size: 12px;">正品保障，提供发票</p></div></li><li><div class="service-picture2 pic"></div><div class="service-picture-text"><h4 style="font-size: 14px;"> 极速物流</h4><p style="font-size: 12px;"> 急速物流，急速送达</p></div></li><li><div class="service-picture3 pic"></div><div class="service-picture-text"><h4 style="font-size: 14px;">无忧售后</h4><p style="font-size: 12px;">7天无理由退货</p></div></li><li><div class="service-picture4 pic"></div><div class="service-picture-text"><h4 style="font-size: 14px;">特色服务</h4><p style="font-size: 12px;">私人定制家电套餐</p></div></li><li><div class="service-picture5 pic"></div><div class="service-picture-text"><h4 style="font-size: 14px;">帮助中心</h4><p style="font-size: 12px;">您的购物指南</p></div></li></ul></div><!-- 底部模块第一部分 结束 --><!-- 底部模块第二部分 开始 --><div class="mod-help"><dl><dd style="font-size: 16px;">售后服务</dd><dt><a href="#">售后政策</a></dt><dt><a href="#">价格保护</a></dt><dt><a href="#">退款说明</a></dt><dt><a href="#">返修/退换货</a></dt><dt><a href="#">取消订单</a></dt></dl><dl><dd style="font-size: 16px;">售后服务</dd><dt><a href="#">售后政策</a></dt><dt><a href="#">价格保护</a></dt><dt><a href="#">退款说明</a></dt><dt><a href="#">返修/退换货</a></dt><dt><a href="#">取消订单</a></dt></dl><dl><dd style="font-size: 16px;">售后服务</dd><dt><a href="#">售后政策</a></dt><dt><a href="#">价格保护</a></dt><dt><a href="#">退款说明</a></dt><dt><a href="#">返修/退换货</a></dt><dt><a href="#">取消订单</a></dt></dl><dl><dd style="font-size: 16px;">售后服务</dd><dt><a href="#">售后政策</a></dt><dt><a href="#">价格保护</a></dt><dt><a href="#">退款说明</a></dt><dt><a href="#">返修/退换货</a></dt><dt><a href="#">取消订单</a></dt></dl><dl><dd style="font-size: 16px;">售后服务</dd><dt><a href="#">售后政策</a></dt><dt><a href="#">价格保护</a></dt><dt><a href="#">退款说明</a></dt><dt><a href="#">返修/退换货</a></dt><dt><a href="#">取消订单</a></dt></dl><dl><dd style="font-size: 16px;">帮助中心</dd><dt><img src="data:images/wx_cz.jpg" alt="" ><p>品牌优购客户端</p></dt></dl></div><!-- 底部模块第二部分 结束 --><!-- 底部模块第三部分 开始--><div class="mod-copyright"><div class="link"><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="">品优购公益</a> | <a href="">English Site</a>                    | <a href=""> Contact U</a></div><div class="area"> 地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn</div><div class="areanumber">京ICP备08001421号京公网安备11010800770</div></div><!-- 底部模块第三部分 结束--></div></footer>>
</body></html>

CSS：

.shortcut {background-color: rgb(241, 241, 241);height: 31px;
}.edition_heart1 {width: 1200px;margin: 0 auto;
}.fl,
.fr {float: left;width: 400px;height: 31px;line-height: 31px;
}.fr {float: right;width: 606px;
}.edition_heart1 ul li {float: left;
}.redword {color: rgb(208, 22, 35);
}.shortcut .fr ul li:nth-child(even) {width: 1px;height: 12px;margin: 9px 15px;background-color: rgb(102, 102, 102);
}/*调用特殊字符声明，此为初始代码子使用过程需对路径进行修改
@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;
} */@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;
}.list-icon::after {content: "\e91e";font-family: 'icomoon';
}/* 快捷导航模块 end  */.header {position: relative;height: 105px;/* background-color: skyblue; */
}.logo {position: absolute;top: 25px;width: 171px;height: 61px;background-color: pink;background: url("../images/logo.png") no-repeat;
}.logo h1 a {display: block;text-indent: -9999px;overflow: hidden;
}/* logo部分结束 *//* 搜索框部分 开始 */.search {position: absolute;top: 25px;left: 346px;width: 538px;height: 36px;border: 2px solid #b1191a;
}.search input {float: left;width: 455px;height: 32px;padding-left: 15px;
}.search button {float: left;width: 79px;height: 32px;background-color: #b1191a;
}/* <!-- 搜索框结束 --> */.hotword {position: absolute;top: 66px;left: 346px;
}.hotword>a {margin: 0 10px;
}/* <!-- 搜索框底部热点词区域 结束--> */.shopcar {position: absolute;left: 996px;top: 25px;text-align: center;line-height: 34px;color: #666666;font-size: 15px;height: 37px;width: 140px;background-color: #f7f7f7;border: 2px solid #dfdfdf;
}.shopcar::before {content: "\e93a";font-family: "icomoon";color: #b1191a;margin-right: 5px;
}.shopcar::after {content: "\e920";font-family: "icomoon";vertical-align: initial;margin-left: 10px;
}.shopcar i {position: absolute;top: -5px;left: 105px;height: 14px;padding: 0 5px;line-height: 14px;background-color: #b1191a;border-radius: 7px 7px 7px 0px;color: white;
}/* <!-- 中间通栏导航区 开始 --> */nav {width: 100%;height: 45px;border-bottom: 2px solid #b1191a;/* text-align: center; */
}.nav-left {float: left;width: 210px;height: 45px;background-color: #b1191a;
}.nav-right {float: right;width: 980px;height: 45px;
}.nav-left dt {width: 100%;height: 100%;text-align: center;line-height: 45px;font-size: 14px;color: #f6eaea;
}.nav-left dd {display: none;width: 210px;height: 465px;/* cursor: pointer; */background-color: #c81623;
}.nav-left dd:hover {display: block;
}.nav-left dd ul li {height: 31px;width: 210px;line-height: 31px;margin-left: 3px;padding-left: 10px;
}.nav-left dd ul li:hover {background-color: #fff;
}.nav-left dd ul li a {color: #fff;font-size: 14px;
}.nav-left dd ul li:hover a {color: #c81623;
}.nav-left dd ul {position: relative;
}.nav-left dd ul li::after {/* 利用伪元素去制作箭头让其定位到最右边 */position: absolute;right: 5px;/* top: 5px; */content: "\e920";font-family: "icomoon";color: white;
}.nav-right ul li {width: 100px;height: 45px;color: #333333;font-size: 16px;text-align: center;line-height: 45px;
}.nav-right ul li a {display: inline-block;width: 100px;height: 45px;
}/* <!-- 中间通栏导航区 结束 --> *//* <!-- 底部模块 开始 --> */.footer {height: 415px;background-color: #f5f5f5;padding-top: 30px;
}.mod-service1 {height: 80px;border-bottom: 2px solid #ededed;
}.mod-service1 ul li {height: 50px;width: 240px;/* background-color: skyblue; */padding-left: 37px;
}.pic {height: 50px;width: 50px;float: left;margin-right: 6px;
}.service-picture1 {background: url("../images/icons.png") no-repeat -252px -2px;
}.service-picture2 {background: url("../images/icons.png") no-repeat -255px -53px;
}.service-picture3 {background: url("../images/icons.png") no-repeat -256px -106px;
}.service-picture4 {background: url("../images/icons.png") no-repeat -257px -157px;
}.service-picture5 {background: url("../images/icons.png") no-repeat -256px -106px;
}/* <!-- 底部模块第一部分 结束 --> *//* <!-- 底部模块第二部分 开始 --> */.mod-help {height: 188px;border-bottom: 2px solid #ededed;
}.mod-help dd {margin-bottom: 10px;
}.mod-help dd dt {font-size: 12px;
}.mod-help dl {float: left;width: 200px;
}.mod-help dl:last-child {width: 200px;text-align: center;
}/* <!-- 底部模块第二部分 结束 --> *//* <!-- 底部模块第三部分 开始--> */.mod-copyright {height: 120px;text-align: center;
}.area {padding: 5px 0;
}.link>a {padding: 0px 10px;
}/* <!-- 底部模块第三部分 结束--> */

品优购页面制作过程与方法（笔记）相关推荐

品优购页面制作过程与方法（笔记）（二）
一.对于单独段落文字垂直居中方法采取如下设置(盒子独占一行文字位置可通过line-height去随意更值) 二.在无序列表当中遇到ul盒子容纳不下li盒子导致部分空间另起一行,实际上与li盒子的边框有 ...
三、品优购首页制作_快捷导航区域
代码下载地址:https://gitee.com/bitaotao/quality-shopping-static-page.git 一.品优购首页制作网站的首页一般都是使用index命名,比如in ...
HTML5 和 CSS3 的新特性--品优购首页制作
网站的首页一般都是使用 index 命名,比如 index.html 或者 index.php . 我们开始制作首页的头部和底部的时候,根据模块化开发,样式要写到common.css里面. 以下是我们 ...
PC端品优购网页制作（common.css）
制作网页前的基础学习品优购项目规划 1.1网站制作流程客户沟通制定方案签订合同预付定金不能退初稿审核网页美工会制作原型图和PSD效果图前台页面设计后台工程开发测试验收上线培训后期 ...
品优购网页制作（HTML和css内容）
品优购前期准备书写对应页面首页列表页注册页后话前期准备 1.准备一个大的文件夹,里面包括若干小的文件夹. 2.小的文件夹分为: css-----存储初始化样式以及各个页面的样式 imag ...
【HTML+CSS】01.品优购首页制作——快捷导航shortcut制作
1.常用模块类名命名 2.快捷导航shortcut制作 (1)快捷导航整体上在common.css中: /* 左浮动 */ .fl{float: left; } /* 右浮动 */ .fr{floa ...
八、品优购首页制作_主体区域（下）
一.楼层区floor制作注意这个floor,不要给高度,内容有多少,算多少. 第一楼是家用电器模块:里面包含两个盒子 1号盒子box_hd,给一个高度,有个下边框,里面分为左右2个盒子. 2号盒子b ...
b站pink老师前端课程、品优购项目（跟着练的笔记+代码）
02.网站制作流程 1. 03.品优购项目规划 04.项目搭建 05.样式的模块化开发 06.favicon图标制作 favicon.ico一般用于作为略缩图的网站标志,它显示在浏览器的地址栏或者标签 ...
微信小程序--优购页面制作
优购–项目这个项目学习源自:黑马程序员微信小程序开发前端教程_零基础玩转微信小程序-哔哩哔哩想要更深入的了解此项目,就去黑马程序员学习该项目.该项目个人觉得对于初学者来说是有很大的帮助的.做好该项 ...

品优购页面制作过程与方法（笔记）

品优购页面制作过程与方法（笔记）相关推荐

最新文章

热门文章