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. 安装idea开发工具

    1.网上去下载一个安装包,有的是需要注册码的(可以网上搜索注册码) 2.设置快捷键,可以直接选择使用eclipse的快捷键 3.配置maven 4.配置Git 5.配置tomcat

  2. 《基于Apache Kylin构建大数据分析平台》

    Kyligence联合创始人兼CEO,Apache Kylin项目管理委员会主席(PMC Chair)韩卿 武汉市云升科技发展有限公司董事长,<智慧城市-大数据.物联网和云计算之应用>作者 ...

  3. unity5.3 安卓广告插件打包出错的理解

    今天打包带广告插件的安卓包,出现了问题 ,上网找了很多解决的办法.整理一下. 1,有的说法是unity5的BUG  因为同一个项目 用unity4.6打包就没问题 到5就出问题,当然 姑且可以这么认为 ...

  4. 我是如何反编译D-Link路由器固件程序并发现它的后门的

    OK,又是周末晚上,没有约会,只有一大瓶Shasta汽水和全是快节奏的音乐…那就研究一下程序吧. 一时兴起,我下载了D-link无线路由器(型号:DIR-100 revA)的固件程序 v1.13.使用 ...

  5. 使用script创建标签添加属性值和添加样式

    <mark>使用script创建标签和给标签属性值以及样式的方法</mark><script> window.onload=function(){ var btn= ...

  6. call 和 apply使用

      call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向.因为 JavaScript 的函数存在「定义时上下文」 ...

  7. webform LinQ

    LINQ,语言集成查询(Language Integrated Query)是一组用于c#和VB语言的扩展.它允许编写C#或者Visual Basic代码以查询数据库相同的方式操作内存数据. 他是一个 ...

  8. easyui验证

    1.验证是否必填 class="easyui-validatebox" missingMessage="必须填写" 2.验证字符串长度 class=" ...

  9. MVC 路由介绍

    我们新建一个ASP.NET MVC Web程序的时候,会生成一个Global.asax文件.如下: using System; using System.Collections.Generic; us ...

  10. Gerald's Hexagon

    Gerald's Hexagon Gerald got a very curious hexagon for his birthday. The boy found out that all the ...