HTML与CSS中的,链接与图像个人分享

elisa.yang 发布于2019-08-02 11:21 / 693人阅读

摘要：链接与图像链接元素元素表示链接元素作用从当前页面跳转到指定页面属性设置指定跳转页面的路径路径分类相对路径相对于当前页面的路径绝对路径访问的路径地址不变化示例代码相对路径的链接文本阴影案例他是链接绝对路径的链接他也

链接与图像 链接元素

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

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

属性

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

路径分类

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

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

示例代码:



他是链接



他也是链接



百度

效果显示图:

链接元素样式

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

示例代码:




我是谁?你是链接!

链接元素的属性

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

示例代码:

    



点开有惊喜
点开吓死你

email

效果显示图:

锚点

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

< a >元素实现锚点功能

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

示例代码:

效果显示图:

下载功能

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

< a >元素实现下载功能

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

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

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

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

示例代码:



下载图片

动态伪类选择器

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

示例代码:




进去瞅瞅

效果显示图:

图片元素

元素 - 空元素

属性

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

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

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

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

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

示例代码:

背景图片

引入背景图像的情况:

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

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

示例代码:

效果显示图:

平铺方式

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

示例代码:

效果显示图:

背景关联

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

示例代码:

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

效果显示图:

精灵图

精灵图又叫雪碧图

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

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

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

精灵图分析图:

绝对路径与相对路径

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

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

分析图:

GPU云服务器云服务器 css与html html与css html与css区别 css与html的区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52927.html

HTML与CSS中的,链接与图像个人分享

摘要：链接与图像链接元素元素表示链接元素作用从当前页面跳转到指定页面属性设置指定跳转页面的路径路径分类相对路径相对于当前页面的路径绝对路径访问的路径地址不变化示例代码相对路径的链接文本阴影案例他是链接绝对路径的链接他也链接与图像链接元素 < a >元素 - 表示链接元素作用 - 从当前html页面跳转到指定html页面属性 href - 设置指定跳转html页面的路径 ...

cocopeak 2019-08-29 16:34 评论0 收藏0
css基础系列

摘要：盒子模型边框，外边距，内部距，内容，宽度。盒子模型和标准盒子模型行内块元素，元素呈现为具有相依特性元素不会被显示。文字基线属性设置元素中文本行高语法长度值百分比浏览器有默认的行高，不同浏览器默认行高不一样。盒子模型： border边框，margin外边距，padding内部距，content内容，width宽度。高度： height: 长度值|百分比|auto 最大高度: m...

SexySix 2019-04-22 16:12 评论0 收藏0
HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

xiaokai 2019-08-01 18:21 评论0 收藏0
HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

CHENGKANG 2019-08-29 14:11 评论0 收藏0
css基础系列

摘要：盒子模型和标准盒子模型行内块元素，元素呈现为具有相依特性元素不会被显示。文字基线属性设置元素中文本行高语法长度值百分比浏览器有默认的行高，不同浏览器默认行高不一样。盒子模型盒子模型的概念高和宽的设置边框的设置内边距的设置外边距的设置盒子的计算元素显示的方式盒子模型： border边框，margin外边距，padding内部距，content内容，width宽度。 ...

shiina 2019-04-23 11:40 评论0 收藏0