HTML-描述列表（dl dt dd）使用场景列举,Web开发,技术交流,鱼C论坛

金刚发表于 2020-5-15 13:59:11

HTML-描述列表（dl dt dd）使用场景列举

本帖最后由金刚于 2020-5-15 15:00 编辑

一.二级分类制作
代码展示

<!doctype html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
   margin: 0;
   padding: 0;
   font: 14px "microsoft yahei";
}

ul {
   margin: 0;
   padding: 0;
}

a {
   text-decoration: none;
   color: #333;
}

ul {
   list-style: none;
}

.nav-list-box {
position: relative;
   width: 200px;
   height: 600px;
   box-shadow: 2px 6px 9px rgba(0, 0, 0, .2);
   margin: 20px 232px;
}

.nav-list-box .nav-list {
   position: relative;
}

.nav-list-box .nav-list .list-item {
   padding: 15px 20px;
   border-bottom: 1px dotted #ddd;
}

.nav-list-box .nav-list .list-item:hover,
.nav-list-box .nav-list .list-item:hover .item-href {
   background-color: #e62536;
   color: #fff;
}

.box {
   display: none;
   position: absolute;
   top: 0;
   left: 200px;
   width: 700px;
   height: 600px;
   box-shadow: 2px 6px 9px rgba(0, 0, 0, .2);
}
/*一会儿修改*/
.list-item:hover .box {
   display: block;
}

.box .menu-list {
   margin: 5px 0px;
}

.box .menu-list .list-title {
position: absolute;
left: 0px;
   float: left;
   height: 40px;
}

.box .menu-list .list-title:hover,
.box .menu-list .list-title:hover a,
.box .menu-list .list-title:hover i {
   background-color: #e62536;
   color: #fff;
}

.box .menu-list .list-title a {
   display: inline-block;
   padding: 0 10px;
   width: 50px;
   margin: 5px 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.box .menu-list .list-title i {
   float: right;
   margin: 5px 0;
   padding-right: 10px;
   color: #333;
}

.box .menu-list .list-content{
margin-left: 100px;
}

.box .menu-list .list-content a {
   display: inline-block;
   border-left: 1px solid #ddd;
   padding: 0 10px;
   margin: 5px 0;
}

.box .menu-list .list-content a:hover {
   color: #e62536;
}
</style>
</head>

<body>
<div class="nav-list-box">
   <ul class="nav-list">
         <li class="list-item">
            <a class="item-href" href="#">计算机语言</a>
            
            <div class="box">
               <dl class="menu-list">
                     <dt class="list-title"><a href="#">python</a><i>></i></dt>
                     <dd class="list-content"><a href="#">python</a><a href="#">flask</a><a href="#">django</a><a href="#">前端</a><a href="#">爬虫</a></dd>
               </dl>
               <dl class="menu-list">
                     <dt class="list-title"><a href="#">java</a><i>></i></dt>
                     <dd class="list-content"><a href="#">javase</a><a href="#">spring</a><a href="#">springboot</a><a href="#">jdk</a><a href="#">idea</a></dd>
               </dl>
               <dl class="menu-list">
                     <dt class="list-title"><a href="#">前端</a><i>></i></dt>
                     <dd class="list-content"><a href="#">html5</a><a href="#">css3</a><a href="#">javascript</a><a href="#">jquery</a><a href="#">vue</a></dd>
               </dl>
               <dl class="menu-list">
                     <dt class="list-title"><a href="#">数据库</a><i>></i></dt>
                     <dd class="list-content"><a href="#">python</a><a href="#">flask</a><a href="#">django</a><a href="#">前端</a><a href="#">爬虫</a></dd>
               </dl>
               <dl class="menu-list">
                     <dt class="list-title"><a href="#">测试</a><i>></i></dt>
                     <dd class="list-content"><a href="#">python</a><a href="#">flask</a><a href="#">django</a></dd>
               </dl>
            </div>
         </li>
         <li class="list-item">
            <a class="item-href" href="#">计算机语言</a>
            
            <div class="box">
               <dl class="menu-list">
                     <dt class="list-title"><a href="#">python</a><i>></i></dt>
                     <dd class="list-content"><a href="#">python</a><a href="#">flask</a><a href="#">django</a><a href="#">前端</a><a href="#">爬虫</a></dd>
               </dl>
               <dl class="menu-list">
                     <dt class="list-title"><a href="#">python</a><i>></i></dt>
                     <dd class="list-content"><a href="#">python</a><a href="#">flask</a><a href="#">django</a><a href="#">前端</a><a href="#">爬虫</a></dd>
               </dl>
               <dl class="menu-list">
                     <dt class="list-title"><a href="#">python</a><i>></i></dt>
                     <dd class="list-content"><a href="#">python</a><a href="#">flask</a><a href="#">django</a><a href="#">前端</a><a href="#">爬虫</a></dd>
               </dl>
               <dl class="menu-list">
                     <dt class="list-title"><a href="#">python</a><i>></i></dt>
                     <dd class="list-content"><a href="#">python</a><a href="#">flask</a><a href="#">django</a><a href="#">前端</a><a href="#">爬虫</a></dd>
               </dl>
            </div>
         </li>
         <li class="list-item">英语</li>
         <li class="list-item">心理学</li>
         <li class="list-item">统计学</li>
         <li class="list-item">生物学</li>
         <li class="list-item">机器学习</li>
         <li class="list-item">算法</li>
         <li class="list-item">仓库管理</li>
         <li class="list-item">网站制作</li>
         <li class="list-item">模块开发</li>
   </ul>
</div>
</body>

</html>

效果展示

老八秘制 发表于 2020-5-15 14:04:15

html的发在py区可还行

liuzhengyuan 发表于 2020-5-15 14:07:47

@zltzlt @qiuyouzhi
建议移动一下这个帖子！
LZ 发错板块了

金刚发表于 2020-5-15 15:04:11

老八秘制发表于 2020-5-15 14:04
html的发在py区可还行

下次注意了

金刚发表于 2020-5-15 15:05:57

liuzhengyuan 发表于 2020-5-15 14:07
@zltzlt @qiuyouzhi
建议移动一下这个帖子！
LZ 发错板块了

下次注意了

页: [1]

鱼C论坛's Archiver

HTML-描述列表（dl dt dd）使用场景列举