CSS学习笔记

来源：互联网发布：河南大学教务网络系统编辑：程序博客网时间：2024/06/14 23:56

一：li元素与子级元素(比如dl)对齐

        <li>
            <a href="#">Home</a>
            <dl>
                <dd><a href="#">Nivo Slider</a></dd>
                <dd><a href="#">EI Slider</a></dd>
                <dd><a href="#">Fullscreen</a></dd>
                <dd><a href="#">Nivo Slider</a></dd>
                <dd><a href="#">EI Slider</a></dd>
                <dd><a href="#">Fullscreen</a></dd>
            </dl>
        </li>

则默认情况是这样的：

开始我想的是设置dl的margin-left，结果没用，后来改成设置dd的margin-left就可以对齐了(Home与下面的文字左对齐)

二：li去掉前面的圆点并使文字水平显示(用dl不会有圆点) li的style里设置 display:inline-block;

三：先看图

网页源码

<ul>
        <li onmouseover="showsonnav('navi_01')" onmouseout="hiddensonnav('navi_01')">
            <a href="#">Home</a>
            <dl class="home_dl" id="navi_01">
                <dd><a href="#">Nivo Slider</a></dd>
                <dd><a href="#">EI Slider</a></dd>
                <dd><a href="#">Fullscreen</a></dd>
                <dd><a href="#">Nivo Slider</a></dd>
                <dd><a href="#">EI Slider</a></dd>
                <dd><a href="#">Fullscreen</a></dd>
            </dl>
        </li>
        <li onmouseover="showsonnav('navi_02')" onmouseout="hiddensonnav('navi_02')">
            <a href="#">About</a>
            <dl class="about_dl" id="navi_02">
                <dd><a href="#">Nivo Slider</a></dd>
                <dd><a href="#">EI Slider</a></dd>
                <dd><a href="#">Fullscreen</a></dd>
            </dl>
        </li>
        </ul>

按说Home应该和About顶部对齐(如果把dl都去掉是对齐的)

解决方法：设置

About所在li的高度可以使其对齐

四列表动态展示(效果是，鼠标移动到li元素(比如Home)文字上，其下面的dl显示出来)

方法:首先dl的display属性值设置为none，即初始状态不显示，即

然后li里设置onmouseout，onmouseover函数，即鼠标移到Home(About)上面dl显示，移出来隐藏

showsonnav('navi_02')是JavaScript里面自定义的函数，把要操作的元素的id传进去，相应的script脚本是这样的：

如果能通过id找到标签则document.getElementById(str)返回true

script就嵌在该div里：

<div id="left_navigation">
        <ul>
        <li onmouseover="showsonnav('navi_01')" onmouseout="hiddensonnav('navi_01')">
            <a href="#">Home</a>
            <dl class="home_dl" id="navi_01" style="display:none;">
                <dd><a href="#">Nivo Slider</a></dd>
                <dd><a href="#">EI Slider</a></dd>
                <dd><a href="#">Fullscreen</a></dd>
                <dd><a href="#">Nivo Slider</a></dd>
                <dd><a href="#">EI Slider</a></dd>
                <dd><a href="#">Fullscreen</a></dd>
            </dl>
        </li>
        <li onmouseover="showsonnav('navi_02')" onmouseout="hiddensonnav('navi_02')">
            <a href="#">About</a>
            <dl class="about_dl" id="navi_02" style="display:none;">
                <dd><a href="#">Nivo Slider</a></dd>
                <dd><a href="#">EI Slider</a></dd>
                <dd><a href="#">Fullscreen</a></dd>
            </dl>
        </li>
        </ul>
        <script type="text/javascript">
            function showsonnav(str) {
                if (document.getElementById(str)) {
                    document.getElementById(str).style.display = "";
                }
            }
            function hiddensonnav(str) {
                if (document.getElementById(str)) {
                    document.getElementById(str).style.display = "none";
                }
            }
        </script>
    </div>

0 0