关于无序列表的dd标签使用问题（小白问题）

最新推荐文章于 2025-06-10 19:19:30 发布

原创最新推荐文章于 2025-06-10 19:19:30 发布 · 716 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #ul

css 同时被 2 个专栏收录

1 篇文章

订阅专栏

1 篇文章

订阅专栏

本文探讨了在HTML无序列表中遇到的一个小白问题：无法将dd标签内的字体大小调小。作者展示了预期设计效果和实际效果的对比，并提供了相关代码，期待高手指点解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于无序列表的dd标签使用问题（小白问题）
今天敲了一段关于无序列表的代码，在完成代码后发现了一个问题不能解决：使用dd标签后dd标签所在行的字体大小不能调整的更小！！
在这里插入图片描述此图为效果图，预计设计效果如上。
这张是我自己敲的效果图，问题部位已经圈起来了。该部位字体想调整的更小，但是不能实现。
代码如下：

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{margin: 0px;}
            body{ background: #000;}
            div{ width: 1100px;height: 70px;background: #fff;margin: auto;color: #000;}
            div .t1{float: left;}
            div ul li img{ padding-top: 20px;line-height: 40px;padding-left: 10px;}
            div ul li{list-style: none;float: left;}
            dl {list-style:none;}
            div ul li dl dt{font-family: "微软雅黑";font-size: 12px;padding-top: 20px;padding-left: 8px;}
            dt a{ text-decoration: none;color: rgb(114, 114, 114);}
            dd a{ text-decoration: none;color: rgb(236, 236, 236);}
            div ul li dl dd{font-family: "微软雅黑";font-size: 6px;text-indent:8px;line-height: 10px;}
            a:hover{ color: red;}
            img:hover{ cursor: pointer; }
            .t2{ padding-left: 70px;}
            .t2 dd{font-size: 18px;line-height: 15px;color: #000000;}
        </style>
    </head>
    <body>
        <div>
            <img src="img/dd.bmp" class="t1">
            <ul>
                <li>
                    <dl>
                        <dt><a href="#">网站首页</a></dt>
                        <dd><a calss="t3" href="#">HOME</a></dd>
                    </dl>
                </li>
                <li><img src="img/dh02.gif" name="picture" onMouseOver="this.src='img/dh021.gif'" onMouseOut="this.src='img/dh02.gif'"></li>
                <li>
                    <dl>
                        <dt><a href="#">特色内景</a></dt>
                        <dd><a calss="t3" href="#">INDOORS</a></dd>
                    </dl>
                </li>
                <li><img src="img/dh02.gif" name="picture" onMouseOver="this.src='img/dh021.gif'" onMouseOut="this.src='img/dh02.gif'"></li>
                <li>
                    <dl>
                        <dt><a href="#">特色外景</a></dt>
                        <dd><a calss="t3" href="#">OUTDOORS</a></dd>
                    </dl>
                </li>
                <li><img src="img/dh02.gif" name="picture" onMouseOver="this.src='img/dh021.gif'" onMouseOut="this.src='img/dh02.gif'"></li>
                <li>
                    <dl>
                        <dt><a href="#">客片欣赏</a></dt>
                        <dd><a calss="t3" href="#">SHOWCASE</a></dd>
                    </dl>
                </li>
                <li><img src="img/dh02.gif" name="picture" onMouseOver="this.src='img/dh021.gif'" onMouseOut="this.src='img/dh02.gif'"></li>
                <li>
                    <dl>
                        <dt><a href="#">优惠活动</a></dt>
                        <dd><a calss="t3" href="#">ACTMTIES</a></dd>
                    </dl>
                </li>
                <li><img src="img/dh02.gif" name="picture" onMouseOver="this.src='img/dh021.gif'" onMouseOut="this.src='img/dh02.gif'"></li>
                <li>
                    <dl>
                        <dt><a href="#">关于苏菲雅</a></dt>
                        <dd><a calss="t3" href="#">ABOUT US</a></dd>
                    </dl>
                </li>
                <li><img src="img/dh02.gif" name="picture" onMouseOver="this.src='img/dh021.gif'" onMouseOut="this.src='img/dh02.gif'"></li>
                <li>
                    <dl>
                        <dt><a href="#">联系我们</a></dt>
                        <dd><a calss="t3" href="#">CONTACTUS</a></dd>
                    </dl>
                </li>
                <li class="t2">
                    <dl>
                        <dt>咨询热线：</dt>
                        <dd>4008005633</dd>
                    </dl>
                </li>
            </ul>

        </div>
    </body>
</html>

敬请各路大神批判，小弟不胜感激。代码如有繁杂之处敬请告知。