品优购电商项目学习一(头部界面)

设计目标

• 保证浏览器IE7以上，火狐，360，chrome等。
• 熟悉CSS+DIV布局，页面的搭建工作
• 了解电商网站的布局模式
• 为后期品优购移动端做铺垫

思考

• 开发工具sublime、photoshop、主流浏览器
• 技术栈：HTML结构+CSS技术 布局

目标

• 能会引入ico图标
• 可简单看懂优化三大标签
• 能使用字体图标
• 能说出css熟悉书写顺序

代码规范

HTML规范：

• DOCTYPE声明。
• HTML5规范
• UTF-8并且中文zh-CN
• 属性用双引号
• 大于号和小于号用&gt
• 代码缩进四个空格
• 段落元素内部只嵌套内联元素
• 用JPEG格式，小于200kb
• 不使用ID选择器。

CSS规范：

• 顺序为布局定位属性、自身属性、文本属性、其他属性。
• 命名规范：项目名字pinyougou，脚本img，脚本js，样式文件夹css。
• 类名：必须以字母开头且小写。如.nav_top。不用广告词作为类名，不用敏感词。

前期准备工作

实现结构和样式相分离的模式
把公共的放入同一个文件夹

标题

品优购-综合购物网站-正品低价、品质保障、轻松购物

网站说明

<meta name="description" content="专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货">

字体图标

代码

<link rel="shortcut icon" href="pin.ico">

关键词

    <meta name="keywords" content="家用电器,电脑办公,手机,图书,团购,金融,我的购物车">   

logo优化

• logo优化：点击logo回到第一个界面（index.html)。
• 放一个h1里面的a和父亲一样大，并且转化为块元素。因为a没有大小。
• 在h1写一个文字。目的：搜索引擎认为这个很重要。但是不现实出来。
• 文字偏离盒子，然后溢出隐藏。这样就看不见了。text-indent: -999px。overflow: hidden。
• 京东隐藏h1做法：font-size=0
• 鼠标点击后显示名字：d

        <div class="logo">
             <h1>
                 <a href="index.html" title="品优购">品优购</a>
             </h1>
        </div>
    //====================
    /* a需要大小，和父亲一样大 */
    overflow: hidden;
    display: block;
    width: 175px;
    height: 56px;
    background: url(../img/logo.png) no-repeat;
    text-indent: -999px;
}

购物车

• div里面一个div存购物车
• 输入文字
• 一个 i 输入8，改变line-height让8上去，否则文字大小和盒子一样大。

.count{
    position: absolute;
    top: 0;
    left: 100px;
    /* 应该是左侧对齐，才能往右走 */
    background-color: #e60012;
    height:14px;
    padding: 0 3px;
    /* 让8上去，否则行高默认父亲行高34px*/
    line-height: 14px;
    color: #fff;
    border-radius: 7px 7px 7px 0;
}