您的位置：首页 > Web前端 > CSS

一个简单的Css实现的Tab页面

2011-10-19 15:01 501 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

    <title>CSS标签</title>

    <style type="text/css">

        dl

        {

            position: relative;

            width: 240px;

            height: 200px;

        }

        dt

        {

            position: absolute;

            left: -2px;

            top: -1.5em;

        }

        dt a

        {

            display: block;

            float: left;

            margin: 1px;

            width: 78px;

            text-align: center;

            font: bold 12px/1.8em "宋体" ,sans-serif;

            color: #fff;

            text-decoration: none;

            background: #666;

        }

        dt a:hover

        {

            background: orange;

        }

        dd

        {

            margin: 0;

            width: 240px;

            height: 200px;

            overflow: hidden;

            border: 1px solid #999;

        }

        ul

        {

            margin: 0;

            padding: 6px 0;

            width: 240px;

            height: 200px;

            list-style: none;

        }

        li

        {

            width: 230px;

            font: 12px/1.8em "宋体" ,sans-serif;

            white-space: nowrap;

            overflow: hidden;

        }

    </style>

</head>

<body>

    <br />

    <br />

    <dl>

        <dt><a href="#a" title="">新闻1</a><a href="#b" title="">新闻2</a><a href="#c" title="">新闻3</a></dt>

        <dd>

            <ul id="a">

                <li>·<a href="http://www.showwho.com" title="">新闻1</a></li>

                <li>·<a href="http://www.showwho.com" title="">新闻1</a></li>

                <li>·<a href="http://www.showwho.com" title="">新闻1</a></li>

                <li>·<a href="http://www.showwho.com" title="">新闻1</a></li>

                <li>·<a href="http://www.showwho.com" title="">新闻1</a></li>

            </ul>

            <ul id="b">

                <li>·<a href="http://www.showwho.com" title="">新闻2</a></li>

                <li>·<a href="http://www.showwho.com" title="">新闻2</a></li>

                <li>·<a href="http://www.showwho.com" title="">新闻2</a></li>

                <li>·<a href="http://www.showwho.com" title="">新闻2</a></li>

                <li>·<a href="http://www.showwho.com" title="">新闻2</a></li>

            </ul>

            <ul id="c">

                <li>·<a href="http://www.showwho.com" title="">新闻3</a></li>

                <li>·<a href="http://www.showwho.com" title="">新闻3</a></li>

                <li>·<a href="http://www.showwho.com" title="">新闻3</a></li>

                <li>·<a href="http://www.showwho.com" title="">新闻3</a></li>

                <li>·<a href="http://www.showwho.com" title="">新闻3</a></li>

            </ul>

        </dd>

    </dl>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css xhtml border float html c

相关文章推荐

新的分享

章节导航