HTML+CSS学习Day10笔记

Day10笔记

一、锚点

命名锚点链接的应用

定义：
是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。

命名锚点的作用：在同一页面内的不同位置进行跳转。

制作锚标记：

1)给元素定义命名锚记名

语法：<标记 id="命名锚记名称"> </标记>

2)命名锚记连接

语法：<a href="#命名锚记名称"></a>

html结构：

<a href="#hz">孩子</a>
<a href="#scc">神戳戳</a>
<a href="#zrc">猪儿虫</a>
<a href="#rnb">日脓包</a>
<a href="#ped">耙耳朵</a>
<div id="hz">孩子</div>
<div id="scc">神戳戳</div>
<div id="zrc">猪儿虫</div>
<div id="rnb">日脓包</div>
<div id="ped">耙耳朵</div>

css语言：

div{
	height:600px;
}
#hz{
	background-color:red;
}
#scc{
	background-color:yellow;
}
#zrc{
	background-color:orange;
}
#rnb{
	background-color:blue;
}
#ped{
	background-color:green;
}

注意点：锚点作用是在同一页面里不同的位置进行跳转这是它的原理，所以当咱们把溢出隐藏属性设置在最大的元素上面的时候，会导致当点击了按钮后大盒子的位置会发生跳转，所以按钮被隐藏。这个隐藏属性只能设置在内容区域

二、序列选择器

序列选择器：

1、它是伪元素选择器，当咱们通过选择器选取元素的时候相当于css默认给标记设置了元素

2、语法：

   nth-child() 表示选中父元素中的第几个子元素

3、注意点：选中父元素中的子元素的时候，它要求不能被其他类型的元素给隔开，隔开的话就选不中了。建议大家在使用的时候在元素的内存使用

三、图片整合技术

图片整合技术：
1、名称：css精灵、雪碧图、css sprite – 图片整合技术

   将导航背景图片，按钮背景图片等有规则的合并成一张背景图，然后用background-position来实现背景图片的定位技术

2、图片整合的优势
   1）通过图片整合来减少对服务器的请求次数，从而提高页面的加载速度；
   2）通过整合图片来减少图片的体积。

​ 实现图片整合的方法和技巧

1、使用ps进行小图片整合；
2、使用相关软件来进行操作。

滑动门的概念

1、滑动门是一个形象的称呼，滑动门技术就是用：hover伪类，滑过导航栏时使用导航栏内图片发生变化的一种技术

2、通过滑动门技术，可以使css设计出来的导航菜单兼具传统布局的图像效果，与css布局的高效扩展性

浏览器的请求网站资源的过程：

1、http|https 超文本传输协议，规定如果上网

2、请求过程

   => 当咱们在浏览器的地址栏输入一个网址的时候并回车，向服务器发了一条请求，发送报文
   
   => 服务器接收到请求，要一个判断，看服务器里面有没有你要请求的资源
   
   => 无论有还是没有都会向浏览器返回请求，如果有就返回资源，如果没有返回的是一个提示信息，例如：404路径错误、你的网页走丢了。。。
   
3、咱们通过分析得知，客户端和服务端要进行通信，需要发送大量请求，服务器也响应请求，无论发送还是返回都需要耗费咱们网络资源和网络带宽。需要针对性做一些网络优化，让咱们网站访问速度更快些

4、服务器返回的资源，其实就是html、css、js、图片等等资源，其中图片资源加载的过程中比较慢的

5、通过图片整合技术可以减少图片体积，减少对服务器的请求次数，从而提高加载速度