<ul>标签设计简单导航栏
当我们刚开始学习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>标签设计简单导航栏的更多相关文章
- css制作最简单导航栏
css制作最简单导航栏
- 【温故而知新-CSS】使用CSS设计网站导航栏
body #nav li a { width: auto; } #nav li a:hover { background-color: #ffcc00; color: #fff; border-rig ...
- ul li做横向导航栏例子
/* ul li以横排显示 */ /* 所有class为menu的div中的ul样式 */ div.menu ul { list-style:none; /* 去掉ul前面的符号 */ margin: ...
- jQuery实现简单导航栏的样式切换
style css样式部分: ul{ margin: 0 auto; height: 50px; background-color: #369;} ul>li{ text-decoration: ...
- TabLayout+ViewPager制作简单导航栏
先看样例,有图有真相 绑定viewpager 此处主要说明tablayout的使用方法,viewpager绑定fragment的介绍在其他文章说明 mBinding.tabsLayout.setupW ...
- CSS制作一个简单网页的下拉导航栏
网页下拉导航栏的制作 网页下拉导航栏的制作很简单,只需要运用好CSS中伪选择器. 首先说明几个简单的伪选择器(比较常用的): link:连接平常的状态 visited:连接被访问过之后 hover:鼠 ...
- 通栏导航栏的制作,综合使用CSS属性,代码不超过30行
这篇文章,小编带领大家一同做一个利用CSS技术实现的导航栏.通过这个导航栏的制作,希望大家能够对前几篇文章中学习到的CSS属性能有一个整体的认识,并能够达到灵活运用的程度. 承接文章:灵活控制块级元素 ...
- [HTML/CSS]导航栏的下划线跟随效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS 笔记——导航栏、下拉菜单、提示工具
8. 导航栏.下拉菜单.提示工具 (1)导航栏 垂直导航栏 <!DOCTYPE html> <html lang="en"> <head> &l ...
随机推荐
- linux (1)基本知识/目录/磁盘格式/文件系统
一.linux基本知识介绍1.命令行格式:(按两次tab可以知道有多少个可执行命令,我的有1980个,用户有1960个)[用户名@linux主机名 ~(当前目录)]$ 命令 选项 参数1 参数2[ro ...
- css常用属性2
1 浮动和清除浮动 在上篇的第十一节--定位中说道: CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 普通流和绝对定位已经说完,接下来就是浮动了. 什么是浮动? CSS 的 Float(浮动 ...
- iOS根据域名获取ip地址
引入头文件 #include <netdb.h> #include <sys/socket.h> #include <arpa/inet.h> //根据域名获取ip ...
- 针对Openlayer3官网例子的简介
网址:http://openlayers.org/en/latest/examples/ 如果大家想了解ol3能做什么,或者说已提供的API有什么,又闲一个个翻例子跟API累的话,就看看这个吧. 1. ...
- TOP命令详解(负载情况)
简介 top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器. top显示系统当前的进程和其他状况,是一个动态显示过程,即可以通过用户按 ...
- Hadoop 一: NCDC 数据准备
Hadoop 本文介绍Hadoop- The Definitive Guide一书中的NCDC数据准备,为后面的学习构建大数据环境; 环境 3节点 Hadoop 2.7.3 集群; java vers ...
- MyBatis 配置的一些小知识点
MyBatis别名配置——typeAliases 类型别名是为 Java 类型设置一个短的名字.它只和 XML 配置有关,存在的意义仅在于用来减少类完全限定名的冗余.说白了就是预先设置包名 api是这 ...
- Python实战之IO多路复用select的详细简单练习
IO多路复用 I/O多路复用指:通过一种机制,可以监视多个描述符,一旦某个描述符就绪(一般是读就绪或者写就绪),能够通知程序进行相应的读写操作. select 它通过一个select()系统调用来 ...
- Python中wx.FlexGridSizer
FlexGridSizer是GridSizer的一个更灵活的版本.它与标准的GridSizer几乎相同,除了下面3点例外: 1.每行和每列可以有各自的尺寸.2.默认情况下,当尺寸调整时,它行和列整体改 ...
- 提取多层嵌套Json数据
在.net 2.0中提取这样的json {"name":"lily","age":23,"addr":{"ci ...