共计 4126 个字符，预计需要花费 11 分钟才能阅读完成。
首页
Classname 命名标准
Classname 命名标准，类名尽量简短，首字母必须要小写，且单词之间用 '_' 示意
我的项目文件夹
- 我的项目文件夹：pinyougou
- 款式图片类文件夹：img
- 产品类图片文件夹 upload
- 字体文件夹 fonts
- 款式文件夹 CSS
- js 文件夹 js
款式文件的分类
初始化及原子类文件 base.css
公共款式文件：commen.css
favicon 图标
如何查看网站的 favicon 图标吗
只须要在以后网站里输出 /favicon.ico 即可 网站优化三大标签
- SEO: 简称搜索引擎
- 常见的搜索引擎：谷歌 雅虎 百度 搜狗
- 网站优化的三大标签：title Description keywords
title: 网站题目
Description: 网站内容
keywords：网站关键字
字体图标
字体图标的长处
跟图片一样能够扭转透明度，旋转，并且反对所有的浏览器
字体图标的应用流程
下载兼容性字体包
罕用的两大网站
icomoon: icomoon.io/
阿里巴巴矢量图 www.iconfont.cn/
如何把字体引入 html 构造中
1. 把 fonts 文件夹放在根目录中
2. 在 HTML 中申明构造
3. 在款式中申明字体
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}4. 给盒子指定字体
span {font-family: "icomoon";}如何追加新的字体图标
利用 selection.json 从新上传追加字体图标，从新下载字体包替换原来的字体包即可
难点
logo 局部
- logo 外面放一个 h1 目标是为了提权，通知搜索引擎，这个中央很重要
- h1 外面放一个 a 标签，a 标签的地址是首页的地址，并且要在 a 标签外面写上字，目标是为了让搜索引擎收录咱们
- 如何让 a 标签的字隐没？
1.overflow:hidden text-indent:-99999px
2.font-size:0
- 挪动到链接时，要显示文字。
html
<!-- logo 局部 -->
<div class="logo">
<h1>
<a href="index.html" title="优品汇"> 优品汇 </a>
</h1>
</div>css
.header .logo {
position: absolute;
left: 2px;
top:25px;
width: 172px;
height:55px;
background-color: blue;
}
.header .logo a {
display: inline-block;
width: 172px;
height:55px;
background: url("../img/logo.png") no-repeat;
/* 让文字隐没 */
text-indent: -99999px;
overflow: hidden;
}
news 局部
此处用到精灵图技术
下拉菜单
html
<!-- dropdown 下拉菜单 -->
<div class="dropdown fl">
<div class="dt"> 全副商品分类 </div>
<div class="dd">
<ul>
<li class="memu_item">
<a href="#"> 家用电器 </a>
<i></i>
</li>
<li class="memu_item">
<a href="list.html"> 手机 </a>
<a href="#"> 数码 </a>
<a href="#"> 通信 </a>
<i></i>
</li>
<li class="memu_item">
<a href="#"> 电脑 </a>
<a href="#"> 办公 </a>
<i></i>
</li>
<li class="memu_item">
<a href="#"> 家具 </a>
<a href="#"> 家居 </a>
<a href="#"> 家装 </a>
<a href="#"> 厨具 </a>
<i></i>
</li>
<li class="memu_item">
<a href="#"> 男装 </a>
<a href="#"> 女装 </a>
<a href="#"> 童装 </a>
<a href="#"> 内衣 </a>
<i></i>
</li>
<li class="memu_item">
<a href="#"> 共性化妆 </a>
<a href="#"> 清洁用品 </a>
<a href="#"> 宠物 </a>
<i></i>
</li>
<li class="memu_item">
<a href="#"> 鞋靴 </a>
<a href="#"> 箱包 </a>
<a href="#"> 珠宝 </a>
<a href="#"> 奢饰品 </a>
<i></i>
</li>
<li class="memu_item">
<a href="#"> 静止户外 </a>
<a href="#"> 钟表 </a>
<i></i>
</li>
<li class="memu_item">
<a href="#"> 汽车 </a>
<a href="#"> 汽车用品 </a>
<i></i>
</li>
<li class="memu_item">
<a href="#"> 母婴 </a>
<a href="#"> 玩具乐器 </a>
<i></i>
</li>
<li class="memu_item">
<a href="#"> 食品 </a>
<a href="#"> 酒类 </a>
<a href="#"> 生鲜 </a>
<a href="#"> 特产 </a>
<i></i>
</li>
<li class="memu_item">
<a href="#"> 医药保健 </a>
<i></i>
</li>
<li class="memu_item">
<a href="#"> 图书 </a>
<a href="#"> 音箱 </a>
<a href="#"> 电子书 </a>
<i></i>
</li>
<li class="memu_item">
<a href="#"> 彩票 </a>
<a href="#"> 旅行 </a>
<a href="#"> 充值 </a>
<a href="#"> 票务 </a>
<i></i>
</li>
<li class="memu_item">
<a href="#"> 理财 </a>
<a href="#"> 众筹 </a>
<a href="#"> 白条 </a>
<a href="#"> 保险 </a>
<i></i>
</li>
</ul>
</div>
</div>
服务模块
此处用到精灵图技术
<div class="mod-server">
<ul class="clearfix">
<li>
<i class="mod-server-icon mod-server-zheng"></i>
<div class="mod-server-title">
<h5> 副品保障 </h5>
<p> 副品保障 提供发票 </p>
</div>
</li>
<li>
<i class="mod-server-icon mod-server-ji"></i>
<div class="mod-server-title">
<h5> 急速物流 </h5>
<p> 急速物流，急速送达 </p>
</div>
</li>
<li>
<i class="mod-server-icon mod-server-bao"></i>
<div class="mod-server-title">
<h5> 无忧售后 </h5>
<p> 7 天无理由售后 </p>
</div>
</li>
<li>
<i class="mod-server-icon mod-server-te"></i>
<div class="mod-server-title">
<h5> 特色服务 </h5>
<p> 私人订制家电服务 </p>
</div>
</li>
<li>
<i class="mod-server-icon mod-server-bang"></i>
<div class="mod-server-title">
<h5> 帮忙核心 </h5>
<p> 你的购物指南 </p>
</div>
</li>
</ul>
</div>
<!-- mod-server end -->
详情页及注册页
面包屑导航
crumb_wrap 面包屑导航：由 a 组成
产品介绍模块
- 1 号盒子为大盒子 命名为 product_intro（产品介绍模块）不要给高度
- 2 号盒子为预览包 preview_wrap 左浮动
- 3 号盒子为产品具体模块 itemInfo_wrap 右浮动 不要给高
产品细节模块
- 大盒子为 product_detail 模块 不要给高度 记得革除浮动
- 1 号盒子 aside 侧边栏模块 不要给高度 左浮动
- 1 号盒子 detail 详情模块 不要给高度 右浮动
aside 布局
- 1 号盒子 命名为 tab_list 给高度就好了，外面 放 ul 和 li 留神这是 tab 栏切换布局
- 2 号盒子 命名为 tab_con 外面还蕴含 很多个 ul.item 和 下面的 tab_list 外面的 li 一一对应。
registerarea 布局
- 次要应用 lable 标签 input span 标签
- 实现注册应用的是 submit 按钮
- 留神表单域
进度条
html
<div class="progress">
<div class="bar-in"></div>
</div>css
.sk_goods_progress .progress {
display: inline-block;
width: 130px;
height: 12px;
border: 1px solid #b1191a;
border-radius: 6px;
vertical-align: middle;
}
.progress .bar-in {
width: 87%;
height: 12px;
background-color: #b1191a;
}
源码：pan.baidu.com/s/1IqD9Glj2…
正文完
