html练习题3

最新推荐文章于 2023-05-12 16:56:35 发布
最新推荐文章于 2023-05-12 16:56:35 发布
阅读量317 收藏
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44329441/article/details/100751363
版权

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.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">
        <div class="container-fluid">
            <div class="navbar-header">
                <span class="navbar-brand">D5游戏平台</span>

            </div>
            <div>
                <ul class="nav navbar-nav">
                    <li><a href="">平台会员</a></li>
                    <li><a href="">平台下载</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>
                            <li><a href="">c</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</div>
</body>
</html>

在这里插入图片描述

2、完成有道云课堂直播列表。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课堂直播</title>
    <style>
        body{
            float: left;
            padding: 0;
            margin: 0;

        }
        body, textarea, select, input {
            font-family: "Arial","Hiragino Sans GB",微软雅黑,"Helvetica","sans-serif";
            font-size: 14px;
            line-height: 21px;
            color: #343d42;
            outline: none;
            border: 0;
        }

        .um-live-live-list {
            margin: 0 auto;
            padding-bottom: 24px;
            width: 1205px;
        }

        .um-live-live-list-hd {
            position: relative;
            width: 1205px;
            margin: 0 auto 10px;
            overflow: hidden;
            z-index: 0;
        }
        .um-live-live-list-hd_label {
            float: left;
            font-size: 24px;
            color: #333;
            line-height: 31px;
        }
        .um-live-live-list-hd_more {
            position: relative;
            top: 4px;
            right: -6px;
            float: right;
            color: #666;
            font-size: 14px;
            line-height: 31px;
            text-decoration: none;
        }
        .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-action {
            position: relative;
            margin-bottom: 8px;
            font-size: 14px;
            line-height: 19px;
            color: #333;
        }
        .um-live-live-card-action_btn {
            color: #49af4f;
            cursor: pointer;
        }
        .um-live-live-card.z-col-3 .um-live-live-card-tit {
            margin-left: 100px;
            width: 270px;
            max-height: 44px;
            overflow: hidden;
        }
        .um-live-live-card-subtit {
            position: relative;
            font-size: 12px;
            line-height: 16px;
            color: #666;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
        .um-live-live-card-tit {
            margin-bottom: 8px;
            font-size: 16px;
            line-height: 24px;
            word-break: break-all;
            color: #333;
        }
        .um-live-live-card-head_img {
            height: 100%;
            width: 100%;
            border-radius: 50%;
        }

    </style>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<div class="container" style="margin-left: 50px">
    <div class="mc-index-live j-index-live" >
        <div class="um-live-live-list" >

            <div class="um-live-live-list-hd">
                <h2 class="um-live-live-list-hd_label">课堂直播</h2>
                <a class="um-live-live-list-hd_more" href="">
                    <span style="padding-right: 50px;color: green;">更多></span>

                </a>
            </div>
            <div class="um-live-live-list-ct">
                <!--Regular list-->
                <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="//edu-image.nosdn.127.net/D41249B06AB92BC2CFF6C178131B7591.jpg?imageView&amp;quality=100&amp;thumbnail=80y80">
                    </div>
                    <div class="um-live-live-card-action z-remind">
                        <!--Regular if51-->
                        <span class="um-live-live-card-action_label">
            <!--inlcude-->今天 20:00
        </span>

                        <span class="um-live-live-card-action_btn " >开启提醒</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="//edu-image.nosdn.127.net/D7C81D4C0F1114598555FC5F8EF010F0.png?imageView&amp;quality=100&amp;thumbnail=80y80">
                    </div>
                    <div class="um-live-live-card-action z-remind">
                        <!--Regular if52-->
                        <span class="um-live-live-card-action_label">
            <!--inlcude-->今天 20:00
        </span>

                        <span class="um-live-live-card-action_btn ">开启提醒</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="//edu-image.nosdn.127.net/9D267391C6456C2FFDACCEA7E3014EC1.jpg?imageView&amp;quality=100&amp;thumbnail=80y80">
                    </div>
                    <div class="um-live-live-card-action z-remind">
                        <!--Regular if53-->
                        <span class="um-live-live-card-action_label">
            <!--inlcude-->今天 20:00
        </span>

                        <span class="um-live-live-card-action_btn ">开启提醒</span>
                    </div>
                    <div class="um-live-live-card-tit">助力求职同时兼具理财神技：用Python优化股票仓位</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="//edu-image.nosdn.127.net/A254AA8413F2E4F6F1B1DC0879E2A47A.jpg?imageView&amp;quality=100&amp;thumbnail=80y80">
                    </div>
                    <div class="um-live-live-card-action z-remind">
                        <!--Regular if54-->
                        <span class="um-live-live-card-action_label">
            <!--inlcude-->今天 20:00
        </span>

                        <span class="um-live-live-card-action_btn ">开启提醒</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="//edu-image.nosdn.127.net/5E524E150C174D0F8B7AA9A3B6600800.jpg?imageView&amp;quality=100&amp;thumbnail=80y80">
                    </div>
                    <div class="um-live-live-card-action z-remind">
                        <!--Regular if55-->
                        <span class="um-live-live-card-action_label">
            <!--inlcude-->今天 20:00
        </span>

                        <span class="um-live-live-card-action_btn " >开启提醒</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="//edu-image.nosdn.127.net/A7BE0FA600C809FC7E0D305B4A4DEBB9.jpg?imageView&amp;quality=100&amp;thumbnail=80y80">
                    </div>
                    <div class="um-live-live-card-action z-remind">
                        <!--Regular if56-->
                        <span class="um-live-live-card-action_label">
            <!--inlcude-->今天 20:00
        </span>

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

            </div>


        </div>
        <!--Regular if27--></div>
</div>
</body>
</html>

在这里插入图片描述

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮</title>
    <script type="text/javascript">
        // var  = nei;
        function test(){
            alert(document.getElementById("inp").value);
        }


    </script>
    <script src="jquery-3.4.1.min.js"></script>
</head>
<body>
<input id="inp" type="button" onclick="test()" value="点我点我">
</body>
</html>

在这里插入图片描述

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水仙花数</title>
    <script type="text/javascript">
        var s,a,b,c;
        for (var s = 100; s <1000 ; s++) {
            a=Math.floor(s/100);
            b=Math.floor((s/10)%10);
            c=Math.floor(s%10);
            if (Math.pow(a,3)+Math.pow(b,3)+Math.pow(c,3)==s){
                console.log(s);
            }
        }

    </script>
</head>
<body>
</body>
</html>

在这里插入图片描述

使用函数完成一个calculate函数，该函数接收x、c、y三个参数，x和y为数字，c为运算符范围为（+、-、*、/），要求函数返回x c y的结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        x=getElementsByTagName("x");
        c=getElementsByTagName("c");
        y=getElementsByTagName("y");
        function  jisuan(){
            if(c.value.toString()=="+"){
                alert(parseInt(x.value)+parseInt(y.value))
            }
            else if(c.value.toString()=="-"){
                alert(parseInt(x.value)-parseInt(y.value))
            }
            else  if(c.value.toString()=="*"){
                alert( parseInt(x.value)*parseInt(y.value))
            }
            else if(c.value.toString()=="/"){
                alert(parseInt(x.value)/parseInt(y.value))
            }
        }
    </script>
</head>
<body>
<div>
    x:<input type="text" id="x" style="width: 50px">
    算术符<input type="text" id="c"style="width: 50px">
    y:<input type="text" id="y"style="width: 50px">
    <button onclick="jisuan()">计算</button>
</div>
</body>
</html>

在这里插入图片描述

Monster X
关注
300道HTML、CSS习题及面试题（含答案）
01-14
该pdf适用于前端及javaEE页面设计方面的初学者，内容比较丰富，特此分享。
HTML练习题
05-07
这是我自己整理出来的HTML练习题，非常全面，里面有单选、多选、判断、填空、问答、编程题。
HTML习题集HTML习题集
12-29
一份好的试题集.一份好的试题集.一份好的试题集.一份好的试题集.一份好的试题集.一份好的试题集.一份好的试题集.一份好的试题集.一份好的试题集.一份好的试题集.一份好的试题集.一份好的试题集.一份好的试题集.一份好的试题集.
Html练习三
Andone_hsx的博客
01-04 612
Html表单练习
简单的HTML练习03
XiaoFanMi的博客
10-23 164
实现效果 通过创建表格嵌套表单实现 实现代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form> <table align="center" bgcolor="aqua"> <tr> <th bg
HTML操作练习题.doc编程资料
04-05
HTML操作练习题.doc
HTML_course.rar_html 练习题
09-14
本“HTML_course.rar_html 练习题”资源包含了一个完整的HTML学习课程，共分为七章，旨在帮助学习者深入理解和掌握HTML的基本概念、语法以及实际应用。通过这份资料，你可以系统地提升自己的HTML技能，并通过练习题...
html练习题
11-24
HTML 练习题知识点总结 本资源摘要信息涵盖了 HTML 基础知识点，涵盖了 HTML 文档的基本结构、标记符的使用、超链接、表单元素、列表、图片引入等方面的知识点。 一、HTML 文档基本结构 * 浏览器对 HTML 文档的...
HTML综合练习题一公开课.docx
12-18
HTML 综合练习题一公开课 本资源摘要信息涵盖了 HTML 综合练习题的一些知识点，包括 HTML 基础知识、表格和表单、超链接、图像、背景和样式等。 选择题 1. 在下列标记中，不是双标记的是（ ） Answer: C、 ...
html练习题1 9_综合案例_网站首页.html
abc
02-06 329
9_综合案例_网站首页.html。
HTML页面设计之导航条样式
11-19
HTML页面设计之导航条样式的一些导航条样式、代码供应
html练习题及答案,HTML和JavaScript综合练习题2014答案
weixin_39928768的博客
06-07 312
HTML和JavaScript综合练习题一、 单项选择1. Web使用( D )在服务器和客户端之间传输数据。A．FTP B. Telnet C. E-mail D. HTTP2. HTTP服务默认的端口号是( D )。A. 20 B. 21 C. 25 D. 803. HTML是一种标记语言，由( C )解释执行。A．Web服务器 B.操作系统C. Web浏览器 ...
HTML知识点总结（练习题）
kun的博客
11-11 1007
1、HTML文档的基本结构 2、status的三个常见状态的意思①200   ②304   ③404 3、&lt;meta/&gt;标签的三个常见属性 4、转义字符       ①&lt;     ②&gt;      ③空格     ④&amp; 5、HTML添加注释方法   css添加注释方法    JS添加注释方法 6、常见标签 ①文本加粗（两个），这两个标签的区别，推荐用哪个 ...
HTML和CSS面试题—整理过的48题，关注收藏，持续更新
王春燕的博客
04-15 6083
主流浏览器的内核分别是什么？ IE：trident内核[‘traidnt ] Firefox：gecko 内核[ˈɡekəʊ] Safari：webkit 内核 Chrome,Opera：Blink内核(基于webkit) 2:每个HTML文件开头都有<!DOCTYPE html>，它的作用是什么 <!DOCTYPE html>声明位于文档中的最前面的位置，此标签告知浏览器文档使用哪种HTML或XHTMl规范（重点：告诉浏览器按照何种规范解析页面） ......
html网页题,HTML及网页制作练习题-完整版
weixin_28630185的博客
06-19 1532
1、 在HTML中，()标记不可出现在和标记符之间。( C)(Ａ)(Ｂ)(Ｃ)(Ｄ)2、 属性中，rowspan定义的内容是( D)(A)单元格所跨的列数(B)行的宽度(C)列的高度(D)单元格所跨的行数3、 在HTML中，正确的嵌套方式是(B)。(Ａ)(Ｂ)(Ｃ)(Ｄ)4、 最大的标题是:(D )(A) (B) (C) (D) 5、 HTML样式格式文件的后缀名是： (C )(A) .asp(B...
HTML面试题：40道含答案和代码示例的练习题
最新发布
三拾的博客
05-12 1496
HTML表单验证是指使用HTML属性和JavaScript函数来验证表单输入的技术。语义化HTML是指在HTML代码中使用适当的标签和属性来描述内容的含义和结构。HTML注释是指在HTML代码中添加的注释，它们不会显示在浏览器中。HTML脚本是指在HTML代码中添加的JavaScript代码。HTML元素是指由开始标签、结束标签和它们之间的内容组成的结构。HTML分组元素是指用于将HTML元素分组的标签。HTML属性是指用于定义HTML元素的附加信息。HTML标题是指用于定义HTML文档标题的标签。
第一章 HTML基础 ② 代码练习
Liu_wen_wen的博客
06-06 2255
HTML基础 多种标签的代码
第1章 补充案例（HTML练习题）
Ice Point.
02-03 4733
一、案例描述 1、 考核知识点 HTML5文档基本格式 2、 练习目标  初步了解HTML5文档基本格式。  能够运用HTML5文档基本格式制作简单的页面。 3、 需求分析 学习任何一门语言，都要首先掌握它的基本格式，HTML5标记语言也不例外。要想制作丰富多彩的HTML5网页，首先需要掌握HTML5文档的基本格式。本案例通过编写一个简单的HTML5网页，使初学者更好地理解HTML5文档的基本格式。 4、 案例分析 效果如图1-1所示。 具体实现步骤如下： a) 新建Dreamweaver默认文档。
简要的HTML学习手册
qq_40956245的博客
05-15 433
HTML一直在用，但是没有系统的学过。跟着菜鸟教程学了学还挺容易的 第一步：认识 格式：<标签>内容</标签> （标签就是用不同功能的名字） 推荐全小写（其实不区分大小写） 内联元素—显示时通常不会以新行开始：inline 块级元素—通常会以新行来开始和结束：block 第二步：框架 声明 <!DOCTYPE html> 根元素 <html> 头部 <head> 标题 <title>x
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值