web应用技术实践 w2d3

最新推荐文章于 2025-07-30 15:11:27 发布
原创 最新推荐文章于 2025-07-30 15:11:27 发布 · 244 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

1.用BootStrap实现一个导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏demo</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>
<div class="container">
    <nav class="navbar navbar-default"> <!--navbar-fixed-top-->
        <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="" 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>
</body>
</html>

在这里插入图片描述

2、完成该页面，取材自有道云课堂。

<!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="1.jpg" >
            </td>
            <td>
                今天20:00 <a href="#" style="color: green">丨开启提醒</a><br>
                运营插画四部曲 <br>
                <h6>艾琦aiki</h6>
            </td>
            <td>
                <img src="2.jpg" alt="">
            </td>
            <td>今天20:00 <a href="#"style="color: green">丨开启提醒</a><br>
                网易技术这些年，JAVA后端架构体系 <br>
                是怎么发展起来得！
                <h6>王建安 网易特邀Java高级工程师</h6>
            </td>
            <td>
                <img src="3.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="4.jpg" alt="">
                </td>
                <td>
                    今天20:00 <a href="#"style="color: green">丨开启提醒</a><br>
                    助力求职同时兼具理财神技：用Pytho <br>
                    n优化股票仓位
                    <h6>leo 网易特邀数据分析讲师</h6>
                </td>
                <td>
                    <img src="5.jpg" alt="">
                </td>
                <td>     今天20:00 <a href="#"style="color: green">丨开启提醒</a><br>
                    从源代码构建工具之手动实现webp <br>
                    ack
                    <h6>谭金龙 网易特邀前端高级工程师</h6>
                </td>
                <td>
                    <img src="6.jpg" alt="">
                </td>
                <td>     今天20:00 <a href="#"style="color: green">丨开启提醒</a><br>
                    Python极速入门：教你做电影实时票 <br>
                    房爬虫网址
                    <h6>毕滢 网易AI专家讲师</h6>
                </td>
            </tr>

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

在这里插入图片描述

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

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

在这里插入图片描述

4、使用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>

在这里插入图片描述

Impancy
关注
敏捷开发中的AI应用：智能辅助实践
软件工程实践的博客
07-06 679
想象你是一家蛋糕店的店长，顾客每天都会提出各种"定制需求"：“我想要一个草莓味的，但奶油要少糖”“能不能做成汽车形状，还要会发光”。你的团队需要快速响应这些变化，同时保证蛋糕质量和交付时间——这就是软件行业的"敏捷开发"日常。而AI，就像一位经验丰富的"蛋糕店顾问"，能帮你快速理解顾客含糊的需求、预测制作时间、甚至提前发现奶油可能会融化的风险。本文的目的，就是带你认识这位"AI顾问"在敏捷开发中的具体工作：它能做什么、怎么做、能解决哪些实际问题。
Web-拾贝
oscar999的专栏
03-10 1万+
JavaScript MVC框架PK：Angular、Backbone、CanJS与Emberhttp://www.youkuaiyun.com/article/2013-04-25/2815032-A-Comparison-of-Angular-Backbone-CanJS-and-Ember一个好的js method 方法查询的网站， 有browser兼容的介绍http://help.dottoro.co...
Web应用程序实践：数据库应用开发
bhbh520
10-15 1034
  Web应用程序实践：数据库应用开发 一、       创建Web项目和Web窗体1、创建Web项目——Northwind2、创建两个Web窗体——View.aspx和New.aspx3、设置Web应用程序时的起始页为View.aspx4、添加一个类——DataBase5、在Web窗体中添加控件并设置控件的属性
Web应用程序的最佳实践
zcn596785154的博客
10-03 512
原始文章：https://developer.android.com/guide/webapps/best-practices.html与开发典型桌面网络浏览器的网页相比，为移动设备开发网页和Web应用程序提出了一系列不同的挑战。 为了帮助您开始使用，以下是您应遵循的实践列表，以便为Android和其他移动设备提供最有效的网络应用程序。1.将移动设备重定向到您的网站的专用移动版本有几种方法可以将请求
web应用技术实践 w2d2
Impancy的博客
09-10 195
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>作业1</title> <link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.m...
Java Web应用实践
muzihao6的博客
03-14 1534
《JAVA WEB应用实践》 第一章 、JSP的认识 1、Tomcat7 的目录结构： 目录 说明 /bin 存放用于启动和停止Tomcat的脚本文件 /conf 存放Tomcat服务器的各种配置文件，最重要的是service.xml文件 /lib 存放Tomcat服务器需要的各种jar文件，驱动包 /logs 存放Tomcat的日志文件 /temp 存放Tomca...
Web services 安全实践
飞吧
10-06 228
Web services 安全实践，第 3 部分 创建自定义的 Policy Set 和 Bindings 为 Web services 配置消息层安全机制 柏 越, 吕 双涛, 和 黄 彦军 2011 年 8 月 11 日发布 系列内容： 此内容是该系列的一部分：Web services 安全实践 前言 从文章《第 2 部分：基于 WS-Security 和 Policy Set 为 Web services 配置消息层安全机制》的测试结果中不难看出，我们使用的 Policy Set 除了为
33、Web服务安全：WS-Trust、XKMS及相关协议解析
2a4s6d8f0g的博客
07-30 64
本文详细解析了Web服务安全中的多个关键协议和规范，包括WS-Trust、XKMS、WS-SecurityPolicy、WS-SecureConversation以及SSL协议。文章介绍了这些协议的核心功能和应用场景，探讨了它们在实际安全体系中的作用，并通过示例展示了其具体实现方式。最后总结了各协议之间的协同关系，为构建安全可靠的Web服务系统提供了理论支持和实践指导。
web
热门推荐
sunlionjun的博客
10-17 3万+
Bookmarks Bookmarks Bookmarks bar eclipse plugins Index of /jbosstools/updates/requirements/m2eclipse/20110728-1500 email track ...
【SpringMVC源码深度解析】：揭秘Web应用的流畅脉络
[【SpringMVC源码深度解析】：揭秘Web应用的流畅脉络](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b4ad9cfad80b4444a1248179d3e5fee6~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp?) # 摘要 本文...
从0到1：基于AI原生应用的语义检索系统开发指南
AI天才研究院
07-05 917
在信息爆炸的时代，传统关键词检索系统如同只会按笔画查字典的图书管理员，早已无法满足我们对精准信息获取的需求。想象一下，当你询问"如何提高团队创造力"时，系统能理解你并非寻找"创造力"这个词，而是真正理解你需要的是关于团队协作、头脑风暴方法和创新文化建设的综合信息。这就是语义检索的魔力所在。本指南将带领你从零开始，构建一个真正理解人类语言含义的AI原生语义检索系统。我们将穿越语义理解的迷雾，掌握向量嵌入的核心原理，探索向量数据库的内部机制，并最终实现一个功能完备的语义检索应用。
Feigong，针对各种情况自由变化的mysql注入脚本,In view of the different things freely change the mysql injection scrip
最新发布
12-17
下载前可以先看下教程 https://pan.quark.cn/s/90f2470d331b Feigong --非攻 rm... 最近有了新的体验...Feigong 2.0loading....
【空气质量预测】北京 36 站预处理数据 落地即用无套路！.zip
12-17
【空气质量预测】北京 36 站预处理数据 落地即用无套路！.zip
理光 MP7503 MP6503 MP9003 维修手册p
12-17
理光 MP7503 MP6503 MP9003 维修手册p
【电子测试设备】基于USB-TMC协议的SPD3000系列直流稳压电源固件升级方法：通过EasyPower软件实现.ugf文件更新操作指导
12-17
内容概要：本文介绍了鼎阳直流稳压电源SPD3000系列的固件升级方法，通过PC端管理软件EasyPower和USBTMC连接实现。升级过程包括：安装EasyPower软件并建立与电源设备的USB连接，在软件界面中选择“版本”菜单下的“升级”选项，进入固件升级对话框后选择扩展名为.ugf的固件文件，确认后点击“升级”按钮开始更新。升级过程中需等待进度条完成，结束后重启设备即可正常使用。文中配有操作界面图示，详细展示了各步骤的操作位置和流程。; 适合人群：电子工程师、技术支持人员及具备基本仪器操作经验的实验室技术人员；适用于需要维护或更新SPD3000系列电源设备固件的专业用户。; 使用场景及目标：①当设备功能异常或需要新增功能时进行固件升级；②配合最新版EasyPower软件确保设备兼容性和稳定性；③提升设备性能或修复已知问题。; 阅读建议：在执行升级前请确保正确安装驱动和软件，并使用官方提供的.ugf格式固件文件，避免升级失败。操作过程中保持设备供电稳定，切勿中断升级流程，以防设备损坏。
米游社每日米游币自动化脚本
12-17
源码地址： https://pan.quark.cn/s/d1f41682e390 miyoubiAuto 米游社每日米游币自动化Python脚本(务必使用Python3) 8更新：更换cookie的获取地址 注意：禁止在B站、贴吧、或各大论坛大肆传播！ 作者已退游，项目不维护了。 如果有能力的可以pr修复。 小引一波 推荐关注几个非常可爱有趣的女孩！ 欢迎B站搜索: @嘉然今天吃什么 @向晚大魔王 @乃琳Queen @贝拉kira 第三方库 食用方法 下载源码 在Global.py中设置米游社Cookie 运行myb.py 本地第一次运行时会自动生产一个文件储存cookie，请勿删除 当前仅支持单个账号！ 获取Cookie方法 浏览器无痕模式打开 http://user.mihoyo.com/ ，登录账号 按，打开，找到并点击 按刷新页面，按下图复制 Cookie： How to get mys cookie 当触发时，可尝试按关闭，然后再次刷新页面，最后复制 Cookie。 也可以使用另一种方法： 复制代码 浏览器无痕模式打开 http://user.mihoyo.com/ ，登录账号 按，打开，找到并点击 控制台粘贴代码并运行，获得类似的输出信息 部分即为所需复制的 Cookie，点击确定复制 部署方法--腾讯云函数版（推荐！ ） 下载项目源码和压缩包 进入项目文件夹打开命令行执行以下命令 xxxxxxx为通过上面方式或取得米游社cookie 一定要用双引号包裹!! 例如: png 复制返回内容(包括括号) 例如: QQ截图20210505031552.png 登录腾讯云函数官网 选择函数服务-新建-自定义创建 函数名称随意-地区随意-运行环境Python3....
《CentOS服务器环境搭建实战项目在毕业设计方面的应用-从零部署到高可用Web服务》.docx
12-17
内容概要：本文围绕《CentOS服务器环境搭建实战项目在毕业设计方面的应用——从零部署到高可用Web服务》，系统讲解了如何基于CentOS Stream 9搭建可复现、可答辩、可扩展的服务端原型，涵盖基础设施即代码（IaC）、安全配置（SELinux/Firewalld）、高性能Web架构（Nginx + uWSGI + Flask）、HTTPS加密（Let’s Encrypt）及监控体系（Prometheus + Grafana）等核心技术。通过Ansible自动化部署、Flask应用开发与Nginx反向代理配置，结合真实代码案例，帮助学生在4～6周内完成具备真实实验数据支撑的毕业设计。; 适合人群：计算机、软件工程、大数据、人工智能等专业的应届本科或研究生毕业生，具备Linux基础和基本编程能力者优先。; 使用场景及目标：①用于构建高并发博客、深度学习推理平台或边缘计算网关等毕业设计课题；②实现在论文中展示自动化部署、性能优化、安全加固和监控可视化等关键技术环节，提升答辩说服力与学术可信度；③支持HTTPS、缓存加速、服务监控等功能集成，满足“可复现、可扩展”的科研要求。; 阅读建议：建议结合文中提供的目录结构、Ansible脚本、Flask应用代码和Nginx模板进行动手实践，重点关注IaC思想与实验数据采集方法，并将关键配置截图和性能图表直接嵌入论文，增强论证真实性与技术深度。
EI复现基于元模型优化算法的主从博弈多虚拟电厂动态定价和能量管理(Matlab代码实现）
12-17
【EI复现】基于元模型优化算法的主从博弈多虚拟电厂动态定价和能量管理(Matlab代码实现）
【Scrapy 爬虫 + 多平台】实战 15 类网站爬取，落地即用无套路！.zip
12-17
【Scrapy 爬虫 + 多平台】实战 15 类网站爬取，落地即用无套路！.zip
W2g框架：构建Web应用的开源解决方案
W2g是一个开源的Web应用程序框架，它主要被设计来构建各种基于Web的应用程序，如在线数据库、Intranet门户网站以及CRM系统。在深入了解W2g框架的相关知识点之前，先明确几个关键概念是非常有帮助的。 ### 基于Web的...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值