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. 7 -- Spring的基本用法 -- 3...

    7.3 Spring 的核心机制 : 依赖注入 Spring 框架的核心功能有两个. Spring容器作为超级大工厂,负责创建.管理所有的Java对象,这些Java对象被称为Bean. Spring容 ...

  2. js文件如何最后加载

    总结一下,大概有三种方式 1.最简单粗暴的:将js文件放在最后写 2.window.onload当一个文档完全下载到浏览器中时,才会触发window.onload事件.这意味着页面上的全部元素对js而 ...

  3. 引用、引用和术语定义<abbr><acronym><address><bdo><blockquote><q><cite><dfn>

    <abbr>-缩写 <acronym>-首字母缩写  <address>-地址 <bdo>-文字方向 <blockquote>-长的引用 & ...

  4. SAP SE11 网格布局显示

    SE11 进入数据显示界面后 在  Settings -> User Parameters,  Data Browser 页面 勾选ALV Grid display 即可.

  5. 用PHP解析类JSON字符串为数组的实现

    题目:把字符串嵌套关系转换成数组,字符串只包含成对中括号.数字和逗号字符串:(1,(1,2,(1,(1,2,(1)),3)),3,(1,(1,2,((1((1,(1,2,(1,2,3),4,5),3) ...

  6. guava学习--FutureFallback

    FutureFallback提供一个Future的备用来替代之前失败的Future,常被用来作为Future的备份或者默认的值. @Testpublic void testFuturesFallbac ...

  7. JQuery的ajaxFileUpload图片上传初试

    本案例主要说讲使用ajaxFileUpload实现图片的异步上传. 1.html代码部分 这里的代码,主要设置一下name,后台获取时候要用到,还有设置一个onchange的事件对应的方法:ajaxF ...

  8. int unsigned实验

    create table t1(a int unsigned,b int unsigned); insert into t1 select 1,2; select 1-2 from t1; Error ...

  9. FZU 2150 Fire Game

    Fire Game Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit St ...

  10. CentOS 7 Mysql yum源

    CentOS 7 安装Mysqlrpm -ivh http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpmyum install m ...