网页的本质就是超级文本标记语言,通过结合使用其他的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创建按钮式超链接 下载本实例相关素材及源码
网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。 |