• DIV+CSS中标签ul ol li dl dt dd用法


    ul ol li dl dt 
    dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦!

    DIV 
    CSS网页布局中常用的列表元素ul ol li dl dt dd释义,块级元素div尽量少用,和table一样,嵌套越少越好

    ol 
    有序列表。
    <ol>
    <li>……</li>
    <li>……</li>
    <li>……</li>
    </ol>
    表现为:

    1……
    2……
    3……
    ul 
    无序列表,表现为li前面是大圆点而不是123
    <ul>
    <li>……</li>
    <li>……</li>
    </ul>
    很多人容易忽略 
    dl dt dd的用法
    dl 内容块
    dt 内容块的标题
    dd 
    内容
    可以这么写:

    <dl>
    <dt>标题</dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
    </dl>
      dt 
    和dd中可以再加入 ol ul li和p
      理解这些以后,在使用div布局的时候,会方便很多,w3c提供了很多元素辅助布局。DD DT DL标签
     


    我们平时常用的是< ul>< li>标签,不过dd、dt标签也蛮不错,特别是发布程序的时候功能模块列表什么的可以使用它来排版。 


    < dl>< /dl>< dt>< /dt>< dd>< /dd> 

    < dl>< /dl>用来创建一个普通的列表,< dt>< /dt>用来创建列表中的上层项目,< 
    dd>< /dd>用来创建列表中最下层项目,< dt>< /dt>和< dd>< 
    /dd>都必须放在< dl>< /dl>标志对之间。看一下下边的例子您就会明白了:


    dl ——define 
    list——定义列表 
    dt ——define list title——用于生成定义列表中各列表项的标题,重复使用可以定义多个列表项的标题。 

    dd——define list define——用于生成定义列表各列表项的说明文字段,重复使用可以定义多个说明文字段。dd是对应dt的简短说明或解 


    例子:
    <dl> 
    <dt>Today 
    <dd>Today is yesterday. 

    <dt>Tomorrow 
    <dd>Tomorrow is today. 
    </dl> 



    例子2: 
    <html> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD 
    XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html 
    xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 

    <title>无标题文档</title> 
    <style type="text/css"> 

    <!-- 
    dt { 
            float: left; 
            60px; 

            margin: 0px; 
            padding: 0px; 

    dd { 
            
    float: left; 
            clear: none; 
            290px; 
            
    margin: 0px; 
            padding: 0px; 

    dl { 
            350px; 

            font-size: 9pt; 
            line-height: 1.5em; 
            
    position:relative; 
            margin: 0px; 
            padding: 0px; 

            left:15px; 

    .red { 
            color: #FF3300; 


    #box { 
            500px; 
             


    #box #content { 
            padding-top: 10px; 
            
    padding-right: 10px; 
            padding-bottom: 10px; 
            padding-left: 
    20px; 

    --> 
    </style> 
    </head> 
    <body> 

    <div id="box"> 
    <div id="content"> 
    <img 
    src=/Article/UploadFiles/200704/20070412091408274.gif align="left"/ > 

    <dl> 
            <dt>商品名称:</dt> 
            
    <dd><strong>[好大的一只啊] </strong>忧惠:<span 
    class="red"><em>8.5折</em></span></dd> 
            
    <dt>商品简介:</dt> 
            
    <dd>商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品品名称商品名称商品名称商品名称商品名称 
    商品名称商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称……[<span 
    class="red";>详细介绍</span>]</dd> 
            
    <dt>店铺地址:</dt> 
            <dd>商品名称</dd> 
            
    <dt>联系电话:</dt> 
            <dd>0000-12345678 87654321 
    </dd> 
    </dl> 
    </div> 
    </div> 
    </body></html> 
  • 相关阅读:
    javascript
    javascript
    javascript
    easyui datagrid checkbox multiple columns have been done do
    combogrid获取多个字段的方法
    jquery显示、隐藏div的方法
    纠正jQuery获取radio选中值的写法
    comgrid获取多选值
    xheditor
    java向图片上写字,两个图片合并的方法
  • 原文地址:https://www.cnblogs.com/silentdoer/p/8882014.html
Copyright © 2020-2023  润新知