练习一个超链接元素在文档流当中，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. windows10 AppStore安装 应用商店重新安装

    点击左下角的搜索按钮,如下图所示   输入powershell,在结果中找到widows powershell应用,如下图所示   右键单击widows powershell应用,选择以管理员运行,如 ...

  2. JavaScript和JSON转化

    1, JSON转JavaScript JSON.parse():https://www.runoob.com/json/json-parse.html 2, JavaScript转JSON JSON. ...

  3. Python 入门 之 类的约束以及super()剖析

    Python 入门 之 类的约束以及super()剖析 1.类的约束 第一版: class WechatPay: def pay(self): print("微信支付") clas ...

  4. python网络爬虫（5）BeautifulSoup的使用示范

    创建并显示原始内容 其中的lxml第三方解释器加快解析速度 import bs4 from bs4 import BeautifulSoup html_str = """ ...

  5. 服务器部署Java Web及微信开发调试

    参考摘抄: 阿里云部署Java网站和微信开发调试心得技巧(上):https://www.imooc.com/article/20583 阿里云部署Java网站和微信开发调试心得技巧(下):https: ...

  6. JS基础_js编写位置

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. POJ题解Sorting It All Out-传递丢包+倍增

    题目链接: http://poj.org/problem?id=1094 题目大意(直接从谷歌翻译上复制下来的): 描述 不同值的递增排序顺序是其中使用某种形式的小于运算符来将元素从最小到最大排序的顺 ...

  8. Tomcat 7 自动加载类及检测文件变动原理

    在一般的 web 应用开发里通常会使用开发工具(如 Eclipse.IntelJ )集成 tomcat ,这样可以将 web 工程项目直接发布到 tomcat 中,然后一键启动.经常遇到的一种情况是直 ...

  9. Redis分布式之前篇

    第一篇:初识Redis 一.Redis是什么? Redis 是一个开源(BSD许可)的,使用ANSI C语言编写的,内存中的数据结构存储系统,它可以用作数据库.缓存和消息中间件. 它支持多种类型的数据 ...

  10. 为什么选择器:last-child有时没有起作用?

    想要有.list样式的最后一个不要下划线.为什么:last-child没有起作用? el:last-child 的匹配规则是:第一步,查找 el 选择器匹配元素的所有同级元素(siblings):第二 ...