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. linux笔记:linux服务管理

    linux服务的分类: 启动和自启动: 查询已经安装的服务: RPM包的默认安装路径: 独立服务的启动: 独立服务的自启动: 基于xinetd的服务的管理: xinetd服务的自启动: 源码包安装服务 ...

  2. yii2-basic后台管理功能开发之三:自定义GridView列显示

    在第二篇 yii2-basic后台管理功能开发之二:创建CRUD增删改查 中,我们利用gii工具生成的结果一般并不是我们想要的结果. 我们需要根据自己的需求自定义列显示.我遇到的主要是一下变更: 时间 ...

  3. cin, cin.getline等函数

    char s[100]; cin>>s;         // 输入一个字符串,遇“空格”.“TAB”.“回车”都结束 cin.getline(s, 20);    // cin.get( ...

  4. eclipse svn提交报错

    修改文件格式:右键-properties-text file encoding-other UTF-8

  5. thinkPHP的用法之创建新项目

    1 配置文件中 新增数组元素:'DEFAULT_APPS'=> array('api', 'admin', 'home', 'megagame'), 2 新增样式变量 在view.class.p ...

  6. Right Here Waiting

    俺不会和小时候一样,因为别人听,自己就不听了^^

  7. 复制物料(参考的MMCC想法)

    MMCC这个事务码没用过,也是才听到的,都是业务搞起来的...然后感觉这个东西有点意思,就搞搞咯 网上找的一篇文章,自己修改的.改了默认收货工厂为创建时的工厂,因为这边一直报收货工厂必输...不管是不 ...

  8. web工程关于500错误

    昨天一直被一个诡异问题困扰,解决了之后开心得的我连玩了一下午,哈哈哈哈哈哈哈哈-- 具体问题是这样的额,本地跑的贼正常,一发到测试服务器就报500错误,具体错误信息是.  HTTP Status 50 ...

  9. synchronized和ReentrantLock

    一.什么是sychronized sychronized是java中最基本同步互斥的手段,可以修饰代码块,方法,类. 在修饰代码块的时候需要一个reference对象作为锁的对象. 在修饰方法的时候默 ...

  10. Python【7】-数据分析准备

    一.经常用到的python库: Numpy:Python科学计算的基础包: pandas:提供了能使我们快捷的处理结构化数据的大量数据结构和函数: matplotlib:用于绘制数据图表的python ...