文本的装饰

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. KMP 算法学习

    KMP算法是用来做字符串匹配的.关于字符串匹配,最简单最容易想到的方法是暴利查找,使用双重for循环处理. 该方法的时间复杂度为O((n-m+1)*m) (n为目标串T长度,m为模式串P长度, 从T中 ...

  2. String类型的时间大小比较

    不多废话,上代码   (String 的CompareTo方法比较仅仅限于同位数的字符串比较,格式.位数不一样比较结果会错误,原因是CompareTo比较源码是ASCII的比较) 代码一 packag ...

  3. linux上文件内容去重的问题uniq/awk 正则表达过滤操作

    .uniq:只会对相邻的行进行判断是否重复,不能全文本进行搜索是否重复,所以往往跟sort结合使用. 例子1: [root@aaa01 ~]# cat a.txt 12 34 56 12 [root@ ...

  4. 59. jdk1.5新特性之----增强for循环

    /*jdk1.5新特性之----增强for循环:底层是一个迭代器 作用:简化迭代器书写格式 使用范围:实现了Iterable接口的对象或者数组对象 格式:    for(变量类型  变量名 :遍历目标 ...

  5. ( vant ) 新手踩坑

    最近在用vant 做H5 页面,坑太他娘的坑娘啊!!!!!!!!!!!!!!!! 1,修改vant组件样式问题 vant 修改组件的样式时,在scoped 属性下没有效果.如果去掉scope 会造成全 ...

  6. RN 真机roload

    第四步:打开调试菜单 手机设备可以通过摇一摇设备打开调试菜单,也可以打开调试菜单. 可因为是平板,摇一摇不是太方便,可以在电脑端运行命令来打开调试菜单,但有时却又无法打开调试菜单(如果是使用真机调试, ...

  7. 2019 wannafly winter camp day5-8代码库

    目录 day5 5H div2 Nested Tree (树形dp) 5F div2 Kropki (状压dp) 5J div1 Special Judge (计算几何) 5I div1 Sortin ...

  8. 堆、栈、方法区、静态代码块---Java

    java 堆.栈.方法区 堆区: 1.存储的全部是对象,每个对象都包含一个与之对应的class的信息.(class的目的是得到操作指令) 2.jvm只有一个堆区(heap)被所有线程共享,堆中不存放基 ...

  9. EF 关键字

    https://docs.microsoft.com/zh-cn/dotnet/csharp/language-reference/keywords/query-keywords 子句 说明 from ...

  10. 使用Netfilter进行数据包分析

    #include <linux/init.h>#include <linux/module.h>#include <linux/skbuff.h>#include ...