文本的装饰

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. C# 关于获取周，月，年时间大全

    DateTime now = DateTime.Now; DayOfWeek dayOfWeek = now.DayOfWeek; : (int)dayOfWeek; //本周第一天(此结果是周一,如 ...

  2. Python操作MySQL实战案例讲解

    使用Python的pymysql库连接MySQL数据库 #导入pymysql import pymysql #连接MySQL数据库 #输入数据库的IP地址,用户名,密码,端口 db=pymysql.c ...

  3. 详解 MySQL int 类型的长度值问题

    以下是每个整数类型的存储和范围 (来自 mysql 手册)

  4. 定时器实现Promise.all()的简单使用

    // 异步事件1 function time1() { const promise = new Promise(function (resolve, reject) { setTimeout(func ...

  5. Windows version PE System Key

    { }

  6. 「ZJOI2019」线段树 解题报告

    「ZJOI2019」线段树 听说有人喷这个题简单,然后我就跑去做,然后自闭感++,rp++(雾) 理性分析一波,可以发现最后形成的\(2^k\)个线段树,对应的操作的一个子集,按时间顺序作用到这颗线段 ...

  7. Android中.9图片的了解和制作过程

    个部分(九宫格),分别为4个角,4条边,以及一个中间区域,4个角是不做拉升的,所以还能一直保持圆角的清晰状态,而2条水平边和垂直边分别只做水平和垂直拉伸,所以不会出现边会被拉粗的情况,只有中间用黑线指 ...

  8. 思维——cf1238C

    听思维的一道题,网上大多直接模拟,感觉有点麻烦,其实只要把连续段求出来,然后处理一下统计答案就行 两个注意点:1.除了第一个连续段,其余段长度都要+1 2.因为目的地是0,所以最后一段要特判一下 #i ...

  9. Linux shell脚本编程if语句的使用方法(条件判断)

    if 语句格式if  条件then Commandelse Commandfi        别忘了这个结尾If语句忘了结尾fitest.sh: line 14: syntax error: unex ...

  10. 一道腾讯面试题：如何快速判断某 URL 是否在 20 亿的网址 URL 集合中？布隆过滤器

    何为布隆过滤器 还是以上面的例子为例: 判断逻辑: 多次哈希: Guava的BloomFilter 创建BloomFilter 最终还是调用: 使用: 算法特点 使用场景 假设遇到这样一个问题:一个网 ...