校园学生学习娱乐资源第一门户 校园第一站 源于校园 服务于校园 分享资源和快乐 网站地图 高级搜索 RSS订阅 收藏本站 设为首页
首页 | 校园 | 教育 | 考试 | 电脑 | 英语 | 读书 | 就业 | 论文 | 体育 | 健康 | 图片 | 分类信息
Q Q | 下载 | 游戏 | 音乐 | 影视 | 专题 | 祝福 | 百科 | 问答 | 博客 | 会员 | 社区 | 校园论坛
·偶像剧免费在线收看
·DEDECMS免费模板规则下载
·
·全能空间、网站建设仅200
Dreamweaver | FrontPages | HTML | Javascript | 文章搜索:
  当前位置: 主页>电脑>网页设计>DIV+CSS> 文章正文

CSS教程:li和ul标签

http://www.xydyz.com 来源:校园第一站 2007-12-04 阅读: 评论


  • LI代码的格式化:
    A).运用CSS格式化列表符: ul li{
    list-style-type:none;
    }
    B).如果你想将列表符换成图像,则: ul li{
    list-style-type:none;
    list-style-image: url(/blog/images/icon.gif);
    }
    C).为了左对齐,可以用如下代码: ul{
    list-style-type:none;
    margin:0px;
    }
    D).如果想给列表加背景色,可以用如下代码: ul{
    list-style-type: none;
    margin:0px;
    }
    ul li{
    background:#CCC;
    }
    E).如果想给列表加MOUSEOVER背景变色效果,可以用如下代码: ul{ list-style-type: none; margin:0px; }
    ul li a{ display:block; width: 100%; background:#ccc; }
    ul li a:hover{ background:#999; }说明:display:block;这一行必须要加的,这样才能块状显示!

    F).LI中的元素水平排列,关键FLOAT:LEFT: ul{
    list-style-type:none;
    width:100%;
    }
    ul li{
    width:80px;
    float:left;
    }

    <ul><li>的区别

    <LI> 的参数设定(常用):

     


    例如: <li type="square" value="4">

    type="square"
    只适用于非顺序清单,设定符号款式,其值有三种,如下,内定为 type="disc":
    符号 是当 type="disc" 时的列项符号。
    符号 if" width=10 height=10 border=0> 是当 type="circle" 时的列项符号。
    符号 是当 type="square" 时的列项符号。
    value="4"
    只适用于顺序清单,设定该一项的数目,其後各项将以此作为起始数目而递增,但前面各项则不受影响,其值只能是 1,2,3.. 等整数,没有内定值。
    <UL>称为无序清单标记。
    所谓无序清单就是在每一项前面加上 、、等符号,故又称符号清单。
    <UL> 的参数设定(常用):
    例如: <UL type="square">

    type="square"
    设定符号款式,其值有三种,如下,内定为 type="disc":
    符号 是当 type="disc" 时的列项符号。
    符号 是当 type="circle" 时的列项符号。
    符号 是当 type="square" 时的列项符号。

    <ul>是项目列表,<li>是列表项,项目列表就是用符号来列的,所以你列出来默认的就是黑点啦,还有一个是<ol>这个是编号列表,用数字来列的,也是用<li>做列表项


    <li>是 list item 即列表项,但列表有很两种,所以外面得有 <ul> 或者 <ol> 用来区别无序列表(小点点)和有序列表(1,2,3...)。



  • 【责任编辑:admin 】




    评论
    用户名: 新注册) 密码: 匿名评论
    评论内容:不能超过250字,请自觉遵守互联网相关政策法规。
      相关文章
    CSS+DIV网页样式与布局视频教程全集
    DIV CSS制作网页时易犯的错误总结
    CSS快速入门
    怎样编写CSS?
    CSS属性
      最新图片
    如何使用CSS来进行网页排版
    如何使用CSS来进行网
    Div+CSS布局入门教程
    Div+CSS布局入门教程
    CSS滤镜-Xray属性
    CSS滤镜-Xray属性
    CSS滤镜-Wave属性
    CSS滤镜-Wave属性
    CSS滤镜-Shadow属性
    CSS滤镜-Shadow属性
    CSS滤镜-Mask属性
    CSS滤镜-Mask属性
    CSS滤镜-alphInvert属性
    CSS滤镜-alphInvert属
    CSS滤镜-Gray属性
    CSS滤镜-Gray属性
    24小时TOP
       
    ·CSS+DIV网页样式与布局视频教程全集
    ·如何使用CSS来进行网页排版
    ·Div+CSS布局入门教程
    ·CSS网页样式设计攻略全集
    ·CSS滤镜-Xray属性
    ·DIV CSS制作网页时易犯的错误总结
    ·CSS滤镜-Shadow属性
    ·CSS滤镜-Chroma属性
    热门图片
      更多>>>
    如何使用CSS来进行网页排版
    如何使用CSS来进行
    Div+CSS布局入门教程
    Div+CSS布局入门教
    CSS滤镜-Xray属性
    CSS滤镜-Xray属性
    CSS滤镜-Shadow属性
    CSS滤镜-Shadow属性
    焦点聚焦
      更多>>>
    ·CSS网页样式设计攻略全集
    ·Div+CSS布局入门教程
    ·DIV CSS制作网页时易犯的错误总结
    论坛精华
      更多>>>
    ·真钱斗地主轧金花龙虎板玖和百家乐http://c
    ·22岁女大学生要嫁48岁乞丐(图)
    ·一条短信毁了一种水果 “蛆橘”传言流变调
    ·蒙古风情十四怪 (一)
    ·《中国高新技术企业》--www.txrb.com--科信
    ·东莞大金空调官方介绍 13559702882卢生
    ·乐众国际最新博彩游戏!真实!新鲜!刺激!
    ·快国庆了大家怎么安排
    最新图片
      更多>>>
    如何使用CSS来进行网页排版
    如何使用CSS来进行
    Div+CSS布局入门教程
    Div+CSS布局入门教
    CSS滤镜-Xray属性
    CSS滤镜-Xray属性
    CSS滤镜-Wave属性
    CSS滤镜-Wave属性
    推荐文章
      更多>>>
    ·如何使用CSS来进行网页排版
    ·Div+CSS布局入门教程
    ·CSS滤镜-Xray属性
    ·CSS滤镜-Wave属性
    ·CSS滤镜-Shadow属性
    ·CSS滤镜-Mask属性
    ·CSS滤镜-alphInvert属性
    ·CSS滤镜-Gray属性
    关于我们 - 版权声明 - 免责声明 - 欢迎投稿 - 广告服务 - 友情链接 - 网站建设 - 诚聘英才 - 联系我们 - -
    Copyright @2007-2009 www.xydyz.com © All rights reserved.
    校园第一站 版权所有 客服E-Mail:hyperblue@163.comn 点击这里给我发消息
    Site design by hyperblue 鄂ICP备07009403号 Powered by DedeCms