Position:absolute

<!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=utf-8" />

    <title>Div:absolute</title>

    <style type="text/css">

        *

        {

            margin: 0;

            padding: 0;

        }

        body

        {

            font-size: 12px;

            color: #666666;

            text-align: center;

        }

        a:link

        {

            color: #999999;

            text-decoration: none;

        }

        a:visited

        {

            text-decoration: none;

            color: #999999;

        }

        a:hover

        {

            text-decoration: none;

            color: #999999;

        }

        a:active

        {

            text-decoration: none;

            color: #999999;

        }

    </style>

</head>

<body>

    <div style="width: 600px; height: 500px; margin: 10px auto; text-align: left; border: #CCCCCC dashed 1px;

        position: relative;">

        <div style="width: 200px; height: 200px; border: #CCCCCC dashed 1px; position: absolute;

            top: 10px; left: 10px;">

            <div style="height: 25px; background-color: #EEEEEE;">

                <p style="position: absolute; top: 6px; left: 10px;">

                    标题一

                </p>

                <p style="position: absolute; top: 10px; right: 10px;">

                    <a href="#">more</a>

                </p>

            </div>

            <ul style="list-style: none; line-height: 26px; position: absolute; top: 35px; left: 10px;">

                <li><a href="#">1.我是文章的题目我是文章的题目</a></li>

                <li><a href="#">2.我是文章的题目我是文章的题目</a></li>

                <li><a href="#">3.我是文章的题目我是文章的题目</a></li>

                <li><a href="#">4.我是文章的题目我是文章的题目</a></li>

                <li><a href="#">5.我是文章的题目我是文章的题目</a></li>

                <li><a href="#">6.我是文章的题目我是文章的题目</a></li>

            </ul>

        </div>

        <div style="width: 200px; height: 50px; border: #CCCCCC dashed 1px; position: absolute;

            top: 10px; left: 220px;">

        </div>

        <div style="width: 200px; height: 250px; border: #CCCCCC dashed 1px; position: absolute;

            top: 70px; left: 220px;">

        </div>

        <div style="width: 150px; height: 200px; border: #CCCCCC dashed 1px; position: absolute;

            top: 10px; left: 437px;">

        </div>

        <div style="width: 200px; height: 269px; border: #CCCCCC dashed 1px; position: absolute;

            top: 222px; left: 10px;">

        </div>

        <div style="width: 367px; height: 50px; border: #CCCCCC dashed 1px; position: absolute;

            top: 333px; left: 221px;">

        </div>

        <div style="width: 150px; height: 96px; border: #CCCCCC dashed 1px; position: absolute;

            top: 224px; left: 437px;">

        </div>

        <div style="width: 136px; height: 98px; border: #CCCCCC dashed 1px; position: absolute;

            top: 394px; left: 221px;">

        </div>

        <div style="width: 136px; height: 98px; border: #CCCCCC dashed 1px; position: absolute;

            top: 393px; left: 369px;">

        </div>

        <div style="width: 73px; height: 98px; border: #CCCCCC dashed 1px; position: absolute;

            top: 392px; left: 515px;">

        </div>

    </div>

</body>

</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值