• 网页的简单布局


    <head>
    
    <style type="text/css">
    #main
    {
        text-align:center;
    }
    .d1
    {
        border:1px solid blue;
        
        960px;
        margin:auto;
        
    }
    .d6
    {
        height:100px;
        
        background-color:black;
        float:left;
        
        100%;
    }
    .dd
    {
        
        height:100px;
        border:1px solid red;
        background-color:navy;
        float:left;
        
        100%;
    }
    .d2
    {
        100%;
        height:300px;
        background-color:pink;
        float:left;
    }
    .d3
    {
        100%;
        height:200px;
        background-color:#9FF;
        float:left;
    }
    .d4
    {
        float:left;
        height:180px;
        background-color:#99C;
        307px;
        margin-right:10px;
        margin-top:10px;
        
    }
    .d5
    {
        float:right;
        height:180px;
        background-color:#99C;
        306px;
        margin-right:10px;
        margin-top:10px;
    }
    #divleft
    {
        margin-left:10px;
    }
    .dd h1
    {
        font-size:52px;
        font-weight:bold;
        color:white;
        float:left;
        margin-left:20px;
        margin-top:20px;
    }
    .dlzc
    {
        float:right;
        margin-right:10px;
        margin-top:20px;
    }
    .dlzc a
    {
        color:white;
        font-weight:bold;
        text-decoration:none;
    }
    </style>
    
    </head>
    
    <body>
    <div id="main">
        <div class="d1">
            <div class="dd">
                <h1>真无奈网页教程</h1>
                <div class="dlzc">
                    <a href="#">登录</a>
                    <a href="#">注册</a>
                </div>
            </div>
            <div class="d2"></div>
            <div class="d3">
                <div id="divleft" class="d4"></div>
                <div class="d4"></div>
                <div class="d5"></div>
            </div>
            <div class="d6"></div>
        </div>
    </div>
    </body>
    </html>
  • 相关阅读:
    Leecode刷题之旅-C语言/python-383赎金信
    Leecode刷题之旅-C语言/python-349两整数之和
    Cesium 实现粒子效果贴地(伪)
    CesiumJS 添加会动的GIF
    sleep 和 wait 区别
    Git常用命令
    java 泛型
    java 设计模式 ---- 单例模式
    java 设计模式 ---- 工场模式
    java 线程池 ---- newCachedThreadPool()
  • 原文地址:https://www.cnblogs.com/691331894w/p/4248927.html
Copyright © 2020-2023  润新知