效果

css实现

<html>

<head>

<title>按钮超链接</title>

<style>

a{                                        /* 统一设置所有样式 */

    font-family: Arial;

    font-size: .8em;

    text-align:center;

    margin:3px;

}

a:link, a:visited{                        /* 超链接正常状态、被访问过的样式 */

    color: #A62020;

    padding:4px 10px 4px 10px;

    background-color: #ecd8db;

    text-decoration: none;

    border-top: 1px solid #EEEEEE;        /* 边框实现阴影效果 */

    border-left: 1px solid #EEEEEE;

    border-bottom: 1px solid #;

    border-right: 1px solid #;

}

a:hover{                                    /* 鼠标经过时的超链接 */

    color:#;                        /* 改变文字颜色 */

    padding:5px 8px 3px 12px;            /* 改变文字位置 */

    background-color:#e2c4c9;            /* 改变背景色 */

    border-top: 1px solid #;        /* 边框变换，实现“按下去”的效果 */

    border-left: 1px solid #;

    border-bottom: 1px solid #EEEEEE;

    border-right: 1px solid #EEEEEE;

}

</style>

</head>

<body>

       <a href="#"> Home </a>

       <a href="#"> Contact Us</a>

       <a href="#"> Web Dev</a>

       <a href="#"> Web Design</a>

       <a href="#"> Map </a>

</body>

</html>

css案例学习之按钮超链接的更多相关文章

  1. css案例学习之table tr th td ul li实现日历

    效果 代码 <html> <head> <title>Calendar</title> <style> <!-- .month { b ...

  2. css案例学习之盒子模型

    定义:每个盒子都有:边界.边框.填充.内容四个属性: 每个属性都包括四个部分:上.右.下.左:这四部分可同时设置,也可分别设置:里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子 ...

  3. css案例学习之继承关系

    代码 <html> <head> <title>继承关系</title> <style> body{ color:blue; /* 颜色 * ...

  4. CSS 案例学习

    1.样式 display:inline-block;可改变a标签,合其可定义宽高 2.a:hover表示鼠标经过 3.background:url(110.png) bottom 表示:给链接一个图片 ...

  5. css案例学习之用thead、tbody、tfoot实现漂亮的table布局

    首先说说thead.tbody.tfoot <thead> <tbody> <tfoot> 无论前后顺序如何改变, <thead> 内的元素总是在表的最 ...

  6. css案例学习之ul li dl dt dd实现二级菜单

    效果 代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  7. css案例学习之relative与absolute

    代码 <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...

  8. css案例学习之float浮动

    代码: <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

  9. css案例学习之父子块的margin

    两边还会有些距离,这是body默认的. 代码: <head> <title>父子块的margin</title> <style type="text ...

随机推荐

  1. 做一个有理想的IT人

    前段时间一直以来都在思考生命的价值的问题,一直在想人的一生的追求是什么.在这个物欲横流的社会,对人的价值的定义只是在财富积累的多少,这个是大多数人所认为的.但人的一生顶多百年,百年之后这些虚荣划归为尘 ...

  2. LeetCode C++ 解题报告

    自己做得LeetCode的题解,使用C++语言. 说明:大多数自己做得,部分参考别人的思路,仅供参考; GitHub地址:https://github.com/amazingyyc/The-Solut ...

  3. softlayer virtual machine vhd磁盘镜像导入shell脚本

    脚本

  4. Linux NFS服务器搭建

    1.NFS:NFS(Network File System)即网络文件系统,是FreeBSD支持的文件系统中的一种,它允许网络中的计算机之间通过TCP/IP网络共享资源.   在NFS的应用中,本地N ...

  5. errno的基本用法

    error是一个包含在 perror()和strerrot()函数可以把errno的值转化为有意义的字符输出. #include <stdio.h> #include <stdlib ...

  6. JVM结构、GC工作机制详解

      JVM结构.内存分配.垃圾回收算法.垃圾收集器.下面我们一一来看. 一.JVM结构 根据<java虚拟机规范>规定,JVM的基本结构一般如下图所示: 从左图可知,JVM主要包括四个部分 ...

  7. 一段代码说明javascript闭包执行机制

    假设你能理解以下代码的执行结果,应该就算理解闭包的执行机制了. var name = "tom"; var myobj = { name: "jackson", ...

  8. java的Future使用方法

    首先,Future是一个接口,该接口用来返回异步的结果. package com.itbuluoge.mythread; import java.util.ArrayList; import java ...

  9. servlet核心API的UML图

  10. UDK——入门开发流程

    1.入门级參考UnrealScript代码 UnrealScript模仿JAVA,可是又有巨大的不同,主要是它本身具有完好的结构,貌似UDK把一切都安排好了,就像在盖楼一样.面对一幢已经完工的设计静止 ...