1.<title>中添加 图片标志

第一步:保存图片为.ico格式；

第二步：<link rel="shortcut icon" href="路径">.

效果如图：

在<title>中<img>是无效的

2.鼠标放上去变成手

cursor:pointer

cursor还有其他，如图：

3.hover的使用

id名+空格+元素标签名+冒号+hover{}。

4.添加小图标

(font-awesome)

第一步：在这个网站下载一个文件把他拖进去你要写的文件里

第二步：在这个网站搜到你要找的图表的代码，直接放到要插入的地方：

注意：图标是可以设置样式的，可以改变它的颜色

在这里一个要注意的就是：有的元素，比如<select>里面直接跟噩的是<option>就是有的元素里面是不能再放其他元素的，这一点以后要留意一下。

第二步：<link rel="stylesheet"(这个是固定的）,herf="路径">

这里要说明的是路径问题

5.路径问题

../../文件所在目录的上上级目录。    

../表示当前文件所在层级的上一层级。

./表示当前文件所在的层级。

/表示根目录。

那个 ./ 这个用不用效果是一样的因为是当前文件， ../ 就是html文件要引用路径然后图片在html文件的上一级， ../../ 就是图片在html文件上上一级。然后 / 这个就是根目录，根目录就是从所在文件夹下的磁盘开始磁盘加冒号在加/开始一步步的写路径。

举个栗子：

打开新建文件夹2之后是下面的文件

打开文件夹liuqian之后是这个文件

lili.html文件要用7.jpg的方法

再举个栗子：

打开新建文件夹之后是这个文件

li.html要用1.jpg

6.定位问题（非常重要）

（1）首先,搞清楚定位是相对于谁定位，相对于父元素还是其他元素，甚至还是浏览器窗口。

relative

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

好了，上面那是官方语言，用自己的理解来说：

relative：（这个元素“相对于”它的起点进行移动，即元素的初始位置）相对定位，用了这个之后并不影响下面元素的的位置，该在哪里还在那里

就是下面的<div>元素里面的东西还在自己的位置，这是相对定位

absolute：（相对于最近的已定位祖先元素（最近的 position 不是 static 的祖先建立），如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。）绝对定位，用这个，下面的元素受到影响，就像没有这个元素一样，会在他下面显示自己的东西，必须对下面的元素进行浮动清除，

下面的<div>元素忽略它的存在，占据他的位置，并且被它覆盖，这是绝对定位

fixed：固定定位，这个和absolute一样，就是相对于浏览器窗口来定位的。

对于定位的主要问题是要记住每种定位的意义。所以，一定要理解：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。（根据用户代理的不同，最初的包含块可能是画布或 HTML 元素。）

7.z-index元素：

z-index：-1则拥有更低的优先级。

下面的<div>元素显示在了图片的上面

因为，定位会覆盖元素，所以用z-index来决定谁在上面 显示。

8.浮动问题

float：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框（所以设置margin值来操控它）为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

栗子：控制行框浮动于元素周围：添加外边距，因为浮动的的界限是外边框

栗子：假设希望让一个图片浮动到文本块的左边，并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中（就是用一个div包含所有的浮动元素，这样可以为浮动元素设置背景，）

添加空元素来清除浮动

这个问题还有一种方法：给大的div设置左浮动，图片左浮动，p右浮动，最后，clear：both，下面的元素也不会受到影响。

9.搜索框中的字体颜色

css3新特性：

在搜索框里设置color是不起作用的，用如图代码，input前面可以加选择器

10.css3轮播图

html代码，八张轮播图就设置九张图片

为照片设置长和宽

左浮动，无序列表前面的样式去掉

外面的div设置长宽，定位，是为了里面的ul绝对定位相对于外面的div定位，要不然里面的div定位放到页面中就会相对于上一个父元素定位，overflow隐藏浮上去的其他图片，使视觉中只有一张图片，

里面的框，设置总宽度，宽为（图片数+1）倍，设置动画

计算好宽度

最后：感想。

从开始打算的时间是一周半做完这个页面，结果用了三天，第四天早上10.30完成，嘿嘿，（有点小骄傲），哈哈，主要是终于可以开始学js了，比别人都慢了。（发布之后看时间是4天，应该是第五天早上完成，记错啦）（哈哈哈，中间有一天学了js因为要交作业还是三天。。）

写这个页面，很费劲的是轮播图和定位。

轮播图主要是用c3写的，好多功能都木有实现，只是简单地播放，之后学了js还要把点击左右切换加进去，还有下面的小点点切换加进去，还有切换样式，还有鼠标放在上面就不能切换，都加进去。c3我用的太少，要多写一些小动画。自己闲的话，自己搞一下有创意的小dome。

定位，我基本上都用了定位，定位用的太多了，以后一个元素没有在地方上，首先想可以用别的样式吗，可以的话就不用定位。固定定位还没有用过，这次用的全是绝对定位，只是轮播图的时候用了一个相对定位。关于定位还要往深的看。

还有路径问题当时也是弄了好久，回了之后就没什么了，会用路径,以后连入样式<link>s就方便多了

再有就是细节问题，比如这次title中的图片，还有鼠标放上去变成小手，还有小图标等问题，这些问题需要积累，还有好多不常用的元素，慢慢的用它，（在写小dome的时候）记住它，熟悉那些不熟悉的，下来就是选择器，之后慢慢完善那些，把之前选择器那篇完善了。

有个问题：就是绝对定位覆盖上去之后，下面的元素就会不起作用，这个需要再深入了解定位，感觉自己对定位是会用，能把他调到合适的位置，但是不了解定位的精髓，就是除了把他这个元素放到想要的位置，这个定位它还有什么功能，需要深入。

总之，这次写页面感觉还是挺轻松的，跟上次写简书完全不一样，不仅速度，还有质量，这么久了，也算是对自己有点交代，增加一点自信，嘿嘿，不过算法也是我不行的地方，下来就练算法题，算法好一点，心里会更踏实一点。

不好的地方就是定位，还是定位（捂脸），还有就是静态，好多功能都实现不了，抓紧学js实现更多功能。

还有一个不好的地方就是：打开F12，我的页面会乱，可能也是定位的问题吧，要找到这个的问题所在。