练习一个超链接元素在文档流当中，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. mysql 构造连续的日期

    需求,我想以 年-月-日的格式,统计自 2019-08-20日 前10天的记录数,如果该天没有任何一条记录,则给予0 原始数据->我想要的结果集数据    ==============> ...

  2. 如何在java中去除中文文本的停用词

    1.  整体思路 第一步:先将中文文本进行分词,这里使用的HanLP-汉语言处理包进行中文文本分词. 第二步:使用停用词表,去除分好的词中的停用词. 2.  中文文本分词环境配置 使用的HanLP-汉 ...

  3. servlet_cdi自动注入

    @WebServlet("/cdiservlet")//url映射,即@WebServlet告诉容器,如果请求的URL是"/cdiservlet",则由NewS ...

  4. 【面试向】2019 年微软秋招笔试 Problem 3

    Problem Check if a positive integer $n$ can be written as sum of a positive integer and reverse of t ...

  5. Swoft 2.0.5 更新，新增高效秒级定时任务、异常管理组件

    什么是 Swoft ? Swoft 是一款基于 Swoole 扩展实现的 PHP 微服务协程框架.Swoft 能像 Go 一样,内置协程网络服务器及常用的协程客户端且常驻内存,不依赖传统的 PHP-F ...

  6. layui自定义插件citySelect 省市区三级联动选择

    省市区三级菜单联动插件 citySelect.js /** * @ name : citySelect 省市区三级选择模块 * @ Author: aggerChen * @ version: 1.0 ...

  7. Encryption (hard) CodeForces - 958C3 (树状数组)

    大意: 给定序列$a$, 要求将$a$分成$k$个非空区间, 使得区间和模$p$的和最小, 要求输出最小值. $k$和$p$比较小, 直接暴力$dp$, 时间复杂度是$O(nklogp)$, 空间是$ ...

  8. Charles学习（三）之使用Map local代理本地静态资源以及配置网页代理在Mac模拟器调试iOS客户端

    前言 问题一:我们在App内嵌H5开发的过程中,肯定会遇到一个问题就是我不想在chrome的控制台中调试,我想要在手机上调试,那么如何解决这个问题呢? 问题二:我们期待调试时达到的效果就是和Charl ...

  9. 微软商店(Microsoft store)删除之后恢复,一行代码搞定

    首先以管理员身份运行Windows PowerShell 地址C:\Users\Administrator\AppData\Roaming\Microsoft\Windows\Start Menu\P ...

  10. IDEA修改Maven全局配置

    在使用过程中发现,IDEA每次新建一个Project ,这个maven配置都会初始化默认的. 这里需要设置下全局配置: File -> Other Settings -> Settings ...