品优购

首页

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

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

服务模块

此处用到精灵图技术

详情页及注册页

面包屑导航

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

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…

品优购

首页

Classname命名规范

项目文件夹

样式文件的分类

favicon图标

网站优化三大标签

title:网站标题

Description:网站内容

keywords：网站关键字

字体图标

字体图标的优点

字体图标的使用流程

下载兼容性字体包

如何把字体引入html结构中

如何追加新的字体图标

难点

logo部分

优品汇

news部分

下拉菜单

服务模块

正品保障

急速物流

无忧售后

特色服务

帮助中心

详情页及注册页

面包屑导航

产品介绍模块

产品细节模块

aside 布局

registerarea布局

进度条

你可能感兴趣的:(css)