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>
  • 相关阅读:
    C#DataGridView的简单使用
    Python实现简单登陆验证(文件操作)
    【hive】centos7下apache-hive-3.1.2-bin的安装测试
    【mysql】centos7下mysql的安装以及基本操作
    【hadoop】细读MapReduce的工作原理
    【hadoop】看懂WordCount例子
    【hadoop】在eclipse上运行WordCount的操作过程
    纪念一下,时隔多年,继delphi上成功运行sql之后
    【Linux下Hadoop-eclipse-plus-3.2.0】编译Hadoop连接eclipse的插件遇见的一系列错误,崩溃的操作
    数据挖掘初次接触!学习代码
  • 原文地址:https://www.cnblogs.com/wangkangluo1/p/2338969.html
Copyright © 2011-2022 走看看