当我们刚开始学习html/css的时候,对于padding 、float、行内元素、块级元素用起来可能会混淆,但是呢我们可以通过一个简单的nav案例来清楚各自具体作用。

1.首先我们创建一个大的容器,用来固定我们的nav在屏幕上展示

我们给它设置一个宽度和背景色。

2.我们设置nav的<div>标签属性,并让他依据它的父元素container给它居中显示。

这里的nav我们给它一个width和height。

3.我们再设置<ul>的属性,因为它是nav里面文字总的一个宽度,我们对它设置属性来进行文字位置的调整

黑色底部是container容器、 红色是nav、  白色是每个<li>标签设置相应的宽和高度 ,给<ul>设定一个padding-left:70px的内边距(注意:因为这里的白色区域加起来是600,所以说还有100你是看不见的)并对<li>进行左浮动float:left;

padding一般用于文字内容与父元素的距离。

4.最后我们设置标签<a>文字属性

我们首先给<a>文字设置宽和高度 宽度要小于<li>设置的宽度 ,高度一致。然后在这里可能有疑问,前面<li>设置了宽和高这里为什么又要设置。因为我们在这里设置宽和高是要根据<li>的宽和高来进行居中和行高对齐。

因为<a>标签又是行内元素,所以我们先要对它进行转化成块元素display:block;然后可以设置字体的样式。最后我们再把黑色背景块和白色背景块去掉,这样一个简单的nav就完成了。

<ul>标签设计简单导航栏的更多相关文章

  1. css制作最简单导航栏

    css制作最简单导航栏

  2. 【温故而知新-CSS】使用CSS设计网站导航栏

    body #nav li a { width: auto; } #nav li a:hover { background-color: #ffcc00; color: #fff; border-rig ...

  3. ul li做横向导航栏例子

    /* ul li以横排显示 */ /* 所有class为menu的div中的ul样式 */ div.menu ul { list-style:none; /* 去掉ul前面的符号 */ margin: ...

  4. jQuery实现简单导航栏的样式切换

    style css样式部分: ul{ margin: 0 auto; height: 50px; background-color: #369;} ul>li{ text-decoration: ...

  5. TabLayout+ViewPager制作简单导航栏

    先看样例,有图有真相 绑定viewpager 此处主要说明tablayout的使用方法,viewpager绑定fragment的介绍在其他文章说明 mBinding.tabsLayout.setupW ...

  6. CSS制作一个简单网页的下拉导航栏

    网页下拉导航栏的制作 网页下拉导航栏的制作很简单,只需要运用好CSS中伪选择器. 首先说明几个简单的伪选择器(比较常用的): link:连接平常的状态 visited:连接被访问过之后 hover:鼠 ...

  7. 通栏导航栏的制作,综合使用CSS属性,代码不超过30行

    这篇文章,小编带领大家一同做一个利用CSS技术实现的导航栏.通过这个导航栏的制作,希望大家能够对前几篇文章中学习到的CSS属性能有一个整体的认识,并能够达到灵活运用的程度. 承接文章:灵活控制块级元素 ...

  8. [HTML/CSS]导航栏的下划线跟随效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. CSS 笔记——导航栏、下拉菜单、提示工具

    8. 导航栏.下拉菜单.提示工具 (1)导航栏 垂直导航栏 <!DOCTYPE html> <html lang="en"> <head> &l ...

随机推荐

  1. linux (1)基本知识/目录/磁盘格式/文件系统

    一.linux基本知识介绍1.命令行格式:(按两次tab可以知道有多少个可执行命令,我的有1980个,用户有1960个)[用户名@linux主机名 ~(当前目录)]$ 命令 选项 参数1 参数2[ro ...

  2. css常用属性2

    1  浮动和清除浮动 在上篇的第十一节--定位中说道: CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 普通流和绝对定位已经说完,接下来就是浮动了. 什么是浮动? CSS 的 Float(浮动 ...

  3. iOS根据域名获取ip地址

    引入头文件 #include <netdb.h> #include <sys/socket.h> #include <arpa/inet.h> //根据域名获取ip ...

  4. 针对Openlayer3官网例子的简介

    网址:http://openlayers.org/en/latest/examples/ 如果大家想了解ol3能做什么,或者说已提供的API有什么,又闲一个个翻例子跟API累的话,就看看这个吧. 1. ...

  5. TOP命令详解(负载情况)

    简介 top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器. top显示系统当前的进程和其他状况,是一个动态显示过程,即可以通过用户按 ...

  6. Hadoop 一: NCDC 数据准备

    Hadoop 本文介绍Hadoop- The Definitive Guide一书中的NCDC数据准备,为后面的学习构建大数据环境; 环境 3节点 Hadoop 2.7.3 集群; java vers ...

  7. MyBatis 配置的一些小知识点

    MyBatis别名配置——typeAliases 类型别名是为 Java 类型设置一个短的名字.它只和 XML 配置有关,存在的意义仅在于用来减少类完全限定名的冗余.说白了就是预先设置包名 api是这 ...

  8. Python实战之IO多路复用select的详细简单练习

    IO多路复用 I/O多路复用指:通过一种机制,可以监视多个描述符,一旦某个描述符就绪(一般是读就绪或者写就绪),能够通知程序进行相应的读写操作. select   它通过一个select()系统调用来 ...

  9. Python中wx.FlexGridSizer

    FlexGridSizer是GridSizer的一个更灵活的版本.它与标准的GridSizer几乎相同,除了下面3点例外: 1.每行和每列可以有各自的尺寸.2.默认情况下,当尺寸调整时,它行和列整体改 ...

  10. 提取多层嵌套Json数据

    在.net 2.0中提取这样的json {"name":"lily","age":23,"addr":{"ci ...