web前端学习(六)——HTML5中通过CSS设置超链接及鼠标形状

简介: web前端学习(六)——HTML5中通过CSS设置超链接及鼠标形状

1.CSS中设置超链接


可能大家看着上面这个伪类语法不太好理解,其实它就是我们平时访问某一个网页时,把鼠标放在某个链接上面,然后那个链接就会改变其颜色样式。废话不多说,下面直接上实例代码:👇👇👇


1.1 实例一: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="generator" content="EditPlus®"/>
    <meta name="author" content=""/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <title>超链接下划线</title>
    <style>
      a{color: red; font-size: 16px; text-decoration: none;}    
      a:hover{text-decoration: underline;}
    </style>
  </head>
  <body>
    <a href="https://www.baidu.com">我是一个a标签,悬浮添加下划线</a>
  </body>
</html>

运行结果如下:

1.2 实例二:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>超链接下划线</title>
    <style>
      a{color: black; font-size: 16px; text-decoration: none;}
      a:hover{color: red; text-decoration: underline;}
    </style>
  </head>
  <body>
    <a href="https://www.tencent.com">我是一个a标签,悬浮字体变红并添加下划线</a>
  </body>
</html>

运行结果如下:

1.3 实例三:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>仿京东读书页面</title>
    <style>
      a{color: dodgerblue; font-size: 16px; margin:0 8px; text-decoration: none;}
      a:hover{color: crimson; text-decoration: underline;}
    </style>
  </head>
  <body>
    <a href="https://www.jd.com/">社科经典</a><a href="https://www.jd.com/">文学名著</a><a href="https://www.jd.com/">政治军事</a>
  </body>
</html>

运行结果如下:

 

2.CSS中设置鼠标形状


这里的鼠标形状是通过标签 cursor 来设置的,常见的一些鼠标形状如上图所示。下面我们来看一个实例:👇👇👇

2.1 实例一: 

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="gb2312"/>
    <title>设置鼠标形状</title>
    <style type="text/css">
      img {
        border: 0px;
      }
      p {
        font-size: 14px;
      }
      a {
        color: crimson;
        text-decoration: none;
      }
      a:hover {
        color: dodgerblue;
        text-decoration: underline;
        cursor: help;
      }
      span {
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <p><a href="#"><img src="E:\计算机专业学习资料和文件\HTML\image\hetao.jpg" alt="无漂白薄皮核桃" /></a></p>
    <p><a href="#">楼兰蜜语新疆野生</a>&nbsp;&nbsp;<a href="#">无漂白薄皮核桃</a></p>
    <p><span>500gx2包 ¥48.8</span></p>
    <p style="cursor: wait;">等待的结果</p>
  </body>
</html>

运行结果如下:

这里当我们把鼠标悬浮在图片和不同的字体之上时,鼠标就会变成相应的形状,各不相同,根据喜好自行设置即可。

相关文章
|
3天前
|
Web App开发 存储 JavaScript
前端如何学习Node.js及Node.js的主要用途
【7月更文挑战第16天】 学习Node.js对前端开发者至关重要,涉及理解其基于V8的运行时环境、JavaScript基础、安装与验证、核心模块(如fs、http、path)及npm管理。实践项目,如用Express建服务器,参与开源,深入学习异步编程和事件循环。Node.js用于服务器开发、构建工具、本地开发服务器和实时应用,提升全栈能力。借助官方文档和各种资源加速学习。
14 4
|
11天前
|
JavaScript 前端开发 NoSQL
前端node如何学习进阶知识
【7月更文挑战第8天】 深化JavaScript基础,精通Node.js核心模块(如fs、http)与事件循环机制,学习Express框架及异步编程(回调、Promise、async/await),掌握数据库交互,参与实战项目,关注Node.js最新技术和最佳实践,以此提升进阶技能。
24 8
|
7天前
|
自然语言处理 开发者 Python
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成格式丰富的 HTML 内容。Markdown 的语法简洁明了、学习容易,而且功能比纯文本更强。
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成格式丰富的 HTML 内容。Markdown 的语法简洁明了、学习容易,而且功能比纯文本更强。
|
17天前
|
JSON JavaScript 数据格式
文本-----wangEditor的使用,设置和获取内容,展示HTML无样式怎么办????console同步展示怎样写,Vue的配置在Vue3配置文件中的配置,是editor中的v-model绑定的值
文本-----wangEditor的使用,设置和获取内容,展示HTML无样式怎么办????console同步展示怎样写,Vue的配置在Vue3配置文件中的配置,是editor中的v-model绑定的值
|
15天前
|
前端开发 JavaScript 开发工具
给前端小白的学习建议
【7月更文挑战第4天】 **前端新手入门指南:** - 明确目标,从HTML/CSS基础开始。 - 深入学习JavaScript,结合项目实战。 - 跟踪技术趋势,选一二框架钻研。 - 多实践,从小项目到复杂应用。 - 掌握开发工具与调试技巧。 - 培养解决问题的能力,保持好奇与耐心。 - 加入社区,分享交流,持之以恒,成为优秀前端开发者。
15 2
|
16天前
|
前端开发 安全 JavaScript
学习前端加密
【7月更文挑战第3天】前端加密保护数据安全,防止传输中被截获,提升用户体验。HTTPS基础保障,JavaScript库如CryptoJS辅助加密,Web Crypto API提供原生加密功能。但前端加密非万能,需结合后端措施,注意算法选择、密钥管理。
16 2
|
18天前
|
前端开发 JavaScript UED
只会用插件可不行,这些前端动画技术同样值得收藏-CSS篇
只会用插件可不行,这些前端动画技术同样值得收藏-CSS篇
19 0
|
18天前
|
前端开发 JavaScript 编译器
如何在CSS中写变量?一文带你了解前端样式利器
如何在CSS中写变量?一文带你了解前端样式利器
21 0
|
18天前
|
前端开发
前端 CSS 经典:模拟 material 文本框
前端 CSS 经典:模拟 material 文本框
10 0
|
18天前
|
前端开发
前端 CSS 经典:图层放大的 hover 效果
前端 CSS 经典:图层放大的 hover 效果
11 0