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>
  • 相关阅读:
    Linux下安装Apache2.4.43踩坑记录
    网络代理条件下配置git
    docker存储驱动的选择
    Python列表排序
    解决apache无法启动No space left on device
    Flask匹配url使用正则表达式
    Web安全-客户端脚本安全
    springboot中的一些好用注解
    基于cdn方式的vue+element-ui的单页面架构
    干货网站
  • 原文地址:https://www.cnblogs.com/liujianshe1990-/p/5014410.html
Copyright © 2011-2022 走看看