0
点赞
收藏
分享

微信扫一扫

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

dsysama 2022-04-13 阅读 69

一:超链接

  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> /*斜体*/
    
举报

相关推荐

0 条评论