码迷,mamicode.com
首页 > 其他好文 > 详细

<ul>标签设计简单导航栏

时间:2017-11-01 17:26:18      阅读:247      评论:0      收藏:0      [点我收藏+]

标签:为我   为什么   color   作用   idt   padding   contain   容器   背景   

当我们刚开始学习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>标签设计简单导航栏

标签:为我   为什么   color   作用   idt   padding   contain   容器   背景   

原文地址:http://www.cnblogs.com/newjsblogs/p/7767444.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!