web应用开发实战day8

最新推荐文章于 2022-09-08 01:39:57 发布
最新推荐文章于 2022-09-08 01:39:57 发布
阅读量214 收藏
点赞数
分类专栏： web应用开发实战作业 文章标签： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/small_qianzai/article/details/100761398
版权

1.用BootStrap实现一个导航栏
在这里插入图片描述

<!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">
    <script src="jquery-3.4.1.min.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</head>
<body>
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">游戏攻略</a>
            </div>
            <div>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">PS4</a></li>
                    <li><a href="#">Xbox one</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            PC <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">steam</a></li>
                            <li><a href="#">EPIC</a></li>
                            <li><a href="#">Wegame</a></li>
                            <li class="divider"></li>
                            <li><a href="#">分离的链接</a></li>
                            <li class="divider"></li>
                            <li><a href="#">另一个分离的链接</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <form class="navbar-form navbar-right" role="search">
                <button type="submit" class="btn btn-default">
                    登录
                </button>
            </form>
            <p class="navbar-text navbar-right">账号：空</p>
        </div>
    </nav>
</body>
</html>

2.有道云
在这里插入图片描述


<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="jquery-3.4.1.min.js"></script>
</head>
<style>
    body {
        font-family: "Microsoft YaHei";
        color: #333;
    }
</style>
<body>
<div>
    <div class="container" style="margin-top: 50px">
        <div >
            
            <div class="row">
                <div class="col-md-4 row">
                    <div class="col-md-4">
                        <img  class="img-circle" src="//edu-image.nosdn.127.net/D41249B06AB92BC2CFF6C178131B7591.jpg?imageView&amp;quality=100&amp;thumbnail=80y80">
                    </div>
                    <div style="padding-top: 5px" class="col-md-8 col-md-pull-1">
                        <div style="font-size: 14px">
                            <span>
                                今天 20:00
                            </span>
                            <span style="margin-left: 5px;margin-right: 5px">
                               |
                            </span>
                            <span style="color: green">开启提醒</span>
                        </div>
                        <div style="margin-top: 8px">运营插画四部曲</div>
                        <div style="font-size: 12px;color: #666666;padding-top: 8px">艾琦aiki   </div>
                    </div>
                </div>
                <div class="col-md-4 row">
                    <div class="col-md-4">
                        <img  class="img-circle" src="//edu-image.nosdn.127.net/D7C81D4C0F1114598555FC5F8EF010F0.png?imageView&amp;quality=100&amp;thumbnail=80y80">
                    </div>
                    <div style="padding-top: 5px" class="col-md-8 col-md-pull-1">
                        <div style="font-size: 14px">
                            <span>
                                今天 20:00
                            </span>
                            <span style="margin-left: 5px;margin-right: 5px">
                               |
                            </span>
                            <span style="color: green">开启提醒</span>
                        </div>
                        <div style="margin-top: 8px">网易技术这些年，JAVA后端架构体系是怎么发展起来得！</div>
                        <div style="font-size: 12px;color: #666666;padding-top: 8px">王建安 网易特邀Java高级工程师 </div>
                    </div>
                </div>
                <div class="col-md-4 row">
                    <div class="col-md-4">
                        <img  class="img-circle" src="//edu-image.nosdn.127.net/9D267391C6456C2FFDACCEA7E3014EC1.jpg?imageView&amp;quality=100&amp;thumbnail=80y80">
                    </div>
                    <div style="padding-top: 5px" class="col-md-8 col-md-pull-1">
                        <div style="font-size: 14px">
                            <span>
                                今天 20:00
                            </span>
                            <span style="margin-left: 5px;margin-right: 5px">
                               |
                            </span>
                            <span style="color: green">开启提醒</span>
                        </div>
                        <div style="margin-top: 8px">助力求职同时兼具理财神技：用Python优化股票仓位</div>
                        <div style="font-size: 12px;color: #666666;padding-top: 8px">大鹏 网易金牌数据分析讲师   </div>
                    </div>
                </div>
            </div>
            <div class="row" style="margin-top: 15px">
                <div class="col-md-4 row">
                    <div class="col-md-4">
                        <img  class="img-circle" src="//edu-image.nosdn.127.net/A254AA8413F2E4F6F1B1DC0879E2A47A.jpg?imageView&amp;quality=100&amp;thumbnail=80y80">
                    </div>
                    <div style="padding-top: 5px" class="col-md-8 col-md-pull-1">
                        <div style="font-size: 14px">
                            <span>
                                今天 20:00
                            </span>
                            <span style="margin-left: 5px;margin-right: 5px">
                               |
                            </span>
                            <span style="color: green">开启提醒</span>
                        </div>
                        <div style="margin-top: 8px">应用打包优化之被遗忘的精髓</div>
                        <div style="font-size: 12px;color: #666666;padding-top: 8px">彭锡 网易网易特邀安卓高级工程师</div>
                    </div>
                </div>
                <div class="col-md-4 row">
                    <div class="col-md-4">
                        <img  class="img-circle" src="//edu-image.nosdn.127.net/5E524E150C174D0F8B7AA9A3B6600800.jpg?imageView&amp;quality=100&amp;thumbnail=80y80">
                    </div>
                    <div style="padding-top: 5px" class="col-md-8 col-md-pull-1">
                        <div style="font-size: 14px">
                            <span>
                                今天 20:00
                            </span>
                            <span style="margin-left: 5px;margin-right: 5px">
                               |
                            </span>
                            <span style="color: green">开启提醒</span>
                        </div>
                        <div style="margin-top: 8px">从源码探究构建工具之手动实现webpack</div>
                        <div style="font-size: 12px;color: #666666;padding-top: 8px">谭金龙 网易特邀前端高级工程师</div>
                    </div>
                </div>
                <div class="col-md-4 row">
                    <div class="col-md-4">
                        <img  class="img-circle" src="//edu-image.nosdn.127.net/A7BE0FA600C809FC7E0D305B4A4DEBB9.jpg?imageView&amp;quality=100&amp;thumbnail=80y80">
                    </div>
                    <div style="padding-top: 5px" class="col-md-8 col-md-pull-1">
                        <div style="font-size: 14px">
                            <span>
                                今天 20:00
                            </span>
                            <span style="margin-left: 5px;margin-right: 5px">
                               |
                            </span>
                            <span style="color: green">开启提醒</span>
                        </div>
                        <div style="margin-top: 8px">Python极速入门：教你做电影实时票房爬虫网站</div>
                        <div style="font-size: 12px;color: #666666;padding-top: 8px">毕滢 网易AI专家讲师</div>
                    </div>
                </div>
            </div>
        </div>
        <!--Regular if27--></div>
</div>
</body>
</html>

js1.页面中有一个按钮要求，能实现点击这个按钮弹出显示按钮中的值。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="提示" onclick="tishi()" id="anniu" >
<script>
    function tishi() {
        var button = (anniu.value)
        alert(button)
    }
</script>
</body>
</html>

js2.使用js打印出1000以内的水仙花数
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //var nam,a,b,c;
    //for (nam=100; nam<1000;nam++) {
     //  a=Math.floor(num/100);
     //   b=Math.floor((num/10)%10);
      //  c=Math.floor(num%10);
      //  if (Math.pow(a,3)+Math.pow(b,3)+Math.pow(c,3)==num){
      //      document.write(num+'<br>');
     //   }

    //}

    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>

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

孤星谦仔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web应用开发实战练习
small_qianzai的博客
09-10 881
1.什么是BootStrap框架 Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的前端框架，之所以它能够帮我们快速构建一个前端应用是因为它实现了很多默认的网页样式效果，我们只需要引用它实现的效果即可获得一个漂亮的网页。 2.Html、Css和BootStrap框架的关系是什么 css对我们的html标签...
java web开发实战经典_java web 开发实战经典（一）
weixin_28819153的博客
02-12 285
一、jsp三种Scriptlet(脚本小程序)1、 :定义局部变量、编写语句等。out.println(str);//编写语句%>2、 :定义全局变量、方法和类。(虽然此方可以编写类，但不建议使用。我们一般通过JavaBean的形式调用类)public static final String INFO = "JAVA Web";//定义全局变量%>public int add(in...
web应用开发实战作业百度实战
small_qianzai的博客
09-05 433
HTML代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>百度一下，你就知道</title> <link rel="stylesheet" type="text/css" href="css/index.css"/> ...
Web应用开发实战-JavaScript
m0_62800996的博客
09-03 264
Web应用开发实战-JavaScript
day07
weixin_42026679的博客
09-11 112
html作业 1.用BootStrap实现一个导航栏 运行截图： 源代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航栏</title> <link rel="stylesheet" href=...
web-day4.rar
03-30
3. 实战项目：学员可以动手操作的Web应用项目，用于巩固理论知识。 4. 数据库脚本：SQL文件，可能包含数据库结构和初始数据，用于搭建测试环境。 5. 解决方案或解答：针对课堂练习或作业的参考答案。 6. 课件：PPT或...
模块六-django实战开发
最新发布
11-07
在本模块"模块六-django实战开发"中，我们将深入探讨使用Django框架进行实际Web应用的构建。Django是一个高效、强大且易用的Python Web框架，它为开发者提供了丰富的功能，包括模板引擎、数据库交互、用户认证、URL...
Spring 3.x企业应用开发实战第17章
12-19
在《Spring 3.x企业应用开发实战》的第17章中，我们深入探讨了Spring框架在企业级应用中的实际运用。本章主要涵盖了以下几个关键知识点： 1. **AOP（面向切面编程）**：Spring 3.x支持AOP，这是一种强大的设计模式...
day24_Django项目实战歌曲搜索.zip
09-07
这个实战项目旨在帮助开发者掌握Django的核心特性和实际应用，同时提升Web开发技能。我们将涵盖以下几个关键知识点： 1. Django框架基础： Django是一个高级的Python Web框架，它鼓励快速开发和简洁实用的设计。在...
Day9_13实战项目.rar
09-21
这个项目虽然不具有全面的代表性，但作为一个学习和参考的例子，它能够帮助开发者理解这三个核心技术如何协同工作，构建出一个实际的Web应用程序。 首先，Node.js是一个基于Chrome V8引擎的JavaScript运行环境。它...
JavaWeb应用开发框架实例
weixin_42098472的博客
06-12 1万+
一、 概述Web 应用架构可以划分为两大子系统：前端子系统和后台子系统。前端子系统：1. 基础技术： Html/Javascript/CSS / Flash2. 开发框架： jQuery, Extjs , Flex 等;后台子系统：1. 基础技术： Java Servlet;2. 开发框架： Struts, Spring, Hibernate, ibatis 等;3. 应用服务器： Tomcat ...
现代化 Web 应用开发实战
架构师小秘圈
01-07 298
作者 | 寒斜（阿里云云原生中间件前端负责人）“本篇实战将介绍如何以超低成本构建动态的 Web 站点，并且实现灵活扩展，限流等效果，最后再跟大家聊一聊“现代应用”的相关概念。”相信很多同...
web应用开发实战(1)
m0_65436732的博客
09-08 2180
随着互联网技术的快速发展，Web 前端开发逐渐成为各种软件开发的基础，除了原来的网站开发，后来的移动应用开发、混合开发以及小程序开发等，都可以通过 Web 前端开发再配相关技术加以实现。提示：以下是本篇文章正文内容，下面案例可供参考三、Vue.js与MVVM模式（重点）Vue官网：Vue.js - 渐进式 JavaScript 框架 | Vue.jsVue.js - 渐进式的 JavaScript 框架1.Vue.js图形化应用程序。
Django Web 应用开发实战（一）
adsdaxsa的博客
05-07 2236
一、Django框架的原理 总结：由url(俗称网址)发出请求，根据urls.py中的urlpatterns列表访问，找到view.py中对应的函数，然后拿到models中的数据并处理，最后返回到templates中对应的html上。 二、环境配置 为了能让项目找到对应的东西，不管是功能，还是资源文件，都需要让程序通过配置文件settings进行调用 1、功能的配置 #设置功能列表 INSTAL...
web开发与应用（一）
huangsuirui的博客
08-30 794
web应用与开发
前端学习分为几个阶段，你属于哪个阶段？
qq_36272264的博客
09-14 5537
第一阶段：HTML+CSS: 感兴趣的可以加入前端自学交流群：1145459155 HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScript基础：Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。 JS基本特效：常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。 JS高级特征：正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运
web添加删除作业代码
热门推荐
small_qianzai的博客
09-26 2万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { } #b1 { b...
Vue删除
small_qianzai的博客
09-26 1910
1、完成人员列表的删除功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head&g...
PySpark_Day02：安装部署及应用开发.pdf
03-24
PySpark_Day02：安装部署及应用开发.pdf

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值