码迷,mamicode.com
首页 > Web开发 > 详细

【静态页面架构】CSS之链接和图像

时间:2020-06-01 12:18:32      阅读:62      评论:0      收藏:0      [点我收藏+]

标签:没有   小图标   mail   back   20px   默认   获取   height   打开   

CSS架构

一。链接:

  1. 链接元素:通过使用a元素的href属性设置跳转到指定页面地址
  <style>
        a{
            color: blue;
            text-decoration: none;
        }
        a:hover{
            cursor:default;
            text-decoration: underline;
        }
    </style>
</head>
<body>
<a href="#">这是个链接</a>
</body>
  1. 绝对路径与相对路径:
  • 绝对路径:以域名开头,到域名后面可指定具体页面或资源的路径
  • 相对路径:在当前页面与资源处在一个目录就是相对路径
  • 当前页面与资源在子级目录,就是../目标文件
  • 当前页面与资源在父级目录,就是目录文件名/目标文件名
  • 当前页面与资源与父级目录处在同一个目录,就是..目录文件名/目标文件名
<body>
<a href="4抖音风格文本.html">这是抖音链接</a>
<br><!--<a>
        target表示当前链接打开方式
        _self:为默认值,表示打开当前窗口打开页面
        _blank:表示在新的窗口(页签)打开页面-->
<a href="mailTo:qh52562500@163.com">我的email</a>
<!--用法:配合hrf属性值是以"mailTo:"开头的
    问题 - 必须配合当前电脑中的默认的邮箱软件使用-->
</body>
  1. 锚点:通过a元素的href属性与其他元素的ID属性配合,实现锚点效果
<body>
<a id="top">这是顶部</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!--目标不一定是<a>元素,也可以是别的元素-->
<a href="#top">回到顶部</a>
<!--a元素实现锚点
    设置href属性值为#id属性值-->
</body>
  1. 下载功能:以a元素的Download属性链接,用做下载到本地文件
<body>
<a href="imgs/a.jpg" download="小姐姐.jpg">下载图片</a>
<!--使用href属性指定下籽文件路径,调转到指定文件
    需使用HTML5新增的Download属性实现下载
    也可自己设置原文件名-->
</body>
  1. 动态为类选择器:
<style>
        a:link {
            /* 链接元素默认的文本颜色是蓝色 */
            color: lightcoral;
        }
        a:hover {
            /* 链接元素默认文本颜色是无变化的 */
            color: lightskyblue;
        }
        a:active {
            /* 链接元素默认的文本颜色是红色的 */
            color: yellowgreen;
        }
        a:visited {
            /* 链接元素默认的文本颜色是深紫色的 */
            color: darkgreen;
        }

        input:focus {
            border: 1px solid lightcoral;
            outline: none;
        }

    </style>
</head>
<body>
<a href="04_抖音风格文本.html">这是一个链接</a>
<!-- 获取焦点 -->
<input type="text">
</body>

二。图像:

  1. 图片元素:以SRC引入图片的路径
<style>
        img{
            width:560px;
        }
    </style>
</head>
<body><!--img元素为空元素
           src - 设置引入指定图片的路径
      * alt - 设置如果图片没有正确显示时的文本提示内容
    * 改变图片显示的大小 - 保持原图片宽度和高度的比例(只设置宽度或高度)
      * 元素的属性 - width和height
      * CSS的属性 - width和height(建议使用这种方式)
 -->
<img src="imgs/a.jpg"<!--引入图片--> alt="小姐姐">
</body>
  1. 背景图像:以background-image属性引入一个或多个图像对页面进行显示
<style>
        body{
            background-image: url("imgs/wolongxueyuan.png");
            /*引入背景图片*/
        }
        /*如裹引入图片大于页面,图片会显示不完整
          如果引入图片小于页面,图片会重复显示(铺满整个页面)*/
    </style>
</head>
<body>
<a href="4抖音风格文本.html"><img src="imgs/b.jpg" width="300px"></a>
<!---->
</body>
  1. 平铺方式:background-repeat属性定义页面背景图像的平铺方式
<style>
        div {
            width: 800px;
            height: 600px;
            border: 1px solid black;
            background-image: url("imgs/wolongxueyuan.png");
            background-repeat: no-repeat;
            /*background-position: top right;*//* 垂直 水平 */
            background-position: 50px 100px;

            background-size: 360px 360px;
        }
        /*背景图像平铺方式
        repeat为默认值;页面水平和垂直方向平铺
        repeat-x表示水平方向平铺
        repeat-y表示垂直方向
        no-repeat表示不平铺

        背景图像定位-水平和垂直方向
        水平方向-left(左)center(居中)right(右)
        垂直方向-top(上)center(居中)bottom(下)*/
    </style>
</head>
<body>
    <div></div>
</body>
  1. 背景关联:background-attachment属性用来设置背景图像是固定的还是跟页面滚轮拖动的
<style>
        body{
            height:2000px;/*设置高*/
            background-image: url("imgs/wolongxueyuan.png");/*引入背景图片*/
            background-repeat: no-repeat;/*不平铺引入的背景图像*/
            background-attachment: fixed;
        }
    </style>
</head>
<body>
<h2>爱新觉罗</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</body>
  1. background属性:用来设置多个背景属性的简写属性
  2. 精灵图(雪碧图):将一些小图标合成一个图片,进行移动抠图
<style>
        div {
            width: 20px;
            height: 20px;
            /*border: 1px solid black;*/
            /*
                
                * 由于页面中需要引入多个背景图像 -> 将HTML页面加载变慢
                * 将多个背景图像整合成一张图片 -> 只需要引入一次
                * background-position属性
                * 设置背景图像的定位位置 - 实现现实背景图像中其中一个小图标
             */
            /*background-image: url("imgs/toolbars.png");
            background-repeat: no-repeat;
            background-position: 0 -50px;*/

            background: url("imgs/toolbars.png") no-repeat 0 -50px;
        }

    </style>
</head>
<body>
<div></div>
</body>

【静态页面架构】CSS之链接和图像

标签:没有   小图标   mail   back   20px   默认   获取   height   打开   

原文地址:https://www.cnblogs.com/10manongit/p/13024158.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!