zoukankan      html  css  js  c++  java
  • HTML格式与布局

    1、position:fixed

    <html>
    <head>                                                                
    <style>
    #b
    {
        border:5px solid #300;
        width:100px;
        background-color:#390;
        height:100px;
        margin:10;
        left:30px;
        bottom:30px;
        position:fixed;
         }    
    </style>
    </head>
    <body>
    <div id="b">b</div>
    </body>
    </html>

    2、position:absolute

    <html>
    <head>
    <style>
    #e
    {
        border:5px solid #00F;/*边框宽度,边框样式,边框颜色*/
        width:50px;
        height:50px;
        margin:10px;
        background-color:#0F0;/*div背景颜色*/
        right:50px;
        bottom:50px;
        position:absolute;
        }
    #c
    {
        border:3px double #FF0000;
        width:400px;
        height:200px;}
    #d
    {
        border:3px double #FF0000;
        width:400px;
        height:200px;
        position:absolute;}/*外层上给固定一个position,让里面的bdiv针对ddiv进行位置判定*/
    </style>
    </head>
    <body>
    <div id="c">c<div id="e">e</div></div>
    <div id="d">d<div id="e">e</div></div>
    </body>
    </html>

    3、position:relative

    <html>
    <head>
    <style type="text/css">
        #b
    {
        border:5px solid #300;
        width:100px;
        background-color:#390;
        height:100px;
        margin:10;
        left:30px;
        top:30px;
        position:fixed;
         }    
    #bb
    {
        border:5px solid #300;
        width:100px;
        background-color:#390;
        height:100px;
        margin:10;
        left:100px;
        top:80px;
        position:relative;
    
        }    
    </style>
    </head>
    <body>
    <div id="b">b<div id="bb">bb</div></div>
    </body>
    </html>
  • 相关阅读:
    【习题整理】分块+莫队(未完待续)
    【bzoj4198】【Noi2015】荷马史诗
    【bzoj2006】【NOI2015】超级钢琴
    【bzoj1029】【JSOI2007】建筑抢修
    【bzoj1483】【HNOI2009】梦幻布丁
    【bzoj4195】【NOI2015】程序自动分析
    Rearrangement inequality
    hdu1047
    hdu1046
    hdu1045
  • 原文地址:https://www.cnblogs.com/liujianshe1990-/p/5014410.html
Copyright © 2011-2022 走看看