项目列表dl、dt、dd使用
2024-08-28 01:49:42
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表说明dl dt dd</title>
<style type="text/css">
body {
margin:0;
padding: 0;
font: 14px/16px "microsoft yahei";
}
.box {
width: 780px;
margin:0 auto;
}
.box dl /*类似于ul*/
{
display: block;
border-bottom: 1px solid #696464;
padding-bottom: 6px;
overflow: hidden;
}
/*dt主要用于分类标题*/
.box dl dt
{
display: block;
float: left;
width: 60px;
text-align: right;
height: 22px;
line-height: 22px;
padding-right: 6px;
} .box dl dt a
{
color: #e4393c;
font-weight: bold;
text-decoration: underline;
font-size: 10pt;
}
/*dd主要用于分类标题--说明、详细列表*/
.box dl dd
{
display: block;
overflow: hidden;
}
.box dl dd a
{
display: block;
float: left;
border-left: 1px solid #CCC;
color: #635F5F;
font-size: 9pt;
padding: 0 8px;
height: 14px;
line-height: 14px;
margin: 4px 0;
}
</style>
</head>
<body>
<div class="box">
<dl>
<dt><a href="#">电子书</a></dt>
<dd>
<a href="#">免费</a> <a href="#">小说</a> <a href="#">励志与成功</a> <a href="#">婚恋/两性</a>
<a href="#">文学</a> <a href="#">经管</a> <a href="#">畅读VIP</a> <a href="#">免费</a> <a href="#">小说</a> <a href="#">励志与成功</a> <a href="#">婚恋/两性</a>
<a href="#">文学</a> <a href="#">经管</a> <a href="#">畅读VIP</a> <a href="#">免费</a> <a href="#">小说</a> <a href="#">励志与成功</a> <a href="#">婚恋/两性</a>
<a href="#">文学</a> <a href="#">经管</a> <a href="#">畅读VIP</a>
</dd>
</dl> <dl>
<dt><a href="#">数字音乐</a></dt>
<dd>
<a href="#">通俗流行</a> <a href="#">古典音乐</a> <a href="#">摇滚说唱</a> <a href="#">爵士蓝调</a>
<a href="#">乡村民谣</a> <a href="#">有声读物</a>
</dd>
</dl>
<dl>
<dt><a href="#">音像</a></dt>
<dd>
<a href="#">音乐</a> <a href="#">影视</a> <a href="#">教育音像</a> <a href="#">游戏</a>
</dd>
</dl>
<dl>
<dt><a href="#">文艺</a></dt>
<dd>
<a href="#">小说</a> <a href="#">文学</a> <a href="#">青春文学</a> <a href="#">传记</a> <a
href="#">艺术</a>
</dd>
</dl>
<dl>
<dt><a href="#">人文社科</a></dt>
<dd>
<a href="#">历史</a> <a href="#">心理学</a> <a href="#">政治/军事</a> <a href="#">国学/古籍</a>
<a href="#">哲学/宗教</a> <a href="#">社会科学</a>
</dd>
</dl>
<dl>
<dt><a href="#">经管励志</a></dt>
<dd>
<a href="#">经济</a> <a href="#">金融与投资</a> <a href="#">管理</a> <a href="#">励志与成功</a>
</dd>
</dl>
</div>
</body>
</html>
html+css
最新文章
- HTML5+CSS3学习笔记(一)
- Windows2003屏蔽IP
- .net数据传递的格式
- SQL Server通过整理索引碎片和重建索引提高速度
- 软件测试之fault、error和failure的理解
- ionic build android 中的报错详细原因以及解决方法
- 性能测试资源监控工具nmon使用方法
- 智齿客服网页端接入文档V2.3
- CISCO 动态路由(RIP)
- Net Core 的配置模式以及热重载配置
- 图像的下采样Subsampling 与 上采样 Upsampling
- 使用Charles抓取APP之HTTPS请求
- linux 取消笔记本触摸键
- react native 初识生命周期
- Spyder docstrings文档字符串的标准
- TR-069: ACS Discovery
- 使用Docker部署ASP.NET Core应用程序实践
- deepin配置反向代理映射本地到公网
- 【转载】Xutils3源码解析
- Linux中安装配置hadoop集群
热门文章
- css3 边框阴影效果
- POJ 1610 Count the Colors
- 如何在VMware中创建虚拟机
- LG Gram 2018 z980 白
- 【Docker基本操作】
- UVC和V4L2的关系(转载)
- react基础课程一简述JSX及目录关系
- OpenJDK源码研究笔记(十二):JDBC中的元数据,数据库元数据(DatabaseMetaData),参数元数据(ParameterMetaData),结果集元数据(ResultSetMetaDa
- 【Henu ACM Round #13 B】Spider Man
- IOS基础学习日志(七)利用dispatch_once创建单例及使用