首页
Classname命名标准
Classname命名标准，类名尽量简短，首字母必须要小写，且单词之间用'_'示意我的项目文件夹
- 我的项目文件夹 ：pinyougou
- 款式图片类文件夹：img
- 产品类图片文件夹 upload
- 字体文件夹 fonts
- 款式文件夹 CSS
- js文件夹 js
款式文件的分类
初始化及原子类文件 base.css 公共款式文件：commen.cssfavicon图标
如何查看网站的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
２.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…