w2d3

最新推荐文章于 2024-05-31 14:16:24 发布

.qmm

最新推荐文章于 2024-05-31 14:16:24 发布

阅读量529

点赞数

本文链接：https://blog.csdn.net/Qmmmmmmmmmm/article/details/100768462

版权

**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="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href=" ">作者管理</a>
            </div>
            <div>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">悬疑小说</a></li>
                    <li class="active"><a href="#">现代文学</a></li>
                    <li class="active"><a href="#">言情小说</a></li>
                    <li><a href="#">诗集散文< /a></li>
                    <li class="dropdown active">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        悬疑小说
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">唐家三少</a></li>
                        <li><a href="#">天下霸唱</a></li>
                        <li><a href="#">蔡骏</a></li>


                    </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</body>
</html>

**2、完成该页面，取材自有道云课堂。**
![在这里插入图片描述](http

s://img-blog.csdnimg.cn/20190912125310504.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1FtbW1tbW1tbW1t,size_16,color_FFFFFF,t_70)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="bootstrap-3.3.7-dist/css/bootstrap.css"rel="stylesheet">
    <style>
        img{
            border-radius:100%;
            overflow:hidden;
        }
        h6{
            color: cadetblue;
        }
    </style>

</head>
<body>
<div class="container" style="margin-top: 5%">


    <table cellpadding="0" class="table table-striped table-hover table-condensed ">
        <thead>
        <tr>

            <td>
                <img src="./11.jpg" >
            </td>
            <td>
                今天20:00 <a href="#" style="color: green">丨开启提醒</a><br>
                运营插画四部曲 <br>
                <h6>艾琦aiki</h6>
            </td>
            <td>
                <img src="./22.jpg" alt="">
            </td>
            <td>今天20:00 <a href="#"style="color: green">丨开启提醒</a><br>
                网易技术这些年，JAVA后端架构体系 <br>
                是怎么发展起来得！
                <h6>王建安 网易特邀Java高级工程师</h6>
            </td>
            <td>
                <img src="./33.jpg" alt="">
            </td>
            <td>
                今天20:00 <a href="#"style="color: green">丨开启提醒</a><br>
                网易技术这些年，JAVA后端架构体系 <br>
                是怎么发展起来得！
                <h6>王建安 网易特邀Java高级工程师</h6>
            </td>
        </tr>

        </thead>
        <tbaby>
            <tr>
                <td>
                    <img src="./44.jpg" alt="">
                </td>
                <td>
                    今天20:00 <a href="#"style="color: green">丨开启提醒</a><br>
                    助力求职同时兼具理财神技：用Pytho <br>
                    n优化股票仓位
                    <h6>leo 网易特邀数据分析讲师</h6>
                </td>
                <td>
                    <img src="./55.jpg" alt="">
                </td>
                <td>     今天20:00 <a href="#"style="color: green">丨开启提醒</a><br>
                    从源代码构建工具之手动实现webp <br>
                    ack
                    <h6>谭金龙 网易特邀前端高级工程师</h6>
                </td>
                <td>
                    <img src="./66.png" alt="">
                </td>
                <td>     今天20:00 <a href="#"style="color: green">丨开启提醒</a><br>
                    Python极速入门：教你做电影实时票 <br>
                    房爬虫网址
                    <h6>毕滢 网易AI专家讲师</h6>
                </td>
            </tr>

        </tbaby>
    </table>
</div>
</body>
</html>
**

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <button onclick="alert(123)">按钮</button>
    </body>
    </html>

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

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <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>
    </body>
    </html>