day07

最新推荐文章于 2024-05-15 11:59:04 发布

weixin_42026679

最新推荐文章于 2024-05-15 11:59:04 发布

阅读量110

点赞数

本文链接：https://blog.csdn.net/weixin_42026679/article/details/100748090

版权

html作业

1.用BootStrap实现一个导航栏

运行截图：
在这里插入图片描述
源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏</title>
    <link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="jquery-3.4.1.min.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <nav class="nav navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <span class="navbar-brand">英雄联盟任务管理系统</span>
            </div>
            <div>
                <ul class="nav navbar-nav">
                    <li><a href="">流行英雄管理</a></li>
                    <li><a href="">过气英雄管理</a></li>
                    <li class="dropdown">
                        <a href="" class="dropdown-toggle" data-toggle="dropdown">
                            其他管理
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">其他1</a></li>
                            <li><a href="#">其他2</a></li>
                            <li><a href="#">其他3</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</div>
</body>
</html>

2.完成页面

运行截图：
在这里插入图片描述
源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>
        .row {
            margin-bottom: 50px;
        }

        img {
            height: 90px;
        }

        .a {
            height: 100px;
        }

        .b {
            float: left;
            margin: 0px 20px 0px 0px
        }

        a {
            color: #4cae4c;
            text-decoration: none;
            border-left: 1px solid darkgray;
            margin-left: 5px;
            padding-left: 10px;
        }

        .c {
            font-size: 18px;
            margin-top: 5px;
        }

        .d {
            margin-top: 5px;
            font-size: 10px;
            color: dimgrey;
        }

    </style>
</head>
<body>
<div class="container" style="margin-top: 50px">
    <div class="row">
        <div class="a col-md-4">
            <div class="b">
                <img class="img-circle" src="./img/01.jpg">
            </div>
            <div>
                <div>
                    <span>今天 20:00</span>
                    <a href="">开启提醒</a>
                </div>
                <div class="c">运营插画四部曲
                    <div class="d">艾琦aiki</div>
                </div>
            </div>
        </div>

        <div class="a col-md-4">
            <div class="b">
                <img class="img-circle" src="./img/02.jpg">
            </div>
            <div>
                <div>
                    <span>今天 20:00</span>
                    <a href="">开启提醒</a>
                </div>
                <div class="c">网易技术这些年，JAVA后端架构体系是怎么发展起来得！
                    <div class="d">王建安 网易特邀Java高级工程师</div>
                </div>
            </div>
        </div>
        <div class="a col-md-4">
            <div class="b">
                <img class="img-circle" src="./img/03.jpg">
            </div>
            <div>
                <div>
                    <span>今天 20:00</span>
                    <a href="">开启提醒</a>
                </div>
                <div class="c">应用打包优化之被遗忘的精髓
                    <div class="d">彭锡 网易网易特邀安卓高级工程师</div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="a col-md-4">
            <div class="b">
                <img class="img-circle" src="./img/04.jpg">
            </div>
            <div>
                <div>
                    <span>今天 20:00</span>
                    <a href="">开启提醒</a>
                </div>
                <div class="c">助力求职同时兼具理财神技：用Python优化股票仓位
                    <div class="d">Leo 网易特邀数据分析讲师</div>
                </div>
            </div>
        </div>

        <div class="a col-md-4">
            <div class="b">
                <img class="img-circle" src="./img/05.jpg">
            </div>
            <div>
                <div>
                    <span>今天 20:00</span>
                    <a href="">开启提醒</a>
                </div>
                <div class="c">从源码探究构建工具之手动实现webpack
                    <div class="d">谭金龙 网易特邀前端高级工程师</div>
                </div>
            </div>
        </div>
        <div class="a col-md-4">
            <div class="b">
                <img class="img-circle" src="./img/06.jpg">
            </div>
            <div>
                <div>
                    <span>今天 20:00</span>
                    <a href="">开启提醒</a>
                </div>
                <div class="c">Python极速入门：教你做电影实时票房爬虫网站
                    <div class="d">毕滢 网易AI专家讲师</div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

js作业

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

运行截图：
在这里插入图片描述
源代码：

<button onclick="alert(45)">按钮</button>

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

运行截图：
在这里插入图片描述

源代码：

var i, a, b, c;
document.write("1000以内的水仙花数为："+"<br>");
for (i = 100; i < 1000; i++) {
    a = parseInt(i / 100);
    b = parseInt((i - a * 100) / 10);
    c = parseInt(i - a * 100 - b * 10);
    if (i == a * a * a + b * b * b + c * c * c) {
        document.write(+i + "<br>");
    }
}

weixin_42026679

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day07

html作业1.用BootStrap实现一个导航栏运行截图：源代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>导航栏</title> <link rel="stylesheet" href=...
复制链接

扫一扫