zoukankan      html  css  js  c++  java
  • html 相对定位 绝对 定位 css + div

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 0 Transitional//EN"
    "http://www.worg/TR/xhtml1/DTD/xhtml1-transitional.dtd"
    >
    <html xmlns="http://www.worg/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;
            charset=gb2312"
     />
            <title>Div + CSS Example, Wayhome's Blog</title>
            <style type="text/css">
                <!--
                body,td,th
    {font-family:Verdana;font-size:9px;}
                -->
        
    </style></head>
        <body>
            <div style="position:absolute; top:5px; right:20px; 200px;
                height:180px; background:#00FF00;"
    >
                position: absolute;<br />
                top: 5px;<br />
                right: 20px;<br />
                <div style="position:absolute; left:20px; bottom:10px;
                    100px; height:100px; background:#00FFFF;"
    >
                    position: absolute;<br />

                    left: 20px;<br />
                    bottom: 10px;<br />
                </div>
            </div>
            <div style="position:absolute; top:5px; left:5px; 100px;
                height:100px; background:#00FF00;"
    >
                position: absolute;<br />
                top: 5px;<br />
                left: 5px;<br />
            </div>
            <div style="position:relative; left:150px; 300px; height:50px;
                background:#FF9933;"
    >
                position: relative;<br />
                left: 150px;<br />
                <br />
                 300px; height: 50px; <br />
            </div>
            <div style="text-align:center; background:#ccc;">
                <div style="margin:0 auto; 600px;
                    background:#FF66CC; text-align:left;"
    >
                    <p>1</p>
                    <p>2</p>
                    <p>3</p>
                    <p>4</p>
                    <p>5</p>
                    <div style="padding:20px 0 0 20px; background:#FFFF00;">
                        padding: 20px 0 0 20px;
                        <div style="position:absolute; 100px; height:100px;
                            background:#FF0000;"
    >position: <span style="color:#fff;
                                "
    >absolute</span>;</div>
                        <div style="position:relative; left:200px; 500px;
                            height:300px; background:#FF9933;"
    >
                            position: <span style="color:blue;">relative</span>;<br
                            
    />
                            left: 200px;<br />
                            <br />
                             300px;<br />
                            height: 300px;<br />
                            <div style="position:absolute; top:20px; right:20px;
                                100px; height:100px; background:#00FFFF;"
    >
                                position: absolute;<br />
                                top: 20px;<br />
                                right: 20px;<br /></div>
                            <div style="position:absolute; bottom:20px; left:20px;
                                100px; height:100px; background:#00FFFF;"
    >
                                position: absolute;<br />
                                bottom: 20px;<br />
                                left: 20px;<br />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </body>
    </html>
  • 相关阅读:
    bzoj 4012: [HNOI2015]开店
    POJ 1054 The Troublesome Frog
    POJ 3171 Cleaning Shifts
    POJ 3411 Paid Roads
    POJ 3045 Cow Acrobats
    POJ 1742 Coins
    POJ 3181 Dollar Dayz
    POJ 3040 Allowance
    POJ 3666 Making the Grade
    洛谷 P3657 [USACO17FEB]Why Did the Cow Cross the Road II P
  • 原文地址:https://www.cnblogs.com/wangkangluo1/p/2338969.html
Copyright © 2011-2022 走看看