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>
  • 相关阅读:
    react typescript 子组件调用父组件
    Mongodb query查询
    CentOS虚拟机不能联网状况下yum方式从本地安装软件包(转载的)
    CentOS6.5 mini开启网络
    MySQL的InnoDB表如何设计主键索引-转自淘宝MySQL经典案例
    linux下安装mysql-community后起不来
    Eclipse 快捷键
    maven下载jta失败,自己本地安装jta库
    spring配置文件中id与name
    @autowired和@resource的区别
  • 原文地址:https://www.cnblogs.com/wangkangluo1/p/2338969.html
Copyright © 2011-2022 走看看