使用Bootstrap实现简单的主页

效果

未登录时页面:
在这里插入图片描述

在这里插入图片描述
点击登录
在这里插入图片描述
登录之后
在这里插入图片描述

未登录时代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>请先登录!</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>


</head>
<!-- container 剧中两边留白 -->
<!-- container  100%宽度 -->
<!-- 栅格系统将一行分为十二列
 栅格参数:col-屏幕尺寸-占用列数-->
<body>
<nav class="navbar navbar-inverse" style="margin-bottom: 0px">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="main.html">首页</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="login.html">获取音乐资源请先登录! <span class="sr-only">(current)</span></a></li>
                <li><a href="login.html">获取资源mv资源请先登录!</a></li>
                <li><a href="login.html">获取图片资源请先登录!</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li><a href="reg.html">欢迎注册!</a></li>

                <li><a href="login.html">欢迎登录!</a></li>

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">更多 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="https://blog.csdn.net/qq_45859087?spm=1000.2115.3001.5343">欢迎访问我的博客主页</a></li>
                        <li><a href="#">欢迎访问我的github</a></li>
                        <li><a href="#">有问题联系下面的qq啊!</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">qq:2897781091</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<div>
    <h3 style="text-align: center">!!!!!!!!!!!!!!!!!!广告位出租!!!!!!!!!!!!!!!!!!!</h3>
</div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="3000">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="images/0.jpg" alt="...">
            <div class="carousel-caption">
                ...
            </div>
        </div>
        <div class="item">
            <img src="images/9.png" alt="...">
            <div class="carousel-caption">
                ...
            </div>
        </div>

        <div class="item">
            <img src="images/7.jpg" alt="...">
            <div class="carousel-caption">
                hello
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>


</div>

</div>

</body>
</html>

登陆后代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>我的主页</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
        $(function () {
            $.ajax({
                //请求方式
                type: "GET",
                //文件位置
                url: "mainsuccess",
                //返回数据格式为json,也可以是其他格式如
                dataType: "json",
                //请求成功后要执行的函数,拼接html
                success: function (data) {
                    var userName = data.msg;
                    var str = "<h4 style=\"margin-top: 0px;margin-bottom: 100px\">欢迎";
                    str += userName;
                    str += "先生!</h4>"
                    $("#info").html(str);
                }
            });
        });
    </script>
</head>
<!-- container 剧中两边留白 -->
<!-- container  100%宽度 -->
<!-- 栅格系统将一行分为十二列
 栅格参数:col-屏幕尺寸-占用列数-->
<body>
<nav class="navbar navbar-inverse" style="margin-bottom: 0px">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!--            <a id="info" valign="middle"class="navbar-brand" href="mainsuccess.html"></a>-->
            <a class="navbar-brand" id="info" href="mainsuccess.html">欢迎</a>

        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="list.html?curPage=1">音乐资源 <span class="sr-only">(current)</span></a></li>
                <li><a href="MV.html">mv资源</a></li>
                <li><a href="MV.html">图片资源</a></li>

            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li><a href="updatePerson.html">我的使用记录</a></li>
                <li><a href="updatePerson.html">点击我修改个人信息</a></li>

                <li><a href="reg.html">欢迎注册!</a></li>

                <li><a href="main.html">退出登录!</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">更多 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="https://blog.csdn.net/qq_45859087?spm=1000.2115.3001.5343">欢迎访问我的博客主页</a></li>
                        <li><a href="#">欢迎访问我的github</a></li>
                        <li><a href="#">有问题联系下面的qq啊!</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">qq:2897781091</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<div>
    <h3 style="text-align: center">!!!!!!!!!!!!!!!!!!广告位出租!!!!!!!!!!!!!!!!!!!</h3>
</div>
<div style="margin-top: 0px" id="carousel-example-generic" class="carousel slide" data-ride="carousel"
     data-interval="3000">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="images/0.jpg" alt="...">
            <div class="carousel-caption">
                ...
            </div>
        </div>
        <div class="item">
            <img src="images/9.png" alt="...">
            <div class="carousel-caption">
                ...
            </div>
        </div>

        <div class="item">
            <img src="images/7.jpg" alt="...">
            <div class="carousel-caption">
                hello
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>


</div>

</div>

</body>
</html>
  • 16
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 13
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值