名站导航为爱好css的朋友们提供相关的知识。
word-wrap: break-word;
- 此篇文章具体介绍如下
以往,我们实现表格是使用的table,tr,td标签。div css教程广泛使用以后,在网页设计中表格的使用越来越少了。
本文通过2个实例,给出了,使用dl dt dd 标签实现表格的用法。
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>genban.org</title> <style type="text/css教程"> dl { margin-bottom:50px; } dl dt { background:#5f9be3; color:#fff; float:left; font-weight:bold; margin-right:10px; padding:5px; width:100px; } dl dd { margin:2px 0; padding:5px 0; } </style> </head> <body> <dl> <dt>Name: </dt> <dd>Squall Li</dd> <dt>Age: </dt> <dd>23</dd> <dt>Gender: </dt> <dd>Male</dd> <dt>Day of Birth:</dt> <dd>26th May 1986</dd> </dl> </body> </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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>genban.org</title> <style type="text/css教程"> dl,dt,dd{margin:0;background:#fff5fa;font-size:14px;} dl{margin:0 auto;width:50%;border:1px solid #f8b3d0;border-bottom:none;} dt{font-weight:800;background:#ff99cc;color:#fff;} dt,dd{line-height:30px;padding:0 0 0 10px;border-bottom:1px solid #f8b3d0;height:30px;overflow:hidden} dd{text-indent:3em;} .bg{background:#fff} dt span,dd span{display:block;float:right;font-size:14px;border-left:1px solid #f8b3d0;text-indent:0em;width:80px;text-align:center;} </style> </head> <body> <dl class=hb> <dt><span>下载地址</span><span>更新时间</span>目录</dt> <dd class=bg><span>——</span><span>11.1</span>第二节</dd> <dd><span>——</span><span>11.2</span>第二节</dd> <dd class=bg><span>——</span><span>11.3</span>第二节</dd> <dd><span>——</span><span>11.4</span>第二节</dd> <dd class=bg><span>——</span><span>11.5</span>第二节</dd> <dd><span>——</span><span>11.6</span>第二节</dd> <dd class=bg><span>——</span><span>11.7</span>第二节</dd> <dd><span>——</span><span>11.8</span>第二节</dd> <dd class=bg><span>——</span><span>11.9</span>第二节</dd> <dd><span>——</span><span>11.10</span>第二节</dd> <dd class=bg><span>——</span><span>11.11</span>第二节</dd> <dd><span>——</span><span>11.12</span>第二节</dd> </dl> </body> </html>
关于css的相关的知识就说到这里希望能够可以帮助更多的朋友们。,dl,dt,dd,表格,html标签,实现表html pre标签自动换行的css教程实现
在html语言中,pre标签中的文本会保留空格和换行符,因此常用来原样输出程序代码。