html图片分享功能实现原理,HTML与CSS中的,链接与图像个人分享

链接与图像

链接元素

< a >元素 - 表示链接元素

作用 - 从当前html页面跳转到指定html页面

属性

href - 设置指定跳转html页面的路径

路径分类

相对路径 - 相对于当前html页面的路径

绝对路径 - 访问的路径地址不变化

示例代码:

他是链接

他也是链接

百度

效果显示图:

链接元素样式

通过CSS可以改变链接元素样式

示例代码:

a{

color: cyan;

text-decoration: none;

}

a:hover{

/* 设置鼠标样式 */

cursor: default;

text-decoration: underline;

}

我是谁?你是链接!

链接元素的属性

链接元素也可以实现Email链接效果 - 前提是必须配合当前电脑中的邮箱软件共同使用

示例代码:

a{

margin-left: 200px;

font-size: 48px;

line-height: 200px;

color: cyan;

}

点开有惊喜

点开吓死你

email

效果显示图:

锚点

所谓锚点就是点击指定链接回到之前设置的元素那里

< a >元素实现锚点功能

设置href属性值为 "#id属性值" 格式就行

示例代码:

往下看

看完回去吧

效果显示图:

下载功能

注意: 下载功能是HTML5新增的download属性可以实现a元素的下载功能

< a >元素实现下载功能

如果默认使用href属性指定下载文件路径的话 -> 实现跳转到指定文件

如果浏览器能识别该文件类型的话 -> 直接打开该文件

需要使用HTML5新增的download属性实现< a >元素的下载功能

download属性的值 - 表示下载文件的名称(不一定是原文件名称)

示例代码:

下载图片

动态伪类选择器

注意: 设置input时需要先去除浏览器默认的边框样式才能重新设置

示例代码:

/* 字体颜色 */

a:link{

color: #33FF33;

}

/* 鼠标悬停 */

a:hover{

color: cyan;

}

/* 按住不松手的时候 */

a:active{

color: yellow;

}

/* 跳转完成后回来的颜色 */

a:visited{

color: olivedrab;

}

/* 获取焦点 - 就是一闪一闪的小竖杠 */

input:focus{

border: 2px solid mediumspringgreen;

outline: none;

}

进去瞅瞅

效果显示图:

图片元素

元素 - 空元素

属性

src - 设置引入指定图片的路径

alt - 设置如果图片没有正确显示时的文本提示内容

改变图片显示的大小 - 保持原图片宽度和高度的比例(只设置宽度或高度)

元素的属性 - width和height(不常使用)

CSS的属性 - width和height(建议使用这种方式)

示例代码:

img{

width: 450px;

}

背景图片

引入背景图像的情况:

如果引入图片大于当前HT如果引入图片小于当前HTML页面 - 重复出现(铺满整个页面)ML页面 - 图片会显示不完整

如果引入图片小于当前HTML页面 - 重复出现(铺满整个页面)

示例代码:

body{

background-image: url("imgs/dalv.jpg");

}

效果显示图:

平铺方式

注意: 浏览器默认是平铺整个浏览器的

示例代码:

/*body {

background-image: url("imgs/wolongxueyuan.png");

!*

背景图像的平铺方式：

* repeat - 默认值，表示水平方向与垂直方向平铺

* repeat-x - 表示水平方向平铺

* repeat-y - 表示垂直方向平铺

* no-repeat - 表示不平铺

* space - 水平方向平铺(根据页面的宽度进行均匀分配)

*!

background-repeat: no-repeat;

!*

背景图像的定位 - 水平方向和垂直方向

* 水平方向 - left、center和right

* 垂直方向 - top、center和bottom

*!

background-position: center right;!* 水平 垂直 *!

}*/

div{

width: 800px;

height: 600px;

/* 边框 */

border: 1px solid black;

/* 引入背景图片 */

background-image: url("imgs/dalv.jpg");

/* 背景重复 - 不重复 */

background-repeat: no-repeat;

/* 背景定位 - 控制背景图片的位置 */

background-position: 210px 100px;

/* 背景大小 - 控制背景图片大小 */

background-size: 260px 260px;

}

效果显示图:

背景关联

备注: 浏览器默认背景图片跟随页面滚动

示例代码:

body{

height: 5000px;

/* 引入背景图片 */

background-image: url("imgs/dalv.jpg");

/* 控制背景图片不重复 */

background-repeat: no-repeat;

/*

设置背景图片是否跟随页面滚动

* 浏览器默认是滚动

*/

background-attachment: fixed;

}

一花一世界,一叶一孤城,我是谁?我在哪?我在干什么?

效果显示图:

精灵图

精灵图又叫雪碧图

由于页面中需要引入多个背景图像 -> 将HTML页面加载变慢

所以将多个背景图像整合成一张图片 -> 只需要引入一次

利用background-position属性 - 设置背景图像的定位位置 - 实现现实背景图像哪个部分

精灵图分析图:

绝对路径与相对路径

相对路径 - 相对于当前html页面的路径

绝对路径 - 访问的路径地址不变化

分析图: