前端笔记day07

最新推荐文章于 2021-10-16 16:51:34 发布

Mephostophilis

最新推荐文章于 2021-10-16 16:51:34 发布

阅读量177

点赞数

本文链接：https://blog.csdn.net/qq_43403974/article/details/100748558

版权

bootstrap导航栏加部分页面

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .zong {
            margin: 0 auto;
            padding-bottom: 24px;
            width: 1205px;
        }

        .zong1 {
            position: relative;
            width: 1205px;
            margin: 0 auto 10px;
            overflow: hidden;
            z-index: 0;
        }

        .hd_label {
            float: left;
            font-size: 24px;
            color: #333;
            line-height: 31px;
        }

        .hd_more {
            position: relative;
            top: 4px;
            right: -6px;
            float: right;
            color: #666;
            font-size: 14px;
            line-height: 31px;
            text-decoration: none;
        }

        .hd_more .i-icon {
            position: relative;
            top: 3px;
            display: inline-block;
            width: 18px;
            height: 18px;
            background: url(//s.stu.126.net/res/images/ui/ui_sprite.png?1367c4a…) no-repeat -1px -1674px;
            margin-left: 3px;
        }

        .um-live-live-list-ct {
            margin: 0 auto 0 -12px;
            width: 1254px;
            font-size: 0px;
        }

        .um-live-live-card.z-col-3 {
            display: inline-block;
            padding: 12px;
            margin-right: 24px;
            width: 370px;
            font-size: 0px;
            vertical-align: top;
            margin-bottom: 4px;
        }

        .um-live-live-card-head {
            float: left;
            margin-right: 20px;
            height: 80px;
            width: 80px;
            font-size: 0px;
        }

        .um-live-live-card-head_img {
            height: 100%;
            width: 100%;
            border-radius: 50%;
        }

        .um-live-live-card.z-col-3 .um-live-live-card-action {
            margin-left: 100px;
        }

        .um-live-live-card .um-live-live-card-action.z-remind .um-live-live-card-action_label::after, .um-live-live-card .um-live-live-card-action.z-join .um-live-live-card-action_label::after {
            position: absolute;
            content: "";
            height: 12px;
            width: 1px;
            background: #999;
            right: -8px;
            top: 2px;
        }

        .um-live-live-card-action {
            position: relative;
            margin-bottom: 8px;
            font-size: 14px;
            line-height: 19px;
            color: #333;
        }

        .um-live-live-card-tit {
            margin-bottom: 8px;
            font-size: 16px;
            line-height: 24px;
            word-break: break-all;
            color: #333;
        }

        .um-live-live-card-subtit {
            position: relative;
            font-size: 12px;
            line-height: 16px;
            color: #666;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
    </style>
    <script>

    </script>
    <link href="bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
    <script src="jQuery/jquery-3.4.1.min.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script>
        var z = 86;
    </script>
</head>
<body>
<div class="container">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <span class="navbar-brand">
                英雄联盟
                </span>
            </div>
            <div>
                <ul class=" nav navbar-nav">
                    <li><a>流行英雄</a></li>
                    <li><a>过期英雄</a></li>
                    <li class="dropdown">
                        <a href="" data-toggle="dropdown">快过期英雄</a>
                        <ul class="dropdown-menu">
                            <li><a href="">a</a></li>
                            <li><a href="">b</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</div>
<div class="zong1">
    <div class="zong1">
        <h2 class="hd_label">课堂直播</h2>
        <a class="hd_more">
            <span>更多</span>
            <span class="i-icon"></span>
        </a>
    </div>
    <div class="um-live-live-list-ct">
        <div class="um-live-live-card z-col-3">
            <div class="um-live-live-card-head">
                <img class="um-live-live-card-head_img" src="01.jpg">
            </div>
            <div class="um-live-live-card-action z-remind">
                    <span class="um-live-live-card-action_label">
                        今天 20:00
                    </span>
                <span class="um-live-live-card-action_btn text-success">开启提醒</span>
            </div>
            <div class="um-live-live-card-tit">运营插画四部曲</div>
            <div class="um-live-live-card-subtit">艾琦aiki</div>
        </div>

        <div class="um-live-live-card z-col-3">
            <div class="um-live-live-card-head">
                <img class="um-live-live-card-head_img"
                     src="02.png">
            </div>
            <div class="um-live-live-card-action z-remind">
                    <span class="um-live-live-card-action_label">
            今天 20:00
        </span>

                <span class="um-live-live-card-action_btn text-success">开启提醒</span>
            </div>
            <div class="um-live-live-card-tit">网易技术这些年，JAVA后端架构体系是怎么发展起来得！</div>
            <div class="um-live-live-card-subtit">王建安 网易特邀Java高级工程师</div>
        </div>

        <div class="um-live-live-card z-col-3">
            <div class="um-live-live-card-head">
                <img class="um-live-live-card-head_img" src="03.jpg">
            </div>
            <div class="um-live-live-card-action z-remind">
                    <span class="um-live-live-card-action_label">
                        今天 20:00
        </span>

                <span class="um-live-live-card-action_btn text-success">开启提醒</span>
            </div>
            <div class="um-live-live-card-tit">应用打包优化之被遗忘的精髓</div>
            <div class="um-live-live-card-subtit">彭锡 网易网易特邀安卓高级工程师</div>
        </div>

        <div class="um-live-live-card z-col-3">
            <div class="um-live-live-card-head">
                <img class="um-live-live-card-head_img" src="04.jpg">
            </div>
            <div class="um-live-live-card-action z-remind">
                    <span class="um-live-live-card-action_label">
            今天 20:00
        </span>

                <span class="um-live-live-card-action_btn text-success">开启提醒</span>
            </div>
            <div class="um-live-live-card-tit">助力求职同时兼具理财神技：用Python优化股票仓位</div>
            <div class="um-live-live-card-subtit">Leo 网易特邀数据分析讲师</div>
        </div>

        <div class="um-live-live-card z-col-3">
            <div class="um-live-live-card-head">
                <img class="um-live-live-card-head_img" src="05.jpg">
            </div>
            <div class="um-live-live-card-action z-remind">
                    <span class="um-live-live-card-action_label">
            今天 20:00
        </span>

                <span class="um-live-live-card-action_btn text-success">开启提醒</span>
            </div>
            <div class="um-live-live-card-tit">从源码探究构建工具之手动实现webpack</div>
            <div class="um-live-live-card-subtit">谭金龙 网易特邀前端高级工程师</div>
        </div>

        <div class="um-live-live-card z-col-3">
            <div class="um-live-live-card-head">
                <img class="um-live-live-card-head_img" src="06.jpg">
            </div>
            <div class="um-live-live-card-action z-remind">
                    <span class="um-live-live-card-action_label">
            今天 20:00
        </span>

                <span class="um-live-live-card-action_btn text-success">开启提醒</span>
            </div>
            <div class="um-live-live-card-tit">Python极速入门：教你做电影实时票房爬虫网站</div>
            <div class="um-live-live-card-subtit">毕滢 网易AI专家讲师</div>
        </div>

    </div>


</div>

</body>
</html>

（js）1、页面中有一个按钮要求，能实现点击这个按钮弹出显示按钮中的值。

在这里插入图片描述

<script>
        var z = 86;
    </script>


<div>
    <button onclick="alert(z)">
        显示86
    </button>
</div>

2、使用js打印出1000以内的水仙花数

在这里插入图片描述

 <script>
        var i,a,b,c;
        for(i=100;i<1000;i++){
            a=parseInt(i/100);
            b=parseInt((i-a*100)/10);
            c=parseInt(i-a*100-b*10);
            if( a*a*a+b*b*b+c*c*c == i){
                document.write(i+"<br>");
            }
        }
    </script>

Mephostophilis

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端笔记day07

bootstrap导航栏加部分页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link href="bootstrap-3.3.7-dist/css/bootstrap...
复制链接

扫一扫