当前位置:萝卜系统下载站 > 网页设计教程 > 详细页面

css创建按钮式超链接

css创建按钮式超链接

更新时间:2023-06-11 文章作者:未知 信息来源:网络 阅读次数:

网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。

【实例介绍】

css创建按钮式超链接
很多网页上的超链接都制作成各种按钮的效果,这里当鼠标移动到按钮上时实现按下去的
效果,其原理是变换边框之间的颜色。下面使用css制作一个漂亮的按钮链接。

【实例代码】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>创建按钮式超链接</title> </head> <style><!-- a{          font-family: Arial;  font-size: .8em;  text-align:center;  margin:4px;} a:link, a:visited{      color: #A52310;  padding:4px 10px 4px 10px;  background-color: #ecd81c;  text-decoration: none;  border-top: 1px solid #EEEEEE;   border-left: 1px solid #EEEEEE;  border-bottom: 1px solid #72221;  border-right: 1px solid #72221;} a:hover{         color:#831826;    padding:5px 8px 3px 12px;     background-color:#e2c4c8;    border-top: 1px solid #71121;   border-left: 1px solid #71121;  border-bottom: 1px solid #EEEEEE;  border-right: 1px solid #EEEEEE;}--> </style> <body> <a href="#" _fcksavedurl="#">首页</a> <a href="#" _fcksavedurl="#">公司简介</a> <a href="#" _fcksavedurl="#">公司新闻</a> <a href="#" _fcksavedurl="#">公司动态</a> <a href="#" _fcksavedurl="#">联系我们</a> <a href="#" _fcksavedurl="#">论坛</a> </body> </html>

【代码分析】

页面body部分与所有HTML页面一样,利用超链接建立最简单的菜单结构。在<head>内

对<a>标签进行整体控制,设置不同状态下的样式,对于鼠标指针经过时的超链接,相应改变
文字颜色、背景色、位置和边框,最终显示效果如图16.2所示。

创建按钮式超链接
 【素材及源码下载】

请点击:css创建按钮式超链接 下载本实例相关素材及源码

 


网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。

温馨提示:喜欢本站的话,请收藏一下本站!

本类教程下载

系统下载排行