zoukankan      html  css  js  c++  java
  • 网页格式布局

    <style>
    #a
    {
        border:2px solid blue;
        height:100px;
        100px;
        background-color:#0F6;
        right:60px;
        bottom:70px;
        position:fixed;}
    .b
    {
        border:2px solid blue;
        height:100px;
        100px;
        background-color:#0F6;
        right:0px;
        bottom:0px;
        position:absolute;}
    .c
    {
        border:2px solid red;
        400px;
        height:200px;}
    .d
    {
        border:2px solid red;
        400px;
        height:200px;
        position:absolute;}
    #aaa
    {
        border:2px solid yellow;
        background-color:#9F3;
        height:100px;
        100px;
        left:30px;
        top:30px;
        position:fixed;}
    #bbb
    {
        border:2px solid yellow;
        background-color:#9F3;
        height:100px;
        100px;
        left:30px;
        top:30px;
        position:relative;}
    </style>
    </head>
    
    <body>
    <div id="a">广告招商</div>
    <div class="c">c<div class="b">b</div></div>
    <div class="d">d<div class="b">bb</div></div>
    <div id="aaa">aaa</div>
    <div id="bbb">bbb</div>
    
    
    </body>
    复制代码
    复制代码
    <style>
    #aaa
    {
        border:2px solid yellow;
        background-color:#9F3;
        height:100px;
        100px;
        left:30px;
        top:30px;
        position:fixed;
        overflow:visible;
        }
    #bbb
    {
        border:2px solid yellow;
        background-color:#9F3;
        height:100px;
        100px;
        left:60px;
        top:60px;
        position:relative;}
    #ccc
    {
        border:#0C0 solid 2px;
        height:300px;
        100px;
        float:right;}
        #ddd
    {
        border:#0C0 solid 2px;
        height:300px;
        100px;
        float:left;}
    </style>
    </head>
    
    <body><br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    
    <div id="ccc">广告位置招商</div><div id="ddd">广告位ddd</div><div id="ddd">广告位eee</div><div id="ccc">广告位置招商fff</div>
    <!--<div id="aaa">aaa<div id="bbb">bbb</div></div> -->
  • 相关阅读:
    使用TCMalloc优化OpenResty
    CentOS下强行umount卸载设备
    几种提高jQuery性能的代码
    知乎首页延时交互的小思路
    OpenResty+lua+GraphicsMagick生成缩略图
    __builtin__与__builtins__的区别与关系
    python语法学习之函数、类、模块
    os.popen与os.system区别
    getattr()函数详解
    python异常处理
  • 原文地址:https://www.cnblogs.com/dianfu123/p/5319398.html
Copyright © 2011-2022 走看看