怎样做一个带有alert框的网页

最新推荐文章于 2024-01-15 16:00:26 发布
最新推荐文章于 2024-01-15 16:00:26 发布
阅读量982 收藏
点赞数 1
CC 4.0 BY-SA版权
文章标签： 网页 警示框
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43918437/article/details/85262851
这篇博客介绍如何制作一个包含alert对话框的网页，提供了HTML代码示例，并强调仅供业余爱好者参考，不得用于其他用途。内容包括网页标题设置、文字对齐问题的解决、图片插入、链接添加以及在页面底部添加JavaScript弹窗警告。

怎样做一个带有alert框的网页

声明：本文代码仅供业余爱好者参考，严禁用于其他用途

框架是我从别的地方借鉴过来的，整个界面，代码顺序和网页显示顺序相同，自上而下。

首先title定义的是：尝试自己写一个网页，读者可以自行定义

  <head>

    <title>

      尝试自己写一个网页

    </title>

  </head>

#接下来是网页的body部分，此处笔者也不知道是为什么，align已经定义了right，但是不知道为什么，文字还是靠左………………文字参数都可以自行定义

  <body>

<p align="right">

<font color="blue" size="2">

<p>这里一般都应该写点东西，但是不知道写什么，那就假装一下吧

</font>

</p>

#后来已经发现问题，语句错误，现在将正确的语句和截图贴在下方

 <body>

<div align="right">

<font color="blue" size="2">

<p>这里一般都应该写点东西，但是不知道写什么，那就假装一下吧

</font>

</p>

#此处的图片，读者可以自行加载图片，若将图片和html文件放在同一文件夹中，可书写相对路径，图片名称和格式正确即可

<img "网页端你讲看不到这句话因为这句话被图片覆盖了，但是图片也看不见，因为我使用的是绝对路径" src="111.png" height="100px;"width="100px;"/>

</div>

<div align="center">

</p>

<div align="center">

<font color="blue" size="5">

<p>请勿将此网页用于任何其他用途

</div>

此处加了几个链接，读者也可以自行定义文字和链接

<div align="center">

<font color="purple" size="4">

<p>常用购物网站：

<a href="http://jd.com">京东</a>

<a href="http://taobao.com">淘宝</a>

<a href="http://vip.com">唯品会</a>

<a href="http://kaola.com">网易考拉</a>

</font>

</div>

<div align="center">

<font color="blue" size="4">

<a href="https://blog.youkuaiyun.com/weixin_43918437">点击进入作者优快云</a>

</font>

</div>

<br/>

<div align="center">

<font color="blue" size="4">

<a href="https://blog.youkuaiyun.com/weixin_43898960">优快云友情链接</a>

</font>

</div>

<br/><br/><br/><br/><br/><br/>

<div align="center">

 <font color="blue" size="3">

<p>底下实在也不知道些什么了，那就写：原谅我这一生放纵不羁爱自由

 </font>

</div>

    <script type="text/javascript">

      alert("本网页代码仅供爱好者研究使用，请勿用于其他用途！！！");

    </script>

  </body>

</html>

完整界面如下所示：

蜂蜜柚子.
关注
自己实现的alert弹出框
12-12
自己辛苦实现的一个，类似于alert的弹出框。个人觉得比较方便实用。希望大家多多指教
一个alert网页小部件
ICode联盟
12-02 79
一个alert网页小部件，非常简单，样式也简单，可以自定义css。
html页面的简单对话框（alert, confirm, prompt）
Clement-Xu的专栏
07-05 1万+
html页面简单的三种对话框如下： 1、alert()，最简单的提示框： alert("你好！"); 2、confirm()，有确认和取消两个按钮： if(confirm("还有继续吗？")){ alert("继续"); }else{ alert("再见"); } 3、prompt()，可以输入信息： var name = prompt("
修改网页的alert弹框样式让你的页面更美观（js封装之路（1.1））
szl199107101035的博客
09-01 1万+
由于页面中原来的alert弹框样式相当的丑，所以就想到了自己去设置一下alert的弹框样式 首先是自己先设计好一个弹框的样式可以如下图： 样式搭建完成就可以用js来编写一个alert函数了： js部分如下：function alert(e){ //此处将html中的div等元素拼接起来，添加到body中 var html=""; html+=""; html
用于做Alert对象处理的网站
u010481688的博客
11-23 152
地址：http://sahitest.com/demo/index.htm
前端特效-alert框自动关闭.rar
11-08
在前端开发中，"alert框自动关闭"是一个常见的交互效果，尤其在用户操作或系统提示时，为了提供更好的用户体验，开发者常常希望alert对话框能在一定时间后自动消失，而不是一直等待用户手动点击“确定”按钮。...
SweetAlert 提示框 带6种demo
12-21
- **SweetAlert** 是一个独立的JavaScript库，用于创建高度定制的提示框。它允许开发者在用户界面上添加各种类型的警告或提示信息，如警告消息、成功提示、错误信息、询问对话框等。 - **轻量级**：SweetAlert的...
PHP 实现类似js中alert() 提示框
10-24
JavaScript中的alert()函数用于弹出一个带有指定消息和一个OK按钮的警告框，通常用于显示简短的提示信息。在PHP中没有直接等同的函数，但是可以通过输出JavaScript代码来实现类似的效果。 3. 创建自定义PHP函数： ...
bootstrap-alert:一个不错的引导程序样式警报和确认框。 覆盖默认的 JS 警报和确认框
07-02
Bootstrap Alert 是一个基于...总的来说，Bootstrap Alert 是一个强大且灵活的工具，能极大地提升你的网页应用中的提示信息的视觉效果和用户体验。无论是在简单的信息展示还是复杂的交互逻辑中，它都能发挥重要作用。
简易的alert提示框
12-01
首先，`alert()`函数是JavaScript语言中的一个内建方法，它会在浏览器中弹出一个带有指定消息的对话框。这个对话框通常包含一个“确定”按钮，用户必须点击后才能继续浏览网页。例如，要弹出一个简单的“你好，世界...
html自定义alert提示框
06-13
有时候感觉系统自带的提示框太丑了，试试自定义提示框吧，直接引用js即可
写了个简单的摸拟alert\提示框,有需要可以拿去用．
iteye_13670的博客
05-13 210
写了个简单的摸拟alert\提示框，欢迎大家使用． 源码下载：https://github.com/tomlxq/jquery-confirm 效果图： This is a demonstration. include fancybox css/js, please take care! Example: $(document).ready(function()...
web页面-alert弹框切换
没有一劳永逸，永远要重新开始，重新进入动荡，重新寻找，重新赢得欢喜。
03-10 1409
一、前言 直接用原生的alert，prompt弹框，样式很丑，现在用的越来越少了，都是直接用框架vue.js实现UI效果，弹框就是普通的元素了，比如alert（element-dialog）弹框都是直接用普通元素了。下面代码是一种原生的alert弹窗方法 二、代码示例-alert弹框（原生的） from selenium import webdriver from selenium.webdriver.support import expected_conditions as EC from sel
alert 弹窗 显示网址的优化方案
优快云_WHS的专栏
10-27 4630
我们在网页设计中 或多或少会使用到alert弹窗，但是默认的alert弹窗上方会显示网页的地址，首先它不是很美观，再次就是暴露IP，针对这俩点，进行alert重写，代码如下： window.alert = function(name){ var iframe = document.createElement("IFRAME"); iframe.style.display="none"; /
网页测试遇到自动弹窗，Alert类无法处理？或许你该来学学这招了！
2301_81967703的博客
01-15 589
作为一位过来人也是希望大家少走一些弯路，如果你不想再体验一次学习时找不到资料，没人解答问题，坚持几天便放弃的感受的话，在这里我给大家分享一些自动化测试的学习资源，希望能给你前进的路上带来帮助。若需要按下其他键，可选中PyKeyboard后，按ctrl+b，查看 special_key_assignment函数下的属性的说明。其中：https://pypi.tuna.tsinghua.edu.cn/simple是清华大学的镜像文件地址。豆瓣：https://pypi.douban.com/simple/
jsp页面使用layui实现弹出层alert提示框
u014388322的专栏
12-26 2666
本人专注于Android/java/数据库/微信小程序技术领域的开发，以及有好几年的计算机毕业设计方面的实战开发经验和技术积累；尤其是在安卓（Android）的app的开发和微信小程序的开发，很是熟悉和了解；本人也是多年的Android开发人员；希望我发布的此篇文件可以帮助到您；🍅。
网页中嵌入外部页面的四种方法
热门推荐
wmyasw的专栏
09-28 2万+
一．应用框架技术 ---- 要在宿主页面中嵌入外部页面的方法是，在宿主页面中包含外部页面的位置插入“”语句即可(注意: 标签中的各种属性含义请查阅相关技术手册)。 ---- 如果想在嵌入的外部页面过长时不出现滚动条，在外部文件标签中加入“scroll=no”或者在宿主页
自动点击网页alert()弹出框
LightBoat09的专栏
05-14 1万+
用webBrowser控件程序里自动点击按钮提交后，很可能会弹出一个alert形式的对话框，窗口标题一般是"Windows Internet Explorer"，内容一般是操作成功或失败，窗体上还有确定或取消按钮，那接下来怎么自动点击“确定”按钮呢？关键是alert弹出框还会阻塞进程。不急！一步一步解决。 首先，找到窗口句柄，再找到“确定"按钮的控件句柄（好像没这种叫法，但定义形式和窗口句柄
c++浏览器自动化操作_Web自动化测试：获取浏览器弹窗alert、自定义弹窗以及其操作
weixin_39620151的博客
11-22 659
在测试中，有时候会遇到弹窗的问题，有的是浏览器弹窗(alert)、有的是自定义弹窗;这节我们主要来讨论一下关于浏览器弹窗和简单的自定义弹窗。一、关于alert弹窗的方法switch_to_alert(): 定位到alert弹窗，返回一个弹窗的对象dismiss(): 对弹窗对象的取消操作(相当于点击弹窗上的取消按钮)accept():对弹窗对象的确定操作(相当于点击弹窗上的确定按钮)text:对弹...
制作一个简单html网页带有JavaScript vivo主界面
最新发布
12-28
### 创建简易 Vivo 主屏风格 HTML 页面 为了构建一个类似于 Vivo 手机主屏幕的网页，可以采用 HTML 和 JavaScript 来模拟其外观和功能。下面是一个简化版的设计方案。 #### 1. 基础页面布局 (HTML) ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Vivo Home Screen</title> <style> body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f7f7f7; } .home-screen { display: flex; justify-content: center; align-items: center; height: 100vh; gap: 20px; flex-wrap: wrap; } .app-icon { width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); text-align: center; line-height: 64px; color: white; cursor: pointer; transition: transform 0.2s ease-in-out; } /* 添加更多样式以匹配Vivo主题 */ .app-icon:nth-child(odd) {background:#ff6b6b;} .app-icon:nth-child(even){background:#4a90e2;} @media only screen and (max-width: 600px){ .home-screen{ flex-direction: column; } } </style> </head> <body> <div class="home-screen" id="homeScreen"></div> <script src="./script.js"></script> </body> </html> ``` 此段代码设置了基础的 HTML 结构并引入了 CSS 样式来创建响应式的图标网格布局[^1]。 #### 2. 动态加载应用列表 (JavaScript) 接下来，在 `./script.js` 中编写如下 JS 逻辑： ```javascript document.addEventListener('DOMContentLoaded', function () { const apps = [ '相机', '相册', '设置', '浏览器', '音乐' ]; const homeScreenElement = document.getElementById('homeScreen'); apps.forEach((appName, index) => { let iconDiv = document.createElement('div'); iconDiv.className = "app-icon"; iconDiv.textContent = appName.charAt(0).toUpperCase(); iconDiv.title = appName; // 模拟点击打开应用程序的效果 iconDiv.onclick = () => alert(`您选择了 ${appName}`); homeScreenElement.appendChild(iconDiv); }); }); ``` 这段脚本实现了动态生成一系列代表不同应用程序的小部件，并赋予它们基本的行为——当用户单击某个图标时会弹出提示框告知所选的应用名称。 通过上述两部分代码组合起来就可以得到一个非常基础却直观地模仿了 Vivo 手机桌面样式的静态网站原型。当然实际产品还需要考虑更多的细节优化以及交互体验设计等问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值