css案例学习之按钮超链接
效果
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 #717171;border-right: 1px solid #717171; } a:hover{ /* 鼠标经过时的超链接 */color:#821818; /* 改变文字颜色 */padding:5px 8px 3px 12px; /* 改变文字位置 */background-color:#e2c4c9; /* 改变背景色 */border-top: 1px solid #717171; /* 边框变换,实现“按下去”的效果 */border-left: 1px solid #717171;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案例学习之按钮超链接相关推荐
- html并集选择器怎么写,css案例学习之并集选择器
代码 并集选择器 h1, h2, h3, h4, h5, p{ /*并集选择器*/ color:purple; /* 文字颜色 */ font-size:15px; /* 字体大小 */ } h2.s ...
- css案例学习之继承关系
代码 <html> <head><title>继承关系</title><style> body{color:blue; /* 颜色 */te ...
- css案例学习之全局声明*{} 与body{}的区别
代码 <html> <head> <title>全局声明</title> <style type="text/css"> ...
- css案例学习之div与span的区别
代码: <html> <head> <title>div 标记范例</title> <style type="text/css" ...
- css案例学习之relative与absolute
代码 <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.or ...
- css案例学习之id要唯一
ID有两个的后果 <html> <head> <title>ID选择器</title> <style type="text/css&qu ...
- css案例学习之并集选择器
代码 <html> <head> <title>并集选择器</title> <style type="text/css"> ...
- css案例学习之div ul li a 实现导航效果
效果 代码 <html> <head> <title>无需表格的菜单</title> <style>body{background-colo ...
- css案例学习之span边框实现的特殊效果
bottom left bottom right top left top right 配合颜色来使用,实现一些神奇的效果 #menu a span{height:0;width:0;/*border ...
最新文章
- CSDN 数学公式居中
- oracle 查询历史sql执行最慢和执行次数最多的sql
- 【干货】iOS9的新特性UI Tests
- 非此即彼的逻辑错误_MBA逻辑攻略-逻辑知识大全,快来收藏吧!
- 信任与信誉对电子服务的重要性
- HDU 2047 阿牛的EOF牛肉串
- 蓝桥杯 ADV-223 算法提高 8-1因式分解
- HCIA-Storage 存储工程师学习笔记——1. 存储技术趋势
- Excel表格匹配合并
- 查看chrome浏览器当前版本
- 计算机的rom是内存的意思,电脑ram和rom是什么意思 电脑内存条是rom还是ram
- 西门子——好用的通讯仿真通讯工具NetToPLCsim
- 蓝牙核心技术概述(一):蓝牙概述-转-
- 服务器内存性能查看,如何查看服务器内存使用大小
- 小松鼠吃瓜子,一口可以吃一个,两个,三个,请问有多少中方式吃完八颗瓜子?
- #创新应用#善听听书:进入听书的时代!
- PDF 转成 一张图片
- 一文搞懂UART通信协议
- Centos7 安装Yarn
- Intel CPU集成显卡被UEFI BIOS禁用想开启的设置