将网页背景设置为图片学习记录

最新推荐文章于 2022-10-16 08:58:57 发布

metoo@96

最新推荐文章于 2022-10-16 08:58:57 发布

阅读量293

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/weixin_37770023/article/details/79658632

版权

html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

将网页背景设置为图片学习记录

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <!-- 引入JQuery  bootstrap.js-->
    <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
    <script type="text/javascript" src="js/bootstrap.min.js" ></script>
    <style type="text/css">
        body{
            background: url(b.jpg) no-repeat;
            background-size:100% 100%; 
            background-attachment:fixed;
        }
        #login_box{
            padding: 35px;
            border-radius:15px;  /*div圆角*/
            background: #56666B;
            color: #fff;
        }
        #login_title{
            color: #000000;
        }
    </style>

</head>
<body>
    <div class="container" id="top">
        <div class="row" style="margin-top: 240px;">
            <div class="col-md-offset-4 col-md-4">
                <div class="col-md-offset-3 col-md-9">
                    <h1 id='login_title'>用户登录</h1>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4" >
            </div>
            <div class="col-md-4" id='login_box'>
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-md-3 control-label">用户id</label> <!--control-label标签对齐 -->
                        <div class="col-md-9">
                            <input class="form-control" type="text"  placeholder="请输入名字"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-3 control-label">用户密码</label>
                        <div class="col-md-9">
                            <input class="form-control" type="text" placeholder="请输入密码" />
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-offset-7 col-md-5">
                            <input type="submit" class="form-control" class="btn-default" value="登录"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-md-4" >
            </div>
        </div>
    </div>

</body>
</html>

效果如下：