一个常见的网页布局和浮动的3种情况

肖-肖 · 发表于 2021-4-28 14:57:53

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

网页布局效果图

源代码

常见网页布局和浮动的一些情况.zip (254.07 KB, 下载次数: 0, 售价: 2 鱼币)

wp231957 · 发表于 2021-4-29 12:21:55

帮我设计一下呀，css 实在是太复杂了
整体格局不动，就是让那些按钮字体大一些绝对在div中居中就可以了

<!DOCTYPE.html>
<html>

<head>
    <title> 实时经营信息系统 </title>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <style>
        div {
            margin-left: 10%;
            margin-top: 4%;
            padding-top: 3%;
            padding-left: 12%;
            font-size: 24px;
        }
        
        .s1 {
            width: 200px;
            height: 100px;
            float: left;
            border: 1px solid #f00;
            line-height: 30px;
        }
        
        .s2 {
            width: 200px;
            height: 100px;
            float: left;
            border: 1px solid #f00;
        }
        
        .s3 {
            width: 200px;
            height: 150px;
            float: left;
            border: 1px solid #f00;
        }
        
        .s4 {
            width: 200px;
            height: 150px;
            float: left;
            border: 1px solid #f00;
            margin-left: 10%;
        }
        
        .sytle3 {
            margin-left: 3%;
            vertical-align: middle;
            font-size: 24px;
        }
    </style>

</head>

<body>
    <div class="s1">
        <button id="denglu" class="style3" type="button"><b>本日首次录入</b></button><br><br>
        <button id="xiugai" class="style3" type="button"><b>补录(修改)</b></button>
    </div>
    <div class="s2">
        <button id="chaxun" class="style3" type="button">日报查询 </button><br><br>
        <button id="ybchaxun" class="style3" type="button">月报查询 </button>
    </div>
    <div class="s3">
        <button id="xiugaimima" class="style3" type="button"><b>密码修改</b></button>
    </div>
    <div class="s4">
        <button id="rizhicx" class="style3" type="button"><b>日志查询</b></button><br><br>
        <button id="zbwh" class="style3" type="button"><b>指标维护</b></button><br><br>
        <button id="mimacsh" class="style3" type="button"><b>密码初始化</b></button>
    </div>

</body>

</html>

账号		自动登录	找回密码
密码			立即注册

[原创] 一个常见的网页布局和浮动的3种情况

马上注册，结交更多好友，享用更多功能^_^