品优购项目学习总结（一）

 

网站的ico图标

这个图标就是主页面上面的小图标，与页面的title一起显示的。

图标的引用

<!-- 图标 -->

    <link rel="shortcut icon" href="bitbug_favicon.ico" />

href：值为图标的路径

注意：图标最好要放在项目的根目录下，防止出错

图标的制作 

链接——比特虫在线制作

这个链接可以把切的图（png、jpg等）转化成图标（ico）

 

字体图标

字体图标应用非常广泛，它比较便捷、轻巧。不像图片加载需要请求服务器，字体图标减轻了浏览器和服务器的负担。

定义字体图标

下面这个是在网站上下载好的，详细步骤可以看我的另一篇博客 点这里——字体图标。

@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;

} 

引用字体图标

直接使用，设置字体的样式就是设置图标的样式

.shortcut li i {

    font-family: 'icomoon';

    font-size: 13px;

    line-height: 10px;

}

logo优化部分

h1标签是专门为logo链接标签使用的：是为了提权的，使浏览器知道这个标题很重要。

logo是作为a标签的背景图

a中有文字但是不显示：是为了告诉浏览器这里是什么内容

结构

<!-- logo部分  -->

        <div class="logo">

            <h1><a href="index.html" title="品优购">品优购</a></h1>

        </div>

 样式

/* logo */

 

.header .logo {

    position: absolute;

    top: 27px;

    left: 0;

    width: 175px;

    height: 56px;

}

 

.header .logo h1 {

    text-indent: -9999px;

}

 

.logo a {

    display: block;

    width: 175px;

    height: 56px;

    background: url(../image/logo.png) no-repeat;

}

浮动定位 

在对页面进行布局中，是浮动和定位结合的。

浮动的元素：是在内边距里面排序的

定位的元素：比浮动的权重高

在布局中，给宽度要慎重，当内容不一致时，不设置高度，使用padding撑开。

width的默认值：auto。当不给宽度给padding时，盒子里的内容会被挤进去，但是盒子本身不会变

一般多给的是高度，似实际情况而定。