文本的装饰

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. Ubuntu 16.04 安装docker-ce,docker-compose

    Get Docker CE for Ubuntu 卸载旧版本 sudo apt-get remove docker docker-engine docker.io containerd runc 使用 ...

  2. 【TJOI/HEOI2016】求和

    题面 题目分析 \[ \begin{split} \sum_{i=0}^n\sum_{j=0}^iS(i,j)\cdot 2^j\cdot j!&=\sum_{j=0}^n2^j\cdot j ...

  3. hdu 4300 拓展kmp

    题目大意: 输入样例个数,每个样例有两行,第一行是26个字母,分别代表a~z加密后的密文:第二行代表一串密文+明文,密文一定是完整的,但明文可能不完整,让你输出最短的(密文+明文): 基本思路: 拓展 ...

  4. hdu 5792 树状数组+离散化+思维

    题目大意: Given a sequence A with length n,count how many quadruple (a,b,c,d) satisfies: a≠b≠c≠d,1≤a< ...

  5. clickhouse高可用-节点宕机数据一致性方案-热扩容

    1. 集群节点及服务分配 说明: 1.1. 在每个节点上启动两个clickhouse服务(后面会详细介绍如何操作这一步),一个数据分片,一个数据备份,为了确保宕机数据一致性,数据分片和数据备份不能同一 ...

  6. flex: 1在ios10.2系统手机端的换行布局失败问题

    使用flex:1要追加flex-basis: auto;可以简写flex: 1 1 auto; 表格不可以用flex布局

  7. Hbase表类型的设计

    HBase表类型的设计 1.短宽 这种设计一般适用于: * 有大量的列 * 有很少的行 2.高瘦 这种设计一般适用于: * 有很少的列 * 有大量的行 3.短宽-高瘦的对比 短宽 * 使用列名进行查询 ...

  8. [ZJOI2010]排列计数 题解

    Description 称一个1,2,...,N的排列P1,P2...,Pn是Magic的,当且仅当2<=i<=N时,Pi>Pi/2. 计算1,2,...N的排列中有多少是Magic ...

  9. KMP算法 （字符串的匹配）

    视频参考 对于正常的字符串模式匹配,主串长度为m,子串为n,时间复杂度会到达O(m*n),而如果用KMP算法,复杂度将会减少线型时间O(m+n). 设主串为ptr="ababaaababaa ...

  10. windows API 创建系统托盘图标

    系统托盘在我们使用的程序中很普遍,下面我们来看一个很不错的例子,使用Win32 API实现,对理解系统托盘有些帮助. [cpp] view plaincopy #include <windows ...