CSS笔记(美化超链接)
一、定义超链接
1、超链接分类
1)内部链接(链接的目标在同一网站中,直接相对路径就可以链接的,URL不需要指定协议和互联网位置)
2)外部链接(一般为外部网站目标,需要指定协议和网站地址)
3)锚点链接(锚标记后缀“#”)
2、<a>
标签
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
使用target属性并取值“_blank”可以在点击链接后在新的标签页中显示百度首页
3、定义锚点链接
任何被赋值了ID值的元素都可以作为锚点标记
4、定义不同目标的的链接
超链接指向的目标对象可以是网页,还可以是一个图片、一个电子邮件、一个文件、FTP服务器,甚至是一个应用程序,也可以是一段javascript脚本
<a href="javascript:alert("谢谢关注,投票已结束。")">我要投票</a>
5、定义热点区域
定义热点区域需要<map>
和<area>
配合使用
<map>
定义热点区域。包含必须的ID属性,定义热点区域的ID,或者定义可选的name属性,也可以作为句柄。
<img>
中的usemap属性可引用<map>
中的id或name属性(根据浏览器),所以应同时向<map>
添加id和name属性,且设置相同的值
<area>
定义图像映射中的区域,area元素必须嵌套在<map>
标签中。改标签包含一个必须设置的属性alt,定义热点区域的替换文本。还包含其他可选属性coords(坐标值)、href、nohref、shape(区域形状)、target(规定何处打开href指定的)
(建议使用可视化设计视图)
6、定义框架链接
H5不再支持frameset框架,但是仍然支持iframe浮动框架的使用,实现窗口中再创建一个窗口
<iframe src="URL"></iframe>
二、定义超链接样式
1、伪类
伪类就是根据一定的特征对元素进行分类,而不根据元素的名称、属性或内容。
与超链接相关的基本伪类:link、:visited、:hover、:active、:focus,且定义的先后顺序有讲究
2、定义鼠标样式
使用CSS的cursor属性可以定义鼠标在指定对象上的样式,取值如下:
auto:基于上下文选择应该显示什么光标
crosshair:十字光标
default:基于平台的默认光标,通常渲染为一个箭头
pointer:指针光标,表示一个超链接
move:十字头光标,表示对象可移动
e-resize、ne-resize、nw-resize、n-resize、se-resize、sw-resize、s-resize、w-resize:表示正在移动某个边
text:表示可以选择文本,I型光标
wait:表示程序正忙,需要用户等待,通常渲染为手表或沙漏
help:光标下的对象包含有帮组内容,通常渲染为一个问号或一个气球
<uri>URL
:自定义光标类型的图标路径
CSS笔记(美化超链接)相关推荐
- CSS笔记 —— 美化网页
本篇博客是根据B站up@遇见狂神说 的视频以及W3school官网文档整理的笔记,里面会有一些视频的截图.代码和官网的概念,以及我个人的注释笔记,代码例子等. 全篇博客包括代码均为自己手打,结果截图均 ...
- 微信小程序开发笔记二(WXSS和CSS样式美化)
微信小程序开发笔记二(WXSS和CSS样式美化) 一.CSS基本知识 1.Class选择器的定义 2.ID选择器的定义 3.ID选择器和class选择器的区别 4.CSS中设置颜色 5.CSS中的文本 ...
- CSS设置按钮式超链接
CSS设置按钮式超链接 网页上有很多超链接都是按钮的形式,这些都使用了各种图片,这里通过CSS普通的属性实现按钮的效果. 首先,建立最简单的HTML页面,代码如下: <table width=& ...
- 慕课学习史上最全零基础入门HTML5和CSS笔记
慕课学习史上最全零基础入门HTML5和CSS笔记 Html和CSS的关系 学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的 ...
- HTML与CSS笔记
HTML与CSS笔记 一.HTML: IDE快捷键: tab:补全标签 ctrl+/:快速注释 常用标签: <h1.h2--h6:六级标题 <p:段落 <strong:粗体 < ...
- CSS a控制超链接文字样式
超链接的代码 <a href="http://www.divcss5.com/" target="_blank" title="关于div cs ...
- bluePen – 使用在线 CSS 编辑器美化你的网站
BluePen 是一款非常强大的样式编辑工具,甚至可以轻松地安装在一个动态的网站中.一旦你已经安装了它,你就可以在任何时间,任何地方修改样式表,一切修改将实时更新到您的浏览器(但不是线上网站),在按下 ...
- html5 居于页面中心,css笔记:如何让一个div居于页面正中间
如何让一个div居于页面中间,我今天说的是让一个div水平居中同时垂直居中,而不是简单的top:50%,left:50%.当然,我们就按一开始的思路写一下:top,left属性都设为50%,看一下效果 ...
- CSS设置动态超链接
CSS设置动态超链接 HTML中,超链接是通过标记<a>实现的,具体的地址使用标记<a>的href属性. <ahref="http://blog.csdn.ne ...
- html文字超链接不让变色,css不让超链接变色怎么设置?
[相关推荐:css在线手册] 链接有四个状态a:link - 正常,未访问过的链接 a:visited - 用户已访问过的链接 a:hover - 当用户鼠标放在链接上时 a:active - 链接被 ...
最新文章
- LeetCode 799 JavaScript
- 在循环中正确找到对应DOM元素的索引
- 「SAP技术」SAP SD微观研究之根据销售订单查询到该订单发货的批次
- 解决svn Authorization failed错误
- MySQL索引的查看创建和删除
- 数据库:分布式事务的解决方案
- KindEditor 4 输入框限定字数
- Maven精选系列--eclipse各种操作
- Http代理抓包 Fiddler与Charles
- java并发编程(10)-- 线程池 底层原理
- Web前端-html页面-网易注册表单,美化及时验证效果
- Python自动化办公之Word,超全总结【建议收藏】
- 求Sn=a+aa+aaa+…+aa…aaa(有n个a)之值,其中a是一个数字,为2。 例如,n=5时=2+22+222+2222+22222,n由键盘输入。...
- MacBook邮件登陆163邮箱,解决无法验证账户名或密码的问题
- python取数组最后一个元素_python数组最后一个元素
- 【愚公系列】华为云GaussDB(for Redis)的体验流程|【这次高斯不是数学家】
- 用序列到序列和注意模型实现的翻译:Translation with a Sequence to Sequence Network and Attention
- 用python爬取小说章节内容
- 【Linux 内核】Linux 内核源码根目录下的文件 ( .clang-format | COPYING | CREDITS | Kbuild | Kconfig | MAINTAINERS )
- 【分享】ArcGIS实现分子分母等标注实用技巧
热门文章
- 嵌入式的时间概念:GMT,UTC,CST,DST,RTC,NTP,SNTP,NITZ
- 发布一款新闻资讯软件(android版)
- Nacos 常见问题及解决方法
- mybatis源码解析(一)
- Batchnorm 和Layernorm 区别
- wappush系统框架
- 北理工大学计算机专硕学硕,计算机2年制专硕越来越少,生活终于对我下手了吗?...
- USB 协议整理 九:USB 协议调试工程说明
- python join函数报错_python中join()函数的使用方法
- js判断数组,对象,是否为空,是否含有某个值,判断数组中对象是否有某个值