HTML+CSS详细知识点（下）

已于 2023-01-30 20:24:50 修改
阅读量1.1k 收藏 13
点赞数 5
分类专栏： html/css 文章标签： html css 前端
于 2022-11-28 11:10:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52108058/article/details/128061096
版权

🔥上一篇🔥HTML+CSS详细知识点复习（上）

文章目录

五、列表和超链接

1、列表标签

1、无序列表（<ul>）
无序列表是一种不分排序的列表，各个列表项之间没有顺序级别之分
语法：

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

type属性 ul 和 li 都有
属性值：
disc：默认属性，实心圆
circle：空心圆
square：实心正方形
如：

<ul>
    <li type="disc">列表项1</li>
    <li type="circle">列表项2</li>
    <li type="square">列表项3</li>
</ul>

演示：
在这里插入图片描述

2、有序列表（<ol>）
有序列表是一种强调排列顺序的列表
语法：

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>

type属性：属性值：
1（默认），1 2 3
a或A，a b c/A B C
i或I ，i ii iii /I II III

start属性：属性值：数字（规定项目符号的起始地址）
value属性：属性值：数字（规定项目符号的数字）
如：

    <ol>
        <li type="1">列表项1</li>
        <li type="a">列表项2</li>
        <li type="i">列表项3</li>
    </ol>

演示：
在这里插入图片描述

3、定义列表（<dl>）
定义列表包含3个标签，即di、dt、dd
语法：

<dl>
    <dt>定义列表1</dt>
    <dd>dd是定义列表1的描述信息1</dd>
    <dd>dd是定义列表1的描述信息2</dd>
</dl>

注意：①dl、dt、dd 3个标签之间不允许出现其他标签
②dl标签必须与dt标签相邻

4、列表的嵌套
如：

    <ul>
        <li>咖啡
            <ol>
                <li>拿铁</li>
                <li>卡布奇诺</li>
            </ol>
        </li>
        <li>茶
            <ol>
                <li>龙井</li>
                <li>铁观音</li>
            </ol>
        </li>
    </ul>

演示：

在这里插入图片描述

2、CSS控制列表样式

1、list-style-type属性
属性值：
disc:实心圆
circle:空心圆
square:实心方块
none:不使用项目符号
如： li{list-style-type: none;}
演示：
在这里插入图片描述
2、list-style-image属性
如： li{list-style-image: url("images/small.png");}
演示：
在这里插入图片描述
3、list-style-position属性
控制列表项目符号相对于列表项内容的位置
属性值：
inside：列表项符号位于列表项文本以内
outside：列表项符号位于列表项文本以外（默认值）
如： .in{list-style-position: inside;} .out{list-style-position: outside;}

    <ul class="in">
        <li type="disc">列表项1</li>
        <li type="circle">列表项2</li>
        <li type="square">列表项3</li>
    </ul>
    <ul class="out">
        <li>列表项4</li>
        <li>列表项5</li>
        <li>列表项6</li>
    </ul>

演示：
在这里插入图片描述
4、list-style属性
如： li{list-style: circle inside;}

3、超链接

语法： <a href="跳转目标" target="目标窗口的弹出方式" >文本或图像</a>
a 标签是一个行内元素，用于定义超链接
属性：

  • href：用于指定链接目标的url地址
  • target：用于指定链接页面的打开方式，_self默认值，在原窗口打开，_blank在新窗口打开

如： <a href="http://www.baidu.com" target="_self">_self在原窗口打开</a> <a href="http://www.csdn.com" target="_blank">_blank在新窗口打开</a>
演示：
在这里插入图片描述

链接有4中状态，分为未访问、已访问、悬停时和点击时，可根据链接处于不同的状态设置不同的样式
通过如下方式获取链接所处的状态：

a:link  未被访问
a:visited	已被访问
a:hover	悬停时
a:active	被点击

如果同时定义4种状态的样式，其书写顺序需要按link–visited–hover–active 顺序进行设置，否则失效
如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			a:link{color: red;}//未被访问显示红色
			a:visited{color: aqua}//已被访问显示aqua色
			a:hover{color: pink;}//悬停显示紫色
			a:active{color: yellow;}//点击显示黄色
			a{
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<a href="#0">首页</a>
		<a href="#1">新闻</a>
		<a href="#2">娱乐</a>
		<a href="#3">体育</a>
		<a href="#4">资讯</a>
		<a href="#5">影视</a>
	</body>
</html>

演示：
在这里插入图片描述

六、表格和表单

1、表格

1、创建表格
语法：

   <table>
       <tr>
           <td>单元格内文字</td>
       </tr>
   </table>
  • tr：用于定义表格的一行，有几对tr表示表格有几行
  • td：用于定义表中的单元格，有几对td表示表格有几列
    如：
    <table border="1px" >
        <tr>
            <th>姓名</th>
            <th>英语</th>
            <th>数学</th>
            <th>语文</th>
        </tr>
        <tr>
            <td>王少飞</td>
            <td>99</td>
            <td>98</td>
            <td>97</td>
        </tr>
        <tr>
            <td>周芷若</td>
            <td>99</td>
            <td>88</td>
            <td>96</td>
        </tr>
    </table>

演示：
在这里插入图片描述
2、table标签的属性

  1. border属性
    设置表格的边框，默认值为0
    如： <table border="10px" >
    演示：（可以省略单位px）
    在这里插入图片描述
  2. cellspacing属性
    单元格与单元格之间的空间，默认距离2px
    如： <table border="10px" cellspacing="20px">
    演示：
    在这里插入图片描述
  3. cellpadding属性
    单元格内容与单元格之间的空白间距。默认距离1px
    如： <table border="10px" cellpadding="20px">
    演示：
    在这里插入图片描述
  4. width属性和height属性
    默认表格的宽度和高度是自适应的，依靠表格内的内容来支撑
    如： <table border="10px" width="200px" height="200px">
    演示：
    在这里插入图片描述
  5. align属性
    定义表格水平对齐方式，单元格内容不受影响
  6. bgcolor属性
    设置表格的背景颜色
    如： <table border="10px" width="200px" height="200px" bgcolor="aqua">
    演示：
    在这里插入图片描述
  7. background属性
    设置表格的背景图像
    如： <table border="10px" width="200px" height="200px" background="images/lufei.jpg">
    演示：
    在这里插入图片描述

3、tr标签属性
某一行特殊显示
如： <tr height="70px" align="center" valign="middle" bgcolor="aqua">
演示：
在这里插入图片描述
4、td标签属性
某一单元格特殊显示
如： <th colspan="2">性别</th> <td rowspan="2">北京</td>
演示：（colspan占几列，rowspan占几行）
在这里插入图片描述

5、th标签属性
应用表格时经常需要为表格设置表头，以使表格的格式更加清晰

2、表单

1、表单的构成

  • 表单控件；
    包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、搜索框等
  • 提示信息：
    提示用户进行填写和操作
  • 表单域：
    相当一个容器，用来容纳所有的表单控件和提示信息

2、创建表单

  1. action属性
    用于指定接收并处理表单数据的服务器程序的url地址
    如： <form action="form_action.asp">
  2. method属性
    用于设置表单数据的提交方式，get/post方法
    如： <form action="form_action.asp" method="get">
  3. name属性
    用于指定表单的名称
    如： <form action="form_action.asp" method="get" name="first">

3、表单控件

  1. input控件
    语法：<input type="控制类型"/>
    type属性：属性值：
    text：单行文本输入框
    password：密码输入框
    radio：单选框
    checkbox：多选框
    button：普通按钮
    submit：提交按钮
    reset：重置按钮
    image：图像形式的提交按钮
    hidden：隐藏域
    file：文件域
    disable属性：属性值：disable：第一次加载页面时禁用该控件
    checked属性：属性值：checked：定义默认被选中的项
    maxlength属性：属性值：正整数：允许输入的最多字符
    size：属性值：正整数：input控件在页面显示的宽度
    如：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="form_action.asp" method="get" name="first">
        用户名：<input type="text" value="大明" maxlength="6"/><br>
        密码：<input type="password" size="40"/><br>
        性别：
        <input type="radio" name="sex" checked="checked" value="男"/>
        <input type="radio" name="sex" value="女"/><br>
        兴趣：
        <input type="checkbox" value="唱"/>
        <input type="checkbox" value="跳"/>
        <input type="checkbox" value="rap"/>
        <input type="checkbox" value="篮球"/><br>
        上传头像：
        <input type="file"/><br>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>
        <input type="button" value="普通按钮"/>
        <input type="image" src="images/small.png"/>
    </form>
</body>
</html>

    演示：
    在这里插入图片描述

  2. textarea控件
    如果需要输入大量的信息，单行文本输入框就不在适用，通过textarea可以创建多行文本输入框
    语法：<textarea cols="每行中的字符数" rows="显示的行数">文本内容</textarea>

    如：

        <textarea cols="50" rows="5">文本内容</textarea><br>
    <input type="submit" />

    演示：（每行显示50个字符，共显示5行）
    在这里插入图片描述

  3. select控件
    下拉菜单
    语法：

        <select>
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
    </select>

    size属性：指定下拉菜单的可见选项数
    multiple属性：定义multiple="multiple"时，下拉菜单具有多项选择功能，方法为按住Ctrl同时选择多项
    selected：默认选中
    如：

       普通下拉框<br>
    <select>
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
    </select><br>
    单选默认可见2项<br>
    <select size="2">
        <option selected="selected">选项1</option>
        <option>选项2</option>
        <option>选项3</option>
    </select><br>
    多选<br>
    <select multiple="mutiple">
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
    </select>

    演示：
    在这里插入图片描述

七、浮动与定位

1、元素的浮动

浮动就是让元素可以向左或向右移动，直到它的外边距碰到其父级的内边距或者是上一个元素的外边距(这里指的上一个元素不管它有没有设置浮动，都会紧挨着上一个元素)
语法：选择器{float:属性值}
属性值：left（元素向左浮动）、right（元素向右浮动）、none（元素不浮动）
如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            width: 500px;
            border: 5px solid aqua;
        }
        .box1{
            width: 50px;
            height: 50px;
            border: 1px solid black;
            background-color: red;
            float: left;          
        }
        .box2{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            background-color: yellow;
        }
        .box3{
            width: 150px;
            height: 150px;
            border: 1px solid black;
            background-color: aqua;  
        }
        p{
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            background-color: bisque;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        <div class="box3">box3</div>
        <p>hello p标签</p>
    </div>
</body>
</html>

演示：（给box1设置向左浮动）
在这里插入图片描述

（给box1和box2设置向左浮动）
在这里插入图片描述
（给box1、box2和box3设置向左浮动）
在这里插入图片描述

注意：不管是什么属性的元素，如果设置了浮动属性，该元素就变成了具有inline-block属性的元素
结论：
（1）没有设置浮动的元素会填充浮动元素留下来的空间
（2）浮动元素会和非浮动元素发生重叠，浮动元素会在图层最上面
（3）使用浮动时，该元素会脱离文档流，后面的元素会无视这个元素，但依然会为这个浮动元素让出位置，并且元素中的文字内容会环绕在其周围

2、清除浮动

使用浮动时会影响后面相邻的固定元素。受到其周围元素浮动的影响，产生了位置上的变化。这时，如果要避免浮动对其他元素的影响，就需要清除浮动。
语法：选择器{clear:属性值}
属性值：left（清除左侧浮动）、right（清除右侧浮动）、both（清除左右两侧浮动）
如： clear: left;
演示：（给p标签设置清除左侧浮动）
在这里插入图片描述
对子元素设置浮动时，如果父元素不设置高度，则子元素会对父元素造成影响（这里去除p标签）
在这里插入图片描述
由于受到子元素浮动的影响，没有设置高度的父元素就变成了一条直线。子元素与父元素属于嵌套关系，不存在左右位置，所以使用clear属性不能清除子元素对父元素的影响

解决方案一：
设置空标记：.box04{clear: both;} /*对空标记应用clear：both；*/
虽然可以清除浮动，但是在无形中增加了毫无意义的结构元素（空标记）。
解决方案二：
对父元素： .father{ overflow: hidden; }
  使用overflow: hidden时，实际上就创建了一个块级格式化上下文，该块级格式化上下文决定了height:auto（不设置height时，其默认值为auto）是如何计算的。
  计算块级格式化上下文的高度时，浮动元素也参与计算。因此，父元素在计算其高度时，加入了浮动元素的高度，就达到了清理浮动的效果。

3、overflow属性

当盒子模型内的元素超出盒子自身的大小时，内容就会溢出，如果想要规范溢出内容的显示方式，就需要用到overflow属性
属性值：
visible： 内容不会被修剪，会呈现在元素框之外（默认值）
hidden：溢出的内容被修剪，修剪的内容不可见
auto：在需要时显示滚动条，自适应要显示的内容
scroll：溢出内容被修剪，浏览器始终显示滚动条
如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    div{
        width: 100px;
        height: 100px;
        border: 1px solid black;
        background-color: aqua;
        overflow: visible;
    }
</style>
</head>
<body>
    <div>
        初秋的天冰冷的夜
        回忆慢慢袭来      
        真心的爱就像落叶       
        为何却要分开      
        灰色的天独自彷徨       
        城市的老地方      
        真的孤单走过忧伤        
        心碎还要逞强 
    </div>
</body>
</html>

演示：（overflow默认属性值visible）
在这里插入图片描述
（overflow属性值hidden）
在这里插入图片描述
（overflow属性值auto，不超出盒子不显示滚动条）
在这里插入图片描述
（overflow属性值scroll）
在这里插入图片描述

4、元素的定位属性

1、定位模式
position属性：

属性值描述
static静态定位
relative相对定位，相对于其原文档流的位置进行定位
absolute绝对定位，相对于上一个已经定位的父元素进行定位
fixed固定定位，相对于浏览器窗口进行定位

2、边偏移
定位模式仅仅用于定义元素以哪种方式定位，并不能确定元素的具体位置。在CSS3中，通过边偏移属性来精确确定元素的位置

属性描述
top顶端偏移量，定义元素相对于其父元素上边线的距离
bottom底部偏移量，定义元素相对于其父元素下边线的距离
left左侧偏移量，定义元素相对于其父元素左边线的距离
right右侧偏移量，定义元素相对于其父元素右边线的距离

5、position属性

1、静态定位static
静态定位是元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。所谓静态位置就是各个元素在HTML文档中默认位置。所以当没有定义position属性时，并不说明该元素没有自己的位置，它会遵循默认值显示为静态位置。在静态定位状态下，无法通过偏移属性来改变元素的位置。

2、相对定位relative
相对定位是将元素相对于它在标准文档流中的位置进行定位，对元素设置相对定位后，可以通过偏移属性改变元素的位置，但是它在文档流中的位置仍然保留
如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            width: 250px;
            height: 250px;
            border: 1px solid saddlebrown;
            background-color: aquamarine;
            margin: 0 auto;
        }
        .box1,.box2,.box3{
            width: 50px;
            height: 50px;
            border: 1px solid black;
            background-color: aqua;
            margin: 10px;
        }
        .box2{
            position:relative;
            left: 150px;
            top: 62px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        <div class="box3">box3</div>
    </div>
</body>
</html>

演示：（box2设置相对定位，偏移都是相对于原来的位置移动，文档流位置依然保留）
在这里插入图片描述

3、绝对定位absolute
绝对定位是将元素依据最近的已经定位的父元素进行定位，若所有父元素都没有定位，则依据body根元素进行定位
如：

      .box2{
          position:absolute;
          left: 120px;
      }

演示：（box2设置绝对定位，因为父元素没有定位，所以相对于body根元素，即浏览器页面定位）

在这里插入图片描述
发现：
（1）外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
（2）发现当浏览器窗口放大或缩小时，box2相对于其父元素位置都发生变化。因为box2设置了绝对定位，相对于页面固定不变，而父盒子页面居中，随页面变化而变化，所以两者位置发生变化
（3）对于（2）的解决方法，可以对父盒子设置相对定位relative但不设偏移量

4、固定定位fixed
固定定位是绝对定位的一种特殊形式，它以浏览器窗口作为参照物来定义网页元素（相当于没有父元素定位的绝对定位）

5、层叠等级属性z-index
要想调整重叠定位元素的顺序，可对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。默认属性值为0，取值越大，定位元素在层叠元素中越居上。仅对定位元素生效
如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1,.box2,.box3{
            position: relative;
        }
        .box1{
            width: 50px;
            height: 50px;
            border: 1px solid black;
            background-color: red;
            z-index: 2;
        }
        .box2{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            background-color: yellow;
            top: -30px;
            left: 30px;
            z-index: 1;
        }
        .box3{
            width: 150px;
            height: 150px;
            border: 1px solid black;
            background-color: aqua;  
            top: -60px;
            left: 60px;
        }
    </style>
</head>
<body>
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        <div class="box3">box3</div>
</body>
</html>

演示：（box1层叠等级最高，box2第二，box3没有）
在这里插入图片描述

微笑伴你而行
关注
  • 5
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html+css知识点总结
06-24
html+css知识点总结
html+css+js前端知识点
12-13
HTML+CSS+JS前端知识点 HTML、CSS 和 JavaScript 是构建 Web 应用的三个基础技术。下面是对 HTML、CSS 和 JavaScript 的知识点总结： 一、 HTML5 新特性 * HTML5 新增加了很多有用的功能，可以使得 Web 应用的...
关于css 中的dl dt dd
Yami__yan的博客
01-20 1962
< dl>< /dl>用来创建一个普通的列表, < dt>< /dt>用来创建列表中的上层项目， <dd>< /dd>用来创建列表中最下层项目， < dt>< /dt>和< dd>< /dd>都必须放在< dl>< /dl>标志对之间。 常用与 左右排布的列表，左侧是标签信息，右侧是描述信息。 例如: 配合 dl dd dt 加上以下几行代码就可实现
在html中dd 是什么列表,html中dt dd
weixin_39940688的博客
06-18 1843
html中，dl,dt,dd怎么使用html中,dl和dd和dt标签是什么意思,什么时候需要用定义列表的意思 一般用在图文并排的时候 应网友提问。html中，dl和dd和dt标签是什么意思，什么时候需要html中，dl和dd和dt标签的意思如下：dl标签定义了定义列表(definition list)。dd是用来定义列表中定义条目的定义部分。 举例说明： 一个定义列表： 计算机 用来计算的仪器 ....
html中dl和dd是什么标签,html中dl和dd和dt标签的定义
weixin_40008339的博客
06-24 5978
我们在制作网页过程中用到列表时一般会使用或者标签，很少用刑标签，但是这个三个标签却有着不可忽视的作用，毕竟Web标准中要尽最大可能的使用已有的标签。它们的用途是：< dl>< /dl>用来创建一个普通的列表,< dt>< /dt>用来创建列表中的上层项目，< dd>< /dd>用来创建列表中最下层项目，< dt>&...
＜dl＞、＜dt＞、＜dd＞ 的使用
琳琳的博客
05-07 3701
<dl>、<dt>、<dd>这三个html标记是一个组合，它们很很像<ul><li>这个标签组合，但<dl>、<dt>、<dd>通常是用来描述一些术语定义，比如附录里的词汇表，或用来显示key-value这样成对的键和值。 <dl>、<dt>、<dd>通常被称为定义性列表。 用于一个术语对应一条解释或定义 <dl> <dt>Firefox&l
<dl>~<dt>~<dd>
立业的博客
12-14 976
■ 定义 <dl>标签用于定义描述列表(或定义列表) 自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号 dl代表单词Definition List，意为定义列表 dt代表单词Definition Term，意为定义术语 dd代表单词Definition Description，意为定义描述 ■ 使用说明 该标签会与<dt>(定义项目/名字)和...
HTML+CSS基础知识点.pdf
06-17
HTML+CSS 基础知识点总结 HTML+CSS 是前端开发的基础技术，掌握 HTML、CSS 和 JavaScript 语言是必不可少的。下面是 HTML+CSS 基础知识点总结： 1. HTML 是网页内容的载体，内容就是网页制作者放在页面上想要让...
HTML+CSS3基础知识点资源
最新发布
03-14
同时，CSS3的定位机制（static、relative、absolute和fixed）也是重要的知识点，它们决定了元素相对于其父元素或视口的位置。 学习HTML+CSS3时，动手实践至关重要。通过创建简单的网页并不断修改样式，你可以直观地...
HTML+CSS的入门知识点总结
09-20
HTML+CSS入门知识点总结 HTML（HyperText Markup Language）是用于创建网页的标准标记语言，而CSS（Cascading Style Sheets）是用于控制网页样式的语言。本文将总结HTML+CSS的入门知识点，涵盖HTML的基本结构、CSS...
CSS教程:用dl dt dd来制作列表
12-02
今天有人发邮件问的一个问题,最开始的想法是用ul列表来实现;但是这样用出现两个比较麻烦的地方：　　1、如果用UL还布局，右边一栏比较麻烦；　　2、文字外边的边框自适应比较麻烦；　　3、很可能要定死高度；　　所以，细细地看一看这个布局，想一想还是用DL.DT.DD作是合理的：　　1、布局合理一些；　　2、将来扩展很方便；　　3、CSS一定很少； 　　试着写了写，看一看还行！在可控范围内！　　布局布分当然不用说了： <h1>标题</h1><div><dl><dt><ahref>·博客里的文章是我自己写的！</a></dt><dd>作者：张三</dd></dl><dl><dt><ahre
零基础学习CSS---04.CSS列表属性详解
m0_52136934的博客
10-20 3818
零基础学习CSS---04.CSS列表属性（list-style-type、list-style-image、list-style-position、list-style复合写法）详解。
html dd dt dl css,CSS图文混排 采用dl dt dd
weixin_27379781的博客
06-19 758
图文混排* {margin:0;padding:0;}body {background:#fff;}#wrap {width:502px;margin:10px auto 0 auto;}#wrap dl {width:480px;margin-bottom:8px;padding:8px;border:1px solid #ddd;}#wrap dl dt {float:right;width:...
html中dl，dt，dd标签的用法
王以山的专栏
07-31 4129
dl 标签 -- 代表HTML自定义列表 dl标签是成对出现的,以开始,结束 自定义列表的开始使用标签,列表中每个元素的标题使用(definition term)定义,后面跟随(definition description)用于描述列表中元素的内容. 属性: Common -- 一般属性 dl是definition lists的英文缩写 引用网址:http://www.dreamdu.com/xh
html d1 dt dd 标签
qq_42946963的博客
07-30 5728
标签定义一个描述列表的项目/名字。 标签与 （定义一个描述列表）和 （描述每一个项目/名字）一起使用。 <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> 效果图 ...
CSS: dl,dt,dd,ul,li,ol区别及应用
程序媛
05-12 630
ul: unordered lists ol: ordered lists li: Lists ol 有序列表: …… …… …… 表现为： 1…… 2…… 3…… ul 无序列表，表现为li前面是大圆点而不是123: …… …… 很多人容易忽略 dl dt dd的用法: dl 内容块 dt 内容块的标题 dd 内容 可以这么写： 标题 内容1 内容2 dt 和dd中可以

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

微笑伴你而行

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值