超链接和背景图片和雪碧图

一：超链接

1. target属性

   target="_self" /*在当前标签页打开*/
   target="_blank" /*在新的标签页打开*/
   

2. 路径

   • 相对路径：是相当于当前资源的位置，只能用于访问站内资源。

     /*书写格式*/
     ./路径
     ./表示当前资源所在的目录，必须作为相对路径的开始，可以省略
     ../表示返回上一级目录
     

   • 绝对路径：协议//域名/目录

     列子：http://www/google.com/
     协议：http
     域名：www.google.com
     目录：根目录
     

   • 两种路径比较：

     • 站外资源：绝对路径
     • 站内资源：绝对路径（网站已部署，可省略协议和域名）相对路径

二：背景图片

1. *通配符

2. background-image: url('./../img/bei.jpg');

3. 控制图片的各种属性

   • background-repeat: ;

     	/* 控制背景重复 */
         /* 默认值是重复 */
         background-repeat: no-repeat;
         /* x轴不重复 */
         background-repeat: repeat-x;
         /* y轴不重复 */
         background-repeat: repeat-y;
     

   • background-size: ;

     	 /* 背景图片的尺寸 */
         /* px */
         background-size: 300px 300px;
         /* % 百分比 相对于盒子的大小*/
         background-size: 60% 60%;
     	/* 只写一个值时第二个值自动 */
         background-size: 200px auto;
     

   • background-position: ;

     background-position: 20px 30px;
     

4. 雪碧图（图片拼合技术 sprite）

   • 1. 定视口
     2. 插图
     3. 位置

   • /* 头部 */
     /* 定视口 */
     /* 插图 */
     /* 调位置 */
     i{
         /* 把盒子类型改为行内块 */
         display: inline-block;
         /* 定视口 */
         width: 21px;
         height: 21px;
         text-align: center;
         /* margin-top: 10px; */
         /* border: 1px so; */
         background-image: url('./../img/icon.png');
         
     }
     

三：其他标签

1. <i></i> /*斜体*/
   <em></em> /*斜体*/