文本的装饰

text-decoration 通常我们用于给链接修改装饰效果

使用技巧：在一行内的盒子内，我们设定行高等于盒子的高度，就可以使文字垂直居中。

<head>

        <meta charset="utf-8">

        <style>

		body {

			background-color: #000;

		}

		a {

			width: 200px;

			height: 50px;

			/* background-color: orange; */

			display: inline-block;  /* 把a 行内元素转换为行内块元素 */

			text-align: center;  /* 文字水平居中 */

			line-height: 50px;  /* 我们设定行高等于盒子的高度，就可以使文字垂直居中 */

			color: #fff;

			font-size: 22px;

			text-decoration: none;  /* 取消下划线 文本装饰 */

		}

		a:hover {  /* 鼠标经过 给我们的链接添加背景图片*/

			background: url(images/h.png) no-repeat;

		}

        </style>

    </head>

    <body>

    <a href="#">专区说明</a>

    <a href="#">申请资格</a>

    <a href="#">兑换奖励</a>

    <a href="#">下载游戏</a>

    </body>

　　

CSS案例1（导航栏）的更多相关文章

  1. 【源码分享】jquery+css实现侧边导航栏

    jquery+css实现侧边导航栏 最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...

  2. CSS常用操作-导航栏

    1.垂直导航栏 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  3. html+css 制作简易导航栏

    二话不说直接上代码(萌新:实在也没什么好说的) <!DOCTYPE html> <html lang="en" xmlns="http://www.w3 ...

  4. 【温故而知新-CSS】使用CSS设计网站导航栏

    body #nav li a { width: auto; } #nav li a:hover { background-color: #ffcc00; color: #fff; border-rig ...

  5. CSS3学习-用CSS制作立体导航栏

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 天书笔记：HTML+CSS实现顶部导航栏

    此笔记纯属本人脑残笔记,阅读困难不理解属正常现象,初学者尽量不要阅读,否则轻则口吐白沫重则走火入魔,切记切记 先晒效果图: 效果要求类似于b站的顶部导航(..原谅我老是拿b站做例子:) ) 然后是代码 ...

  7. 纯CSS实现nav导航栏+jQuery实现article区DIV切换

    效果图: main.html 代码: <!DOCTYPE html> <html> <head> <title>MyHomepage</title ...

  8. css下拉导航栏代码

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 淘宝分类导航条；纯css实现固定导航栏

    效果例如以下: 页面例如以下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  10. CSS 面包屑导航栏

    做之前,先看一下效果图. demo01.png 首先,书写好 HTML 代码. <div id="crumbs"> <ul> <li><a ...

随机推荐

  1. htop资源管理器

    htop是linux资源管理器,安装后界面如下图: 当我们用安装yum -y htop时,会报错,这是因为需要安装扩展源 yum -y epel 扩展源 安装完扩展源之后,就可以安装了

  2. python3 获取当前路径及os.path.dirname的使用

    方法一: import sys,os os.getcwd()#然后就可以看见结果了 方法二: import os os.path.dirname(os.path.realpath('__file__' ...

  3. 72.Properties（配置文件）

    Properties(配置文件):主要用于存储配置文件到硬盘上面和读取配置文件 public class Properties extends Hashtable<Object,Object&g ...

  4. 【JavaWeb项目】一个众筹网站的开发（九）邮件开发

    Java官方支持邮件开发,Javax-mail jdk中默认没有,需要另外下载 apache的基于Javax-mail开发了commons-mail,更加简单高效,推荐使用 一.电子邮件接收和发送协议 ...

  5. Java中的Set集合以及HashSet

    Set集合: Set继承自Collection,所以没有什么特别的方法. 需要注意的是,Set集合不包含重复元素,我们重点了解Set集合如何保证不包含多余元素. HashSet: HashSet如何保 ...

  6. C中的lvalue和rvalue

    该贴子第一条回答虽然浅尝辄止,但还是很有参考价值. https://www.quora.com/What-is-lvalue-and-rvalue-in-C IBM一个简单的说法是: "-通 ...

  7. Shiro学习（3）授权

    授权,也叫访问控制,即在应用中控制谁能访问哪些资源(如访问页面/编辑数据/页面操作等).在授权中需了解的几个关键对象:主体(Subject).资源(Resource).权限(Permission).角 ...

  8. 网关协议：CGI和WSGI

    通常服务器程序分为web服务器和应用程序服务器.web服务器是用于处理HTML文件,让客户可以通过浏览器进行访问,主流的web服务器有Apache.IIS.Nginx.lighthttpd等.应用服务 ...

  9. PHP 图形验证码

    一段生成图形验证码的代码,向原创作者致谢. 1.将以下代码保存为 txm.php ,注:直接运行该页面是没有结果的,要用另一页面引用,请看步骤2 <?php session_start(); $ ...

  10. FastJson乱序问题

    1.初始化为有序json对象 JSONObject jsonOrdered= new JSONObject(true); 2.将String对象转换过程中,不要调整顺序 JSONObject json ...