练习一个超链接元素在文档流当中，a标签显示出来的inline这种元素的特性。我们可以用display来将它转换成inline-block类型，这样我们就可以设置它的高度，宽度和它的背景颜色等等特性了。

      现在通过inline元素代码的编写形成以下图片显示出来的效果：

㈠在<body>里面先把它的内容结构写出来：

      首先用一个div标签表示整个导航栏的最外层的一个结构，让div标签有一个名字，这一部分是导航，而且在当前页面上是唯一的，用ID属性来引用它，<div id="nav">为样式的名字，导航栏里的三个导航项用虚拟的超链接写出来，至此，主体结构完成。

㈡样式：内嵌样式，在style标签内：

     第一步对浏览器赋予的默认样式进行清零，接着设置作为导航条所在区域的样式，定义一个ID类型的样式，“#”开头进行定义：定义区域的宽度为280px，水平居中，可以将上下的一个外边距设置为100px，即上部分距离浏览器的上边界只有100px，这样的一个空白的距离。

㈢设置超链接的默认样式：

     样式的名字就是标签的名字，用标签类型的样式来设置a的样式。首先要考虑的是超链接元素默认情况下，它是一个行内元素，即inline类型的元素，无法设置高和宽，它的高和宽是由它的内容文字或者图片来决定的，将它设置为inline-block这种类型，来设置它的高和宽的属性。设置所在宽度80px，高度30px，字号14px，文本对齐方式，水平方向居中。垂直方向则采用line-height，让它跟当前这个超链接所在的区域的高度相同，这样文本会垂直居中，也设置成30px高，将超链接默认的样式设置成没有下划线，在设置一个在默认情况下，它下面边框有一个灰色的显示，下面边框取值1px，实线，灰色。

     保存一下，浏览器默认效果是浏览器给它每一个超链接之间有一个默认的空白，那么如何去掉它呢？可以在它的父层，也就是a标签超链接元素的父层nav，这一层设置它的样式，将font-size设置为0，这样默认的间隙就取消了。

㈣设置当鼠标悬停在超链接文字上面的效果

     单独设置hover状态下超链接的效果，文字的字体颜色，白色显示，背景颜色显示为灰色，所有边框设置一个像素，实线，除了底边框，剩下三个方向的边框都设置成橘色，以下代码为左侧边框橘色，上侧边框颜色橘色，右侧边框橘色。

     这样就完成了水平的导航栏。

    以下为代码的编写：

希望可以有所帮助。

inline元素导航栏案例的更多相关文章

  1. python 全栈开发，Day49(超链接导航栏案例,background,定位,z-index,iconfont使用)

    昨日内容回顾 浮动:是css中布局最多的一个属性 有浮动,一定要清除浮动 浮动不是一个元素单独浮动,要浮动一起浮动 清除浮动四种方式: 1.给父盒子添加高度,一般导航栏 2.给浮动元素后面加一个空的块 ...

  2. 文本属性和字体属性,超链接导航栏案例 background

    文本属性 介绍几个常用的. 文本对齐 text-align 属性规定元素中的文本的水平对齐方式. 属性值:none | center | left | right | justify 文本颜色 col ...

  3. CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单

     水平&垂直对齐 元素居中对齐 .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } 文本 ...

  4. jQuery---固定导航栏案例

    固定导航栏案例 <!DOCTYPE html> <html> <head lang="en"> <meta charset="U ...

  5. client , offset , scroll 系列 及百度导航栏案例

    1. client 系列 示例 : <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  6. {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index

    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...

  7. 2016/2/25 1， margin auto 垂直方向测试 无效 2，margin重叠 3，哪些是块状哪些是内联 4，display：block inline 导航栏把内联转块状最常见+ 扩展

    1.利用margin auto完成首页居中,并自行研究,竖直方向用margin auto,是什么效果#container{width:1002px;margin: 0px auto;}    竖直方向 ...

  8. 【2017-03-31】JS-DOM操作：操作属性、彩虹导航栏、定时器、操作内容、创建元素并添加、操作相关元素

    一.操作属性 1.什么是属性: <div class="div" id="div1" style="" ></div> ...

  9. JS---封装getScroll函数 & 案例：固定导航栏

    封装getScroll函数 1. 获取页面向上或者向左卷曲出去的距离的值 2. 浏览器的滚动事件 function getScroll() { return { left: window.pageXO ...

随机推荐

  1. python 爬虫 requests模块 目录

    requests模块(response常用属性) 基于requests模块的get请求 基于requests模块发起ajax的get请求 基于requests模块发起ajax的post请求

  2. Minimum Score Triangulation of Polygon

    Given N, consider a convex N-sided polygon with vertices labelled A[0], A[i], ..., A[N-1] in clockwi ...

  3. windows下命令行利器---Cmder（安装，中文乱码，配置右键菜单）

    很多人都是在win下开发的,这样就会出现,经常需要命令行操作,而win cmd命令和linux命令有很大差异,导致大家很难受,今天给大家介绍一个win下命令行的利器-Cmder 一.先看一下它的容颜 ...

  4. thinkPHP验证码报错: Call to undefined function captcha_src()

    问题出现的原因可能有: 1. captcha扩展缺失: 2. captcha扩展与当前thinkPHP版本不兼容. thinkPHP6.0以下版本只能使用 captcha2.0以下版本,不支持2.0版 ...

  5. Jmeter的操作流程

    1.1 什么是 JMeter Apache JMeter 是 Apache 组织开发的基于 Java 的压力测试工具.用于对软件做压力测试,它最初被设计用于 Web 应用测试,但后来扩展到其他测试领域 ...

  6. 操作系统（五）CPU调度

    CPU调度是多道程序操作系统的基础.

  7. javaagent项目中使用

    相关代码参考:http://blog.csdn.net/catoop/article/details/51034778 近期项目中需要对SpringMVC中的Controller方法进行拦截做预处理, ...

  8. spring boot zuul集成kubernetes等第三方登录

    介绍一下,在单点登录平台集成kubernetes登录,集成其它系统的登录原理是一样的,如grafana, nacos, jenkins等. POM引用: <dependency> < ...

  9. Echarts ajax异步

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. golang（5）：struct & 链表 & 二叉树 & 接口

    struct : 结构体 // 1. 用来自定义复杂数据结构 // 2. struct里面可以包含多个字段(属性) // 3. struct类型可以定义方法,注意和函数的区分 // 4. struct ...