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>
  • 相关阅读:
    jchdl
    jchdl
    UVa 10256 (判断两个凸包相离) The Great Divide
    UVa 11168 (凸包+点到直线距离) Airport
    LA 2572 (求可见圆盘的数量) Kanazawa
    UVa 10652 (简单凸包) Board Wrapping
    UVa 12304 (6个二维几何问题合集) 2D Geometry 110 in 1!
    UVa 10674 (求两圆公切线) Tangents
    UVa 11796 Dog Distance
    LA 3263 (平面图的欧拉定理) That Nice Euler Circuit
  • 原文地址:https://www.cnblogs.com/wangkangluo1/p/2338969.html
Copyright © 2011-2022 走看看