一、搜索导航模块区
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>品优购欢迎你！ </li>
<li><a href="#">请登入 </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="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;
}
/* <!-- 底部模块第三部分 结束--> */
475
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
