bobobt 2021-09-10 13:11 采纳率: 100%
浏览 93
已结题

大神们，这个网页设计，CSS怎么改啊

img

怎么把这个位置改成下面这个样式的啊 CSS里怎么改成下面这个样子啊，给它对齐

img

代码如下：
HTML：


```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>传智商城–登录</title>
    <link rel="stylesheet" href="../public/home/user.css">
    <script src="../public/common/jquery.min.js"></script>
    <script src="../public/common/ajaxForm.js"></script>
</head>
<body>
    <div class="box">
        <h1>舒心家居馆 | 欢迎登录</h1>
        <div class="main">
            <div class="login-ad left">
                <!-- 广告位 -->
            </div>
            <form id="loginForm" action="/?c=user&a=loginExec" method="post">
            <table class="login right">
                <tr><th>用户名:</th><td><input type="text" name="username" required/></td></tr>
                <tr><th>密码:</th><td><input type="password" name="password" required /></td></tr>

                <tr><td> </td></tr><td><input type="submit" class="button" value="登 录"/></td></tr>
                <tr><td colspan="2" class="center"><a href="/?c=user&a=register">立即注册</a><a href="/">返回首页</a></td></tr>
            </table>
            </form>
        </div>
    </div>
    <script>
        // 验证码点击刷新
        $(function(){
            var $img = $("#captcha");
            var src = $img.attr("src")+"&_=";
            img.click(function(){
                $img.attr("src",src+Math.random());
            });
        });
        // Ajax表单提交
        $("#loginForm").ajaxForm(function(data){
            // 登录失败，刷新验证码
            data.ok || $("#captcha").click();
        })
    </script>
</body>
</html>



**CSS**如下：

```css
body{margin:0;padding:0;}
body{
    /* background:#f2f2f2; */
    background-image: url(./images/bg.jpg);
    color:#666;
    font-size:16px;
    background-repeat: no-repeat; 
    background-size: 100% 100%;
    background-attachment: fixed;
    }
h1{font-size:30px;
    text-shadow:1px 1px 1px #ccc;
    color:rgb(15, 30, 71)
}
.clear{clear:both;}
.center{
    text-align:center;
}
.left{float:left;}
.right{float:right;}
.box{width:800px;margin:0 auto;margin-top:30px;}
.box .main{ 
            margin:30px auto;
            box-shadow: 0 0 15px #ccc;
            background:rgba(255, 255, 255, 0.562);
            padding:40px;
            overflow:hidden;}
.box .main .login-ad{
                    width:320px;
                    height:250px;
                    background:url(./images/ad02.jpg);
                    background-repeat: no-repeat; 
                    /* background-size: 100% 100%; */
                    /* background-attachment: fixed; */
                }
/* .box .main .register-ad{width:320px;height:250px;background:url(./images/ad02.jpg);} */
.box .main .login{width:350px;}
.box .main th{text-align:right;}
.box .main input{
    width:250px;
    height:18px;
    padding:5px;
    border:1px solid #ddd;
    /*  */  
}
.box .main tr{
    height:40px;

}
.box .main th{
    font-weight:normal;
}
.box .main img{cursor:pointer;}
.box .main a{color:#EE4C4F;font-size:14px;text-decoration: none;margin-left:20px;}
.box .main a:hover{text-decoration:underline;}
.box .main .button{
    width:250px;
    height:30px;
    background:#EE4C4F;
    border:1px solid #E37A7D;
    color:#fff;
    cursor:pointer;
    /*  */

}
.box .main .button{*border:none;}
.box .main .button:hover{background:#F4595C;}
.box .main .error{border:1px solid #E37A7D;}
/*提示*/
.tip{position:fixed;top:50%;left:50%;background:#FE8502;color:#fff;;border-radius:6px;font-size:13px;box-shadow:3px 3px 15px #FE8502;z-index:1000;}
.tip-wrap{margin:10px 30px;}

图片：

img

  • 写回答

3条回答 默认 最新

  • 前端纸飞机 前端领域优质创作者 2021-09-10 13:31
    关注
    
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>传智商城–登录</title>
    <link rel="stylesheet" href="../public/home/user.css">
    <script src="../public/common/jquery.min.js"></script>
    <script src="../public/common/ajaxForm.js"></script>
</head>

<body>
    <div class="box">
        <h1>舒心家居馆 | 欢迎登录</h1>
        <div class="main">
            <div class="login-ad left">
                <!-- 广告位 -->
            </div>
            <form id="loginForm" action="/?c=user&a=loginExec" method="post">
                <table class="login right" align="left">
                    <tr>
                        <th>用户名:</th>
                        <td><input type="text" name="username" required /></td>
                    </tr>
                    <tr>
                        <th>密码:</th>
                        <td><input type="password" name="password" required /></td>
                    </tr>

                    <tr>
                        <th></th>
                        <td><input type="submit" class="button" value="登 录" /></td>
                    </tr>
                    <tr>
                        <td colspan="2" class="center"><a href="/?c=user&a=register">立即注册</a><a href="/">返回首页</a></td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
    <script>
        验证码点击刷新
        $(function(){
            var $img = $("#captcha");
            var src = $img.attr("src")+"&_=";
            img.click(function(){
                $img.attr("src",src+Math.random());
            });
        });
        // Ajax表单提交
        $("#loginForm").ajaxForm(function(data){
            // 登录失败，刷新验证码
            data.ok || $("#captcha").click();
        })
    </script>
</body>

<style>
    body {
        margin: 0;
        padding: 0;
    }

    body {
        /* background:#f2f2f2; */
        background-image: url(./images/bg.jpg);
        color: #666;
        font-size: 16px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-attachment: fixed;
    }

    h1 {
        font-size: 30px;
        text-shadow: 1px 1px 1px #ccc;
        color: rgb(15, 30, 71)
    }

    .clear {
        clear: both;
    }

    .center {
        text-align: center;
    }

    .left {
        float: left;
    }

    .right {
        float: right;
    }

    .box {
        width: 800px;
        margin: 0 auto;
        margin-top: 30px;
    }

    .box .main {
        margin: 30px auto;
        box-shadow: 0 0 15px #ccc;
        background: rgba(255, 255, 255, 0.562);
        padding: 40px;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
    }

    .box .main .login-ad {
        width: 320px;
        height: 250px;
        background: url(./images/ad02.jpg);
        background-repeat: no-repeat;
        flex-shrink: 0;
        /* background-size: 100% 100%; */
        /* background-attachment: fixed; */
    }

    /* .box .main .register-ad{width:320px;height:250px;background:url(./images/ad02.jpg);} */
    .box .main .login {
        width: 350px;
    }

    .box .main th {
        text-align: right;
    }

    .box .main input {
        width: 250px;
        height: 18px;
        padding: 5px;
        border: 1px solid #ddd;
        /*  */
    }

    .box .main tr {
        height: 40px;
    }

    .box .main th {
        font-weight: normal;
    }

    .box .main img {
        cursor: pointer;
    }

    .box .main a {
        color: #EE4C4F;
        font-size: 14px;
        text-decoration: none;
        margin-left: 20px;
    }

    .box .main a:hover {
        text-decoration: underline;
    }

    .box .main .button {
        width: 250px;
        height: 30px;
        background: #EE4C4F;
        border: 1px solid #E37A7D;
        color: #fff;
        cursor: pointer;
        /*  */

    }

    .box .main .button {
        *border: none;
    }

    .box .main .button:hover {
        background: #F4595C;
    }

    .box .main .error {
        border: 1px solid #E37A7D;
    }

    /*提示*/
    .tip {
        position: fixed;
        top: 50%;
        left: 50%;
        background: #FE8502;
        color: #fff;
        ;
        border-radius: 6px;
        font-size: 13px;
        box-shadow: 3px 3px 15px #FE8502;
        z-index: 1000;
    }

    .tip-wrap {
        margin: 10px 30px;
    }
</style>

</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

问题事件

  • 系统已结题 9月18日
  • 已采纳回答 9月10日
  • 创建了问题 9月10日