使用ico图标的添加
首先把favicon.ico这个图标放到根目录下。
在HTML里面，head之间引入代码。
<!-- 引入facicon.ico网页图标 -->
<link rel="shortcut icon" href="bitbug_favicon.ico" type="image/x-icon"/>
注意：
- ico是显示在浏览器中的网页图标，
- 是图标不是图片，
- 位置是放在head位置中间，后面的type="image/x-icon"可以省略，
- 为了兼容性，把图标放在根目录下
自己制作ico图标
- 首先把我们想要的切成png格式
- 要把图片转化为图标，借助于第三方的网站:http://www.bitbug.net/
比特虫网站
网站优化的三大标签
title,descripitoin,keywords.
标题 首页标题：网站名（产品名）- 网站的介绍
例如：小米商城-小米5s、红米Note4、小米笔记本官方网站
网站说明
Description作为网站的总体业务和主题概括，多采用“我们是…”我们提供…
等等。不能超过120个汉字。
<!-- 网站说明 -->
<meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
keywords
<!-- 关键词 -->
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" />
字体图标
优点： 可以做出跟图片一样可以做的事情，改变透明度，旋转度等。
但本质是文字，可以随意改变文字颜色阴影等。
几乎支持所有的浏览器
移动端设备必备
当设计人员给我们svg文件的时候，我们需要转换成我们页面能使用的字体文件，而且需要生成的是兼容适合各个浏览器的。
推荐网站：http://icomoon.io 更加丰富，但是是国外的网站有点慢
http://www.iconfont.cn/ 阿里字体库
步骤：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@font-face {
/*1. 这个字体名称要注意 icomoon*/
font-family: 'icomoon';
/*2. 一定要注意路径的问题*/
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;
}
div,
span {
font-family: 'icomoon';
}
</style>
</head>
<body>
<span></span>
<div></div>
</body>
</html>
追加字体图标时，用import icons打开原来的json文件从新下载替换就好了
1
之前的案例中，导航栏中间加竖线，因为li中文字的内容不一样所以不能给宽就用padding值撑开，而竖线有两种方法，一种是直接用‘|’，一种是加一个外边框。而此案例中时用li，把li设置width和height，然后添加一背景颜色，再给li添加外边距，上，左，右，下，使得中间有空隙并且竖线显示出来。
2
添加小图标一般用i标签，因为i是icon的首字母，而i是倾斜的意思，但不需要担心因为我们在初识化的时候已经对i和em设置了属性，使得倾斜的标签不再倾斜。
3
…/fonts/icomoon.eot?7kkyc2
路径：先翻出本文件夹，再去其他文件夹，翻出用…/
4
行内元素没有上下外边距。
行高等于高，垂直居中；行高小于高，文字偏上；行高大于高文字偏下。
5 logo很重要
logo用背景图片。
1.logo放一个h1标签**,h1仅在logo中使用，为了提权**，告诉搜索引擎，这个地方很重要
2.h1里面放一个链接，可以返回首页的，给a链接一个大小和logo 的背景图片。
3.链接里面要放文字，两种处理方法：
淘宝做法：text-indent:-999px;让文字负缩进，这样就在盒子外面，但是网页缩小的时候能看到。再用 overflow:hidden; 溢出隐藏。把文字切掉
京东做法：font-size:0;
4.鼠标放到logo上有文字显示
行内快元素，表单 元素与表单元素之间势必有空白，想要去除空白要用float。
取消input轮廓线
outline: none;
a是行内元素，只有左右外边距没有上下外边距
轮播图不能直接插入图片
要ul>li>a中放图片，因为轮播图，要用js效果，所以不能直接插入图片
当li的小盒子超过父盒子一行装不下4个时，用增加ul盒子的宽度的方法，但可能有多余的部分溢出，再用overflow:hidden；截下去。
小图标一般用i标签
给父元素添加overflow: hidden;能解决子元素引起的外边距塌陷问题（重要）
父亲没有高，孩子浮动，下面还有东西，所以必然会产生问题，这时要清除浮动
固定定位
先走浏览器的一半，在往反方向走版心的一半，再走盒子的宽度。
有Inline-block的地方，经常有vertical-align:middle;目的是为了让图片和文字垂直居中对齐。
一个盒子写了text-align:center;那么他里面的行内元素和行内块元素均可以水平居中。
获得焦点元素
:focus 伪类选择器用于选取获得焦点的元素。我们这里主要针对的是 表单元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input {
outline: none;
}
input:focus {
background-color: pink;
border: 1px solid red;
height: 20px;
}
</style>
</head>
<body>
<input type="text">
</body>
</html>
面包屑导航
汉泽尔和格蕾尔，被后妈带到森林里想抛弃，兄妹在进入森林之前，哥哥在进入森林前沿途撒上面包屑，以便根据这些面包屑找到回家的路。
主要应用于，产品页部分。
父亲没有宽度的情况下，没法浮动，只能用定位确定位置
在不确定内容多少的情况下，而且以后还会改变，那么就不能用br
行内块，元素之间有空隙，这是与float最大的不同之一。在元素之间本来就有缝隙时，行内块更方便。
超出的文本用省略号显示
/*多余部分用省略号显示*/
/*首先强制一行内显示*/
white-space: nowrap;
/*把多余的部分切掉*/
overflow: hidden;
/*超出的文字省略号显示*/
text-overflow: ellipsis;
表单布局用ul>li，内用行内块元素即可
label,for,id
当label中的for的值与Input中的id值相等时，当点击label时，光标自动定在input里
扫一扫
2904
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
