立即注册 找回密码

QQ登录

只需一步,快速开始

查看: 3882|回复: 2

[DIV+CSS 教程笔记01] 有序列表和无序列表<ul></ul> <ol><ol>之间的介绍

[复制链接]
发表于 2014-10-7 16:48:45 | 显示全部楼层 |阅读模式
道勤网-数据www.daoqin.net

亲注册登录道勤网-可以查看更多帖子内容哦!(包涵精彩图片、文字详情等)请您及时注册登录-www.daoqin.net

您需要 登录 才可以下载或查看,没有账号?立即注册

x
有序列表和无序列表<ul></ul>      <ol><ol>之间的介绍

1.什么是有序列表和无序列表
333333333.jpg
2.那么在显示中,就应该这样写,她们都包裹了<li></li>
3.我们在控制有序列表和无序列表的时候,要记得可以用派生选择器,.....下的什么标签来控制,这样很方便
如图
QQ截图20141007163840.jpg


代码如下:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
  3. <head>
  4. <title>有序和无序列表的学习</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <meta name="description" content="道勤教育 http://www.daoqin.net" />
  7. <style>
  8.         ul li{
  9.                 list-style-type:square;
  10.         }
  11.        
  12. </style>
  13. </head>
  14.     <body>
  15.             <ul>
  16.                     <li>春</li>
  17.                     <li>夏</li>
  18.                     <li>秋</li>
  19.                     <li>冬</li>
  20.             </ul>

  21.             <ol>
  22.                     <li>村</li>
  23.                     <li>夏</li>
  24.                     <li>秋</li>
  25.                     <li>冬</li>
  26.             </ol>
  27.     </body>
  28. </html>
复制代码


道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户,那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信:q792472177免费电话、后台提交工单这些方式联系道勤主机客服! 如果您不是我们的客户也没问题,点击页面最右边的企业QQ在线咨询图标联系我们并购买后,我们为您免费进行无缝搬家服务,让您享受网站零访问延迟的迁移到道勤主机的服务!
 楼主| 发表于 2014-10-7 16:52:54 | 显示全部楼层
道勤网-数据www.daoqin.net
对于有序和无序列表的,设置,在实际中,一般都是为none的,既为css初始化。我们一般会背景图片来进行替换,这样美观。我写这些,就是为了方便大家学习,知道有这么个概念。
 楼主| 发表于 2014-10-7 16:54:41 | 显示全部楼层
道勤网-数据www.daoqin.net
list-style-type
基本特性
初始值: disc  适用于: elements with 'display: list-item'  
继承性: 有  百分比: N/A  
媒体: visual  版本: CSS1/CSS2  
兼容性: IE4+ NS6+   

基本语法
list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin


同时在给大家附上,相关数值
语法取值
disc            :  CSS1  默认值。实心圆
circle          :  CSS1  空心圆
square          :  CSS1  实心方块
decimal         :  CSS1  阿拉伯数字
lower-roman     :  CSS1  小写罗马数字
upper-roman     :  CSS1  大写罗马数字
lower-alpha     :  CSS1  小写英文字母
upper-alpha     :  CSS1  大写英文字母
none            :  CSS1  不使用项目符号
armenianl       :  CSS2  未支持。传统的亚美尼亚数字
cjk-ideographic :  CSS2  未支持。浅白的表意数字
georgian        :  CSS2  未支持。传统的乔治数字
lower-greek     :  CSS2  未支持。基本的希腊小写字母
hebrew          :  CSS2  未支持。传统的希伯莱数字
hiragana        :  CSS2  未支持。日文平假名字符
hiragana-iroha  :  CSS2  未支持。日文平假名序号
katakana        :  CSS2  未支持。日文片假名字符
katakana-iroha  :  CSS2  未支持。日文片假名序号
lower-latin     :  CSS2  未支持。小写拉丁字母
upper-latin     :  CSS2  未支持。大写拉丁字母



使用说明
设置或检索对象的列表项所使用的预设标记。若 list-style-image 属性值为 none 或指定 url 地址的图片不能被显示时,此属性将发生作用。假如一个列表项目的左外补丁( margin-left )被设置为 0 ,则列表项目标记不会被显示。左外补丁( margin-left )最小可以被设置为 30 。仅作用于具有 display 属性值等于 list-item 的对象。如 li 对象。
注意: ol 对象和 ul 对象的 type 属性为其后的所有列表项目(如 li 对象)指明列表属性。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 listStyleType 。

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

道勤网- 推荐内容!上一条 /2 下一条

!jz_fbzt! !jz_sgzt! !jz_xgzt! 快速回复 !jz_fhlb! !jz_lxwm! !jz_gfqqq!

关于我们|手机版|小黑屋|地图|【道勤网】-www.daoqin.net 软件视频自学教程|免费教程|自学电脑|3D教程|平面教程|影视动画教程|办公教程|机械设计教程|网站设计教程【道勤网】 ( 皖ICP备15000319号-1 )

GMT+8, 2024-11-14 12:33

Powered by DaoQin! X3.4 © 2016-2063 Dao Qin & 道勤科技

快速回复 返回顶部 返回列表