文本的装饰

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. Opencv 特征提取与检测-Haar特征

    Haar特征介绍(Haar Like Features) 高类间变异性 低类内变异性 局部强度差 不同尺度 计算效率高 这些所谓的特征不就是一堆堆带条纹的矩形么,到底是干什么用的?我这样给出 ...

  2. ZOJ3531: [SDOI2014] 旅行

    Description S国有N个城市,编号从1到N.城市间用N-1条双向道路连接,满足从一个城市出发可以到达其它所有城市.每个城市信仰不同的宗教,如飞天面条神教.隐形独角兽教.绝地教都是常见的信仰. ...

  3. java多线程面试题选择题大全含答案

    v java多线程面试题选择题大全含答案 java多线程面试题选择题大全含答案 1.下面程序的运行结果()(选择一项)public static void main(String[] args) {T ...

  4. rest_framework框架实现之（认证）

    一认证 我们可以想想,我们要访问一个页面,需不需要对其进行认证,希望进入页面的时候看到哪些内容,一般是根据用户的不同而不同 首先,我们先设计一个表,如何知道对方通过了验证,我们可以考虑给其加一个tok ...

  5. leetcode-161周赛-5249-移除无效的括号

    题目描述: 自己的提交:O(N) class Solution: def minRemoveToMakeValid(self, s: str) -> str: #from collections ...

  6. Mysql安装多版本数据库

    1.下载对应版本压缩包 2.解压缩文件 3.到解压缩文件,添加my.ini文件,修改相关的配置,如端口,文件路径等 # For advice on how to change settings ple ...

  7. stl+数论——1247D

    其实也不算很难想,每个元素质因子分解后的p^c的p和c用pair的形式存在每个元素vector里 要去前面找一个数使得所有指数相加是k的倍数,那么把vector里的所有c 模 k,然后去找前面互补的数 ...

  8. 分块——cf1207F

    这么傻逼的题当时想了那么久 用a数组维护原序列,b[i][j]表示 pos%i=j 的 a[pos]之和 对于每个修改1 x y,先直接修改a[x],然后枚举i=1..700,修改b[i][x%i] ...

  9. tarjan强连通缩点——cf711D

    模板题 #include<bits/stdc++.h> using namespace std; #define ll long long #define N 500005 #define ...

  10. (8)centos7 登录与关机

    关机重启 shutdown -h now #立刻关机 shutdown -h 1 #一分钟后关机 shutdown -h 17:00 #指定时间关机(如果当前时间超过17:00,则会转到明天的17:0 ...