好看的css样式模板、好看的css样式模板图片 收藏 0

前端入门——css链接样式

首先让我们回顾下的用法 <a href=\”url\”> , 超链接是一个非常伟大的发明，它链接了整个互联网，没有它就没有互联网。

超链接在发明之初就给它设计了一个默认的样式，就是蓝色带下划线的样式，如下图：

默认样式

关于为什么超链接是蓝色带下划线的历史，可以参考这里：https://baijiahao.baidu.com/s?id=1710334071632114373?=spider&for=pc

当网页变得越来越丰富，用户的需求越来越高的时候，这样的样式已经不符合大众的审美，所以通过css来美化超链接非常有用和有趣。

链接可以使用任何 CSS 属性（例如 color、font-family、background 等）来设置样式。

如下图：

除此之外，可以根据链接状态来设置不同样式，链接状态分别有：

• a:link – 正常的，未访问的链接
• a:visited – 用户访问过的链接
• a:hover – 用户将鼠标悬停在链接上时
• a:active – 链接被点击时

如下示例：

未被访问的链接

已被访问的链接

将鼠标悬停在链接上

被选择的链接

如果为多个链接状态设置样式，请遵循如下顺序规则：

• a:hover 必须 a:link 和 a:visited 之后
• a:active 必须在 a:hover 之后

以上是链接的各种伪类，描述了链接的不同状态，你可以试试在不同状态下给设置不同的属性，比如背景色，字体或者文本修饰等等。

链接通常用来当做按钮使用，点击它跳转页面或执行一些事件或js函数。如下示例：

定义了一个背景色为红色的按钮，如下图：

注意：如果想在点击这个按钮后禁止跳转页面，可以给href属性设置javascript:void();,在以后会讲到JavaScript在网页中的使用，这里你已经看到，在href属性中通过Javascript：的形式可以执行一段js语句或函数，这里void()就是阻止链接跳转。

上面只是一个简单的例子，当然你也可以制作更漂亮的按钮，比如加上圆角、阴影、或渐变背景等。

当鼠标移动到链接上时，你会看到鼠标变成一个手形，通过css cursor 属性可以改变鼠标指针的形状，如下图：

可以尝试按照上面的属性依次练习一遍，链接的样式到此就介绍完了，感谢关注。

上篇：

你是这样的 CSS，19个唯美的边框，我的项目又有"亮"点了

今天，分享一波唯美的边框，可增加我们的项目\”亮\”点，让用户爱起来。

事例地址：https://codepen.io/mike-schultz/pen/NgQvGO

事例地址：https://codepen.io/uiswarup/pen/RBByzW

事例地址：https://codepen.io/giana/pen/yYBpVY

事例地址：https://codepen.io/ZachSaucier/pen/kyGqm

事例地址：https://codepen.io/tmrDevelops/pen/VeRvKX

事例地址：https://codepen.io/Mamboleoo/pen/zYOJOGb

事例地址：https://codepen.io/electerious/pen/qPjbGm

事例地址：https://codepen.io/chriscoyier/pen/PXNPRq

事例地址：https://codepen.io/Varin/pen/XjagZv

事例地址：https://codepen.io/Zeindelf/pen/vZbyEg

事例地址：https://codepen.io/pavger/pen/bNrxrj

事例地址：https://codepen.io/jessedean/pen/BzjweX

事例地址：https://codepen.io/coreybullman/pen/yJoZVQ

事例地址：https://codepen.io/aniketkudale/pen/PoqmexO

事例地址：https://codepen.io/fixcl/pen/lemjw

事例地址：https://codepen.io/yukulele/pen/AjFBs

事例地址：https://codepen.io/fossheim/pen/LYVOBRZ

事例地址：https://codepen.io/HYPNOS/pen/GFxoC

事例地址：https://codepen.io/4815162342/pen/NaLdNx

所有源码可关注《JavaScript 每日一练》 后台回复 css20 获取

~~完，我是刷碗，励志等退休后，要回家摆地摊的人，我们下期见！

作者：niemvuilaptrin 译者：前端小智 来源：medium 原文：https://niemvuilaptnh.medium.com/23-border-css-javasript-beautiful-in-website-7286a05e0ad7

5个精致的 CSS 框架，你都知道么？| Gitee 项目推荐

CSS 框架是一个软件，它为你的 HTML 开发提供了许多选项以供使用，可能使得你开发网站或 web 程序更快速更简单。CSS 框架既有优点也有缺点，总的来说对于绝大多数使用者还是利大于弊。那么，在程序开发中有哪些好的 CSS 框架呢？今天，小编为大家整理了 Gitee 上 Star 数还算不错的开源框架，希望大家能够喜欢：）

如果大家有与 CSS 框架相关的开源项目，欢迎托管到 Gitee 上哦，我们会及时给予推荐。最后，如果你很喜欢以上提到的项目，别忘了分享给其他人哦！

1、项目名称：基于 Material Design 的前端框架 MDUI

项目简介：MDUI 是一个基于 Material Design 的前端框架，使用纯 JavaScript 编写，没有任何依赖。CSS 文件中已经包含了 19种主色主题、16种强调色主题、1种夜间主题，只需添加一个 CSS 类，即可实现主题的切换。移动优先，可适配所有屏幕。

项目地址：https://gitee.com/zdhxiong/mdui

2、项目名称：户界面开发框架 EasyWebUI

项目简介：EasyWebUI 是一个普适而轻巧的 HTML/CSS 开发框架 —— 支持 IE 8+ 的 CSS 2/3 国际标准及主流厂商的专用属性（不使用 IE CSS Hack），通用于桌面端、移动端的各种网页、混合 App 用户界面的构建。

项目地址：https://gitee.com/Tech_Query/EasyWebUI

3、项目名称：移动前端框架 AUI

项目简介：AUI 是为 APICloud 而打造的一个单纯 UI 框架，体积小，方便用户扩展和自由组合，摆脱繁琐的 html 标签布局。

AUI 为一款轻量级前端UI框架，更偏重于 CSS 布局及样式的构造，通俗易懂的写法及模块式的拼装方便用户自由扩展。轻小的体积、灵活的扩展性，大大提高移动端项目的体验度和开发效率。

项目地址：https://gitee.com/liulangnan/aui

4、项目名称：移动 UI 框架 Hui

项目简介：Hui崇尚的是样式组装化，提倡抽取通用类方式，你只需要写简单的样式甚至不需要写任何样式就可以通过通用类组装成丰富的组件和布局效果。Hui 包含了23中主题样式，可以满足各种 App 对色彩的需求。Hui 有丰富的前端组件，包含移动开发的方方面面。同时 Hui 提供各种主流 App 模仿实例，更加方便学习。

项目地址：https://gitee.com/monksoul/Hui

5、项目名称：基于 CSS 的动画库

项目简介：本项目是基于 css3 的动画库。

项目地址：https://gitee.com/xulongchang/animate.css

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com