当前位置：移动技术网 > IT编程>网页制作>CSS > dl+ol应用分析

dl+ol应用分析

2017年12月12日 | 移动技术网IT编程 | 我要评论

题目：dl+ol的练习
作者：嗷嗷

上次 li 把 dl 模拟了~dl不知道要干什么了~找了ol一起来做复合列表~

这个练习除了css外~外加用了点js
先看下难看的演示因为最近太懒~没做漂亮的样式

<!doctype html public "-//w3c//dtd xhtml 1.1//en" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="content-type" content="text/html; charset=gb2312">  
<title>学习dl中</title>  
<style type="text/css">  
dl *  
{  
    margin: 0;  
    padding: 0;  
    font-size:12px;  
}  
dl  
{  
    width: 405px;  
    height:128px;  
    border:1px #000 solid;  
}

dt  
{  
    width:120px;  
    height: 32px;  
    line-height: 32px;  
    text-align: center;  
}  
dt a  
{  
    display: block;  
    text-decoration: none;  
}  
dt.ing a  
{  
    background:#efefef;  
}  
dd  
{  
    position: absolute;  
    display: none;      
    width:280px;  
    background-color: #fff;

}  
dd li  
{  
    line-height: 16px;  
    list-style-type: none;  
    text-align:right;  
    color:#999;  
}  
dd li a  
{  
float:left;  
display:inline;  
padding-left:5px;  
}  
dd.ing  
{  
    display: block;  
}  
dd.no  
{  
    display:none;  
}  
dd#d1  
{  
    margin-top:-32px;  
    margin-left:120px;  
}  
dd#d2  
{  
    margin-top:-64px;  
    margin-left:120px;  
}  
dd#d3  
{  
    margin-top:-96px;  
    margin-left:120px;

}  
dd#d4  
{  
    margin-top:-128px;  
    margin-left:120px;  
}  
</style>  
  
</head>

</dd>  
    <dt id="t2" class="ing"></dt>  
    <dd id="d2" class="ing">  
        <ol>  
            <li>1-24</li>  
            <li>1-24</li>  
            <li>1-24</li>  
            <li>1-24</li>  
            <li>1-24</li>  
            <li>1-24</li>  
            <li>1-24</li>  
            <li>1-24</li>        </ol>  
    </dd>  
    <dt id="t3"></dt>  
    <dd id="d3">  
        <ol>  
            <li>1-24</li>  
            <li>1-24</li>  
            <li>1-24</li>  
            <li>1-24</li>  
            <li>1-24</li>  
            <li>1-24</li>  
            <li>1-24</li>  
            <li>1-24</li>        </ol>  
    </dd>  
    <dt id="t4"></dt>  
    <dd id="d4">  
        <ol>  
            <li>1-24</li>  
            <li>1-24</li>  
            <li>1-24</li>  
            <li>1-24</li>  
            <li>1-24</li>  
            <li>1-24</li>  
            <li>1-24</li>  
            <li>1-24</li>        </ol>  
    </dd>  
</dl>

</body>

</html>

[ctrl+a 全选注:如需引入外部js需刷新才能执行]

css的重点

复制代码代码如下:

dt.ing a  
{  
        background:#efefef;/*移上去的背景*/  
}  
dd  
{  
        position: absolute;/*把dd流出来*/  
        display: none;/*把dd默认隐藏起来*/          
        width:280px;  
        background-color: #fff;  
}  
dd.ing  
{  
        display: block;/*移上去的显示*/  
}  
dd.no  
{  
        display:none;  
}  
dd#d1  
{  
        margin-top:-32px;  
        margin-left:120px;/*把dd移到合适的地方 #d2#d3#d4也一样*/  
}  

js部分

复制代码代码如下:

<script type="text/javascript">  
var ddishow=2;//定义一个变量来记录选中的 因为dl dd都要~为了省个变量所以..用数字  
function show(ishow)  
{    
        document.getelementbyid(['d'+ddishow]).classname="no";  
        document.getelementbyid(['t'+ddishow]).classname="no";//改掉原来的样式~隐藏起来  
        var ishow;  
        ddishow=ishow;//把选中的的值给ddishow 留下次用  
        document.getelementbyid(['d'+ishow]).classname="ing";  
        document.getelementbyid(['t'+ishow]).classname="ing";//改样式显示出来~~  
    return false;  
}  
</script>  

改个事件试一下

}  
dd#d4  
{  
    margin-top:-128px;  
    margin-left:120px;  
}  
</style>  
  
</head>

</dd>  
    <dt id="t3"></dt>  
    <dd id="d3">  
        <ol>  
            <li>1-24</li>  
            <li>1-24</li>  
            <li>1-24</li>  
            <li>1-24</li>  
            <li>1-24</li>  
            <li>1-24</li>  
            <li>1-24</li>  
            <li>1-24</li>        </ol>

</dd>  
    <dt id="t4"></dt>  
    <dd id="d4">  
        <ol>  
            <li>1-24</li>  
            <li>1-24</li>  
            <li>1-24</li>  
            <li>1-24</li>  
            <li>1-24</li>  
            <li>1-24</li>  
            <li>1-24</li>  
            <li>1-24</li>        </ol>

</dd>  
</dl>

</body>

</html>

[ctrl+a 全选注:如需引入外部js需刷新才能执行]

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

css动画效果之animation的常用样式

animation动画定义一个动画：/*设置一个关键帧，定义动画每一步执行的动作*/@keyframes mybox{ 0%{transf... [阅读全文]
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)

简写属性是用于同时给多个属性赋值的属性。比如font是一个简写属性，可以用于设置多种字体属性。它指定了font-style、font-weight、font-s... [阅读全文]
CSS心形加载的动画源码的实现

废话不多说上代码，代码很简答，研究一下就明白了，有不明白的可以问我。<!doctype html><html> <head>... [阅读全文]
使用CSS3实现字体颜色渐变的实现

在使用animation.css的时候发现它的官网字体会渐变，看了一下他的css很有趣 .site__title { color: #f35626; ... [阅读全文]
protobuf在unity中使用

1、下载protobuf的release版本protobuf3.12.4 Release2、解压，用vs打开，并... [阅读全文]
css动画：animation的常用样式

animation动画定义一个动画：/*设置一个关键帧，定义动画每一步执行的动作*/@keyframes myb... [阅读全文]
webpack实现px自动动转换成rem

1、px2rem-loader{ test: /.less$/, use: [ Min... [阅读全文]
CSS防遗忘指南

CSS内容盒模型定位普通文档流绝对定位浮动盒模型定位梳理普通文档流、相对定位、绝对定位、固定定位和浮动的关系。普... [阅读全文]
用css完成语音助手小动画

震惊！用css完成语音助手小动画不要太简单！语音助手动画定位布局添加动画语音助手动画hello大家好，我是Aar... [阅读全文]
2020-08-09

项目介绍，这是一个unity阅读器的项目，模仿生活中的书籍，githup链接：Ui介绍：登录界面：整体色调为蓝色... [阅读全文]

网友评论


验证码：

dl+ol应用分析

2017年12月12日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论