1 ul

1)list-style:none;

3)设置宽度

2)清除浮动的影响,使高度自适应

2 li

1)向左浮动

2)设置margin和padding都为0

3 a

1) dsiplay :block

2)设置width和height

完整的代码如下:

ul
{
list-style:none;
width:1040px;
margin:0px auto;
zoom:1 }
ul:after
{
content:".";
font-szie:0px;
line-height:0px;
display:block;
clear:both;
}
ul li
{
float:left }
ul li a
{
text-decoration:none;
display:block;
width:130px;
height:50px; }

用ul 来制作导航栏的几个要点的更多相关文章

  1. 第8天:CSS制作导航栏

    今天主要学习了网页导航栏的制作.注意:引入外部CSS样式时,如果使用background:url(../images/1.png),一定记得用..跳出当前文件夹,回到上级目录. 一.导航栏实现步骤: ...

  2. css3制作导航栏

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

  3. C3制作导航栏分割线及立体风格

    //首先写一个导航栏样式 .nav{    width:560px;    height: 50px;    font:bold 0/50px Arial;    text-align:center; ...

  4. vue项目1-pizza点餐系统1-利用bootstrap4制作导航栏

    初次接触Bootstrap,简单谈一下理解.bootstrap是一个简单有强悍的前端框架,它是一个开源项目.当我们需要一些样式等,可以了解bootstrap的相关class.标签名称等所代表的意思,然 ...

  5. 运用<ul><li>做导航栏

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. css制作导航栏的上下三角

    1)先完成一个导航条 <style type="text/css"> .nav-ul{ list-style: none; } .nav-ul li{ width: 1 ...

  7. css ul li 制作导航条

    <html> <head> <style> .test ul{list-style:none;} .test li{float:left; width:100px; ...

  8. CSS制作导航栏

    最终效果: 代码: <!DOCTYPE html> <html> <head> <title>#练习册二</title> <style ...

  9. 巧妙使用checkbox制作纯css动态导航栏

    前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...

随机推荐

  1. 【腾讯云的1001种玩法】在腾讯云上创建您的SQL Cluster(5)

    版权声明:本文由李斯达 原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/97264001482830465 来源:腾云阁 h ...

  2. 【第1期】腾讯云的1001种玩法征集,Ipad mini和Kindle 等你拿!(文章评审中)

    版权声明:本文由阁主的小跟班原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/695994001482226944 来源:腾云 ...

  3. HADOOP命令介绍

    一.用户命令1.archive命令 (1).什么是Hadoop archives?Hadoop archives是特殊的档案格式.一个Hadoop archive对应一个文件系统目录. Hadoop ...

  4. Find命令的用法

    1. 在某目录下查找文件 [root@localhost ~]# find /usr/local -name pci.ids* /usr/local/share/pci.ids.gz [root@lo ...

  5. 常见的JavaScript函数

    JavaScript函数一共可分为5类:常规函数.数组函数.日期函数.数学函数和字符串函数. (1)常规函数(9个) alert函数:显示一个警告对话框,包括一个“确定”按钮. confirm函数:显 ...

  6. C#中 Request, Request.params , Request.querystring , Request.Form 区别 与联系用法

    C#中 Request, Request.params , Request.querystring , Request.Form 区别 与联系用法? Request.params , Request ...

  7. Python’s SQLAlchemy vs Other ORMs[转发 2]Storm

    Storm Storm is a Python ORM that maps objects between one or more databases and Python. It allows de ...

  8. mybatis高级(1)(入门回顾)

    首先入门案例(并且拿到新增记录当前id) 1.创建mybatis-config.xml文件 <?xml version="1.0" encoding="UTF-8& ...

  9. BADI_MATERIAL_CHECK(物料主数据表的增强检查)

    多次调用的BADI,'业务加载项定义的多重使用意味着可以有多个活动的 业务加载项实施.在进行调用时,将调用所有上述实施,但调用顺序不可预期. 因此,如果使用多重使用 业务加载项定义,那么顺序不得起到任 ...

  10. gulp教程之gulp-concat

    简介: 使用gulp-concat合并javascript文件,减少网络请求. 1.安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile.js文件 1. ...