练习一个超链接元素在文档流当中，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. c++ 读入优化通用模板

    struct ioss { #define endl '\n' ; char obuf[LEN], *oh = obuf; std::streambuf *fb; ioss() { ios::sync ...

  2. 2019牛客暑期多校训练营（第一场）-E（DP）

    题目链接:https://ac.nowcoder.com/acm/contest/881/E 题意:求可分解成n个AB和m个BA的字符串的个数. 思路: 首先根据贪心思想,前n个A可作为AB的A,后m ...

  3. SpringMVC异常体系

    在服务端经常会遇到需要手动的抛出异常,比如业务系统,校验异常,比较通用的处理方案是在最顶层进行拦截异常,例如Struts的全局异常处理,而Spring的异常处理机制就相对于Struts来说好用多了   ...

  4. Hadoop简介及架构

    狭义上来说,hadoop就是单独指代hadoop这个软件, 广义上来说,hadoop指代大数据的一个生态圈,包括很多其他的软件 2.hadoop的历史版本介绍 0.x系列版本:hadoop当中最早的一 ...

  5. 第1章 Java开发入门

    一.填空题 1.Java SE.Java EE.Java ME 2.JRE 3.javac 4.bin 5.path.-class path 二.判断题 1.√ 2.× JDK: java devel ...

  6. vc_redist x64 或者x86下载地址

    https://support.microsoft.com/en-us/help/2977003/the-latest-supported-visual-c-downloads 微软的东西,果然还是人 ...

  7. sql server join联结

    join学习起来有点乱,现做如下整理: table A id abc 1 a 2 b 3 c 4 d table B id abc 1 e 2 a 3 f 4 c --join或者inner join ...

  8. 链接校验——是否是协议http://或https://开头的

    if(str.substr(0,7)!="http://" && str.substr(0,7)!="https://"){ return 'y ...

  9. O019、通过例子学习 Keystone

    参考https://www.cnblogs.com/CloudMan6/p/5373311.html   上节介绍了 Keystone 的核心概念.本节我们通过“查询可用 image”这个操作让大家对 ...

  10. python 运行sum函数的使用

    sum(iterable[, start]) ,iterable为可迭代对象,如: sum([ ], start) , #iterable为list列表. sum(( ), start ) , #it ...