练习一个超链接元素在文档流当中，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. 安装VMWare tools 及安装后/mnt中有hgfs但没共享文件的解决办法

    一.首先是安装VMWare tools打开虚拟机软件,在菜单栏‘虚拟机’子菜单下‘安装VMware Tools' 1.以root身份进入Linux 2.此时把linux的/dev/cdrom设备挂载到 ...

  2. 【0.3】mysql复制的日常管理维护，mysql复制常见问题处理

    [1]复制的日常管理 #复制的日常管理与维护 [1.1]show slave status\G :在从库查看从库线程状态 [1.2]flush tables with read lock;  :主从不 ...

  3. 自然语言处理工具hanlp定制用户词条

    作者:baiziyu 关于hanlp的文章已经分享过很多,似乎好像大部分以理论性的居多.最近有在整理一些hanlp应用项目中的文章,待整理完成后会陆续分享出来.本篇分享的依然是由baiziyu 分享的 ...

  4. 使用javascript完成一个简单工厂设计模式。

    在JS中创建对象会习惯的使用new关键字和类构造函数(也是可以用对象字面量). 工厂模式就是一种有助于消除两个类依赖性的模式. 工厂模式分为简单工厂模式和复杂工厂模式,这篇主要讲简单工厂模式. 简单工 ...

  5. Laravel之杂记

    1.composer设置国内镜像加速 composer config -g repo.packagist composer https://mirrors.aliyun.com/composer/ 2 ...

  6. Linux-1.5日志查看常用命令

    常访问的日志目录:\data\log\(message系统 | secure安全 | maillog邮件) 进入日志目录 find \d1\data\log -name '*log' 在目录下查找以l ...

  7. bash 转换为C代码

    bash 转换为C代码,并编译为可执行文件 [root@localhost ~]# wget http://www.datsi.fi.upm.es/~frosal/sources/shc-3.8.9. ...

  8. 多边形面积(Area_Of_Polygons)

    原理: 任意多边形的面积可由任意一点与多边形上依次两点连线构成的三角形矢量面积求和得出. 分析: 由于给出的点是相对于我们的坐标原点的坐标,每个点实际上我们可以当作一个顶点相对于原点的向量,如下图所示 ...

  9. 牛客 545A 小A与最大子段和 & CF 660F Bear and Bowling 4

    大意: 给定序列$a$, 求选择一个子区间$[l,r]$, 使得$\sum\limits_{i=l}^r(i-l+1)a_i$最大. $n\le2e5, |a_i|\le 1e7$. 记$s[i]=\ ...

  10. sql--inner join , out join

    inner join(又叫join) out join包括left join,right join和full join(也就是left+right)