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>
  • 相关阅读:
    巨蟒django之权限9:前端展示修改删除合并&&权限展示
    巨蟒django之权限8:排序&&菜单展开权限归属
    巨蟒django之权限7:动态生成一级&&二级菜单
    巨蟒django之权限6: 权限控制表设计&&登录权限
    巨蟒django之CRM5 学习记录&&课程记录&&班级管理&&私户的数量上限
    巨蟒django之CRM4 一些小功能
    巨蟒django之CRM3 添加和编辑客户&&公户和私户的展示和转换
    巨蟒django之CRM2 展示客户列表&&分页
    巨蟒django之CRM1 需求分析&&表结构设计&&注册登录验证
    sysfs接口函数到建立_DEVICE_ATTR
  • 原文地址:https://www.cnblogs.com/wangkangluo1/p/2338969.html
Copyright © 2011-2022 走看看