学习笔记(3)超链接伪类,web开发学什么

43 阅读2分钟

常用的JavaScript设计模式

  • 单体模式

  • 工厂模式

  • 例模式

函数

  • 函数的定义

  • 局部变量和全局变量

  • 返回值

  • 匿名函数

  • 自运行函数

  • 闭包

开源分享:docs.qq.com/doc/DSmRnRG… 一、超链接的四种样式

a:link {color: #FF0000} /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

a:active {color: #0000FF} /* 选定的链接 */

a:link { color: #06F; text-decoration: none; } //去除默认样式

a:visited { color: #999; text-decoration: line-through; }// 删除线

a:hover { color: #F00; text-decoration: underline; }//下划线

a:active { color: #F0F; }

注意:四种状态的顺序一定不能颠倒,否则有些不生效 link visited hover active

二、将链接转换为块级元素

链接在默认状态下是内联元素,转换为块级元素后可以获得更大的点击区域,可以设置宽度和高度,将链接转换为块状,只需增加一个display:block的css属性即可。

a { display: block; //转换成块元素 height: 30px; width: 100px; line-height: 30px; //设置居中对齐 text-align: center; background: #CCC; } a:hover { color: #FFF; text-decoration: none; background: #333; }

运行效果

在这里插入图片描述

三、用css制作按钮

学会了把链接转换为块元素,按钮就很好做了。想要带图片的,添加一个背景就可以了。

a { display: block; height: 34px; width: 107px; line-height: 2; text-align: center; /* background: url(/upload/2010-08/14/014304_btn_bg.gif) no-repeat 0px 0px; */ color: #d84700; background-color: #0062CC; font-size: 14px; font-weight: bold; text-decoration: none; padding-top: 3px; } a:hover { background-color: pink /* background: url(/upload/2010-08/14/014304_btn_bg_hover.gif) no-repeat 0px 0px; */ }

按钮

最后

你要问前端开发难不难,我就得说计算机领域里常说的一句话,这句话就是『难的不会,会的不难』,对于不熟悉某领域技术的人来说,因为不了解所以产生神秘感,神秘感就会让人感觉很难,也就是『难的不会』;当学会这项技术之后,知道什么什么技术能做到什么做不到,只是做起来花多少时间的问题而已,没啥难的,所以就是『会的不难』。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我特地针对初学者整理一套前端学习资料

前端路线图

vue.js的36个技巧