效果

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. OpenWRT 编译 error GNU libiconv not in use but included iconv.h is from...

    OpenWRT 编译 error GNU libiconv not in use but included iconv.h is from... 编译的时候碰到一个常见的错误,但是却在一个陌生的地方爆 ...

  2. Sql Server 2005的1433端口打开和进行远程连接

    参考地址:http://topic.csdn.net/u/20090828/16/e693935a-99b7-4090-a6bc-0123c91183eb.html 1.如何打开sql server  ...

  3. c++ windows下declspec

    一.declspec #ifdef STATIC_LIBS #define DLL_API static #else #define DLL_API __declspec (dllexport) #e ...

  4. Ajax 介绍

    Ajax的关键技术:  异步处理数据 使用XHTML(HTML)和CSS构建标准化的展示层 使用DOM(document object model)进行动态显示和交互 使用XML和XSLT进行数据交换 ...

  5. The kth great number（set）

    The kth great number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65768/65768 K (Java/Oth ...

  6. .NET 中使用 HttpWebResponse 时 Cookie 的读取

    今天把一个网站登录配置到以前写的蜘蛛程序中,发现不能成功登录.检查后才发现,那个网站在登录成功后,输出了一个特殊路径的 Cookie,由于是使用 HttpWebRequest.Cookies 来获取的 ...

  7. android面试题之四

    十六.Android中Dalvik和JVM的区别是什么? 1. Dalvik基于寄存器,而JVM基于栈.基于寄存器的虚拟机对于更大的程序来说,在它们编译的时候,花费的时间更短. 2. Dalvik负责 ...

  8. kaggle之数字序列预测

    数字序列预测 Github地址 Kaggle地址 # -*- coding: UTF-8 -*- %matplotlib inline import pandas as pd import strin ...

  9. CSS3 target伪类简介

    CSS3 target伪类是众多实用的CSS3特性中的一个.它用来匹配文档(页面)的URI中某个标志符的目标元素.具体来说,URI中的标志符通常会包含一个”#”字符,然后后面带有一个标志符名称,比如# ...

  10. Ninject框架的介绍

    Ninject是C#语言的一款依赖性的注入器框架,我认为之所以会出现这个框架是因为类与类由于继承或者接口与类继承而出现的,首先这 个最典型存在是因为接口,首先我们来看看这个用了框架和没有用框架的区别吧 ...