网站的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时,盒子里的内容会被挤进去,但是盒子本身不会变
一般多给的是高度,似实际情况而定。