首页
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
２.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…
发表回复