wab前端------HTML

最新推荐文章于 2024-07-11 17:17:41 发布
最新推荐文章于 2024-07-11 17:17:41 发布
阅读量211 收藏
点赞数 2
文章标签： 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ningwangh/article/details/136766291
版权

作业一：用户注册页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
</head>
<body>
 <form name="form1" method="post" action="">
        <table width="300" border="0" cellspacing="1" cellpadding="2">
            <tr height="30">
                <td colspan="2" align="center" bgcolor="#CCCCCC">用户注册</td>
            </tr>
            <tr height="30">
                <td width="91" align="right" bgcolor="#E6E6E6">用户名</td>
                <td width="198" bgcolor="#E6E6E6">
                    <input name="UserName" type="text" maxlength="20" size="15">
                </td>
            </tr>
            <tr height="30">
                <td align="right" bgcolor="#E6E6E6">密码</td>
                <td bgcolor="#E6E6E6">
                    <input name="UserPass" type="text" size="15" maxlength="20">
                </td>
            </tr>
            <tr height="30">
                <td align="right" bgcolor="#E6E6E6">性别</td>
                <td bgcolor="#E6E6E6">
                    <input name="sex" type="radio" value="男" checked> 男
                    <input type="radio" name="sex" value="女"> 女
                </td>
            </tr>
            <tr height="30">
                <td align="right" bgcolor="#E6E6E6">爱好</td>
                <td bgcolor="#E6E6E6">
                    <input name="like" type="checkbox" value="checkbox"> 写作
                    <input name="like" type="checkbox" value="checkbox"> 听音乐
                    <input name="like" type="checkbox" value="checkbox"> 体育
                </td>
            </tr>
            <tr height="30">
                <td align="right" bgcolor="#E6E6E6">省份</td>
                <td bgcolor="#E6E6E6">
                    <select name="province">
                        <option value="shaanxi" selected>陕西省</option>
                        <option value="shanxi">山西</option>
                    </select>
                </td>
            </tr>
            <tr height="30">
                <td align="right" bgcolor="#E6E6E6">自我介绍</td>
                <td bgcolor="#E6E6E6">
                    <textarea name="Intro" cols="25" rows="5" id="Intro"></textarea>
                </td>
            </tr>
            <tr height="30">
                <td colspan="2" align="center" bgcolor="#CCCCCC">
                    <input type="submit" name="send" value="提交">
                    <input type="reset" name="reset" value="重置">
                </td>
            </tr>
        </table>
    </form>

</body>
</html>

 

作业二：电子汇款单页面

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <h1><b>工商银行电子汇款单</b></h1>
    <table border="1" cellspacing="0">
        <tr>
            <td colspan="2"><b>回单类型</b></td>
            <td >网上转账汇款</td>
            <td colspan="2"><b>指令序号</b></td>
            <td >HQH000000000000013878172</td>    
        </tr>
        <tr>
            <td rowspan="3">收<br>款<br>人</td>
            <td>户名</td>
            <td>路瑞杰</td>
            <td rowspan="3">付<br>款<br>人</td>
            <td>户名</td>
            <td>冯磊</td>
        </tr>
        <tr>
            <td><b>卡号</b></td>
            <td>000000000001</td>
            <td><b>卡号</b></td>
            <td>00000000000002</td>
        </tr>
        <tr>
            <td>地区</td>
            <td>南京</td>
            <td>地区</td>
            <td>杭州</td>
        </tr>
        <tr>
            <td colspan="2"><b>币种</b></td>
            <td>人民币</td>
            <td colspan="2"><b>钞汇标志</b></td>
            <td>钞票</td>
        </tr>
        <tr>
            <td colspan="2"><b>金额</b></td>
            <td>1.00元</td>
            <td colspan="2"><b>手续费</b></td>
            <td>0.57元</td>
        </tr>
        <tr>
            <td colspan="2"><B>合计</B></td>
            <td colspan="4">人民币（大写）：壹圆整</td>
        </tr>
        <tr>
            <td colspan="2"><b>交易时间</b></td>
            <td><i>2017年6月1日</i></td>
            <td colspan="2"><b>时间线</b></td>
            <td><i>2017-06-01-13.00,00000</i></td>
        </tr>
    </table>
        票据打印时间：2017-06-01 15:00:12<br>
        <del>票据打印单位：江苏徐州业务中心</del>
        <div>操作员：大曾</div>
    </body>
</html>


作业三：古诗词页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>李白诗词</title>
    <style>
    #tu {
        width: 500px;
        height: 500px;
    }
    </style>
</head>
<body>
    <h1>将进酒 <small>君不见黄河之水天上来</small></h1>
    <table>
        <tr>
            <td>
                <img id="tu" src="/wab/课堂练习/img/img.png"/>
            </td>
            <td>
                <p>君不见黄河之水天上来，奔流到海不复回。</p>
                <p>君不见高堂明镜悲白发，朝如青丝暮成雪。</p>
                <p>人生得意须尽欢，莫使金樽空对月。</p>
                <p>天生我材必有用，千金散尽还复来。</p>
                <p>烹羊宰牛且为乐，会须一饮三百杯。</p>
                <p>岑夫子，丹丘生，将进酒，杯莫停。</p>
                <p>与君歌一曲，请君为我侧耳听。</p>
                <p>钟鼓馔玉不足贵，但愿长醉不复醒。</p>
                <p>古来圣贤皆寂寞，惟有饮者留其名。</p>
                <p>陈王昔时宴平乐，斗酒十千恣欢谑。</p>
                <p>主人何为言少钱，径须沽取对君酌。</p>
                <p>五花马，千金裘，</p>
                <p>呼儿将出换美酒，与尔同销万古愁。</p>
            </td>
        </tr>
    </table>
</body>
</html>


作业四：原神角色页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>角色介绍</title>
</head>
<body>
    <h2>游戏热门角色</h2>
    <hr/>
    <table width="800">
        <tr>
            <td><b>最近热门角色</b></td>
            <td>热门</td>
            <td>最新</td>
            <td>最受欢迎</td>
            <td>深渊使用率最高</td>
            <td>蒙德</td>
            <td>璃月</td>
            <td>稻妻</td>
            <td>枫丹</td>
            <td width="100"></td>
            <td>更多&gt;&gt;</td>
        </tr>
    </table>
    <hr>
    <table>
        <tr>
            <td><img width="250" height="500" src="/wab/课堂练习/img/img_1.png"></td>
            <td><img width="250" height="500" src="/wab/课堂练习/img/img_2.png"></td>
            <td><img width="250" height="500" src="/wab/课堂练习/img/img_3.png"></td>
            <td><img width="250" height="500" src="/wab/课堂练习/img/img_4.png"></td>
        </tr>
        <tr>
            <td><p>纳维莱特</p></td>
            <td>芙宁娜</td>
            <td>雷神</td>
            <td> 八重神子</td>
        </tr>
        <tr>
            <td><img width="250" height="500" src="/wab/课堂练习/img/img_5.png"></td>
            <td><img width="250" height="500" src="/wab/课堂练习/img/img_6.png"></td>
            <td><img width="250" height="500" src="/wab/课堂练习/img/img_7.png"></td>
            <td><img width="250" height="500" src="/wab/课堂练习/img/img_8.png"></td>
        </tr>
        <tr>
            <td><p>神里凌华</p></td>
            <td><p>宵宫</p></td>
            <td><p>心海</p></td>
            <td><p>万叶</p></td>
        </tr>
    </table>
</body>
</html>

ningwangh
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
web前端设计--二级菜单栏
qq_59795720的博客
05-21 1005
代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g
WEB练习-留言板
weixin_52793965的博客
07-29 709
WEB小练习留言板 留言板
wab页面调用百度地图APP导航，IOS10不兼容问题解决方式
ZHIYUANfL的博客
06-16 2671
wab页面调用百度地图APP的时候，发现一个问题，就是安卓手机正常调起，但IOS10不兼容 解决方法是放弃html5浏览器获取经纬度，创建一个百度地图的地理定位对象，来获取百度地图中的经纬度。 #app{overflow: hidden;position:absolute;top:0rem;left:0rem;z-index:99999;width:7.5rem;display: none
Web页面性能优化
上下求索
06-03 283
Web页面性能优化 2009年4月3日 阅读评论 发表评论 Yahoo! 的 Exceptional Performance 团队为 Web 页面性能优化带来最佳实践，旨在提高网站性能。Excetional Performance 团队总结出了一系列可以提高网站速度的方法，可以分为 7 大类 34 条。包括内容、服务器、Cookie、CSS、JavaScript、图片、移...
web前端---列表
weixin_44773989的博客
09-18 147
<title>第二个网页【列表】</title> </head> <body> <h3>列表</h3> <!--type符号的类型，start起始位置--> <ol type='A' start="3"> <li>不</li> <li>要</li> <li>吃</li> <li>嘿嘿&l...
JAVA WAB--制作用户输入表单
m0_51984816的博客
09-14 226
input type=“text” name=“username” value=“”/ > 固定格式。
前端-鼠标经过后图标变色
Shine_QianMo的博客
05-01 4842
这是两个小图标： 鼠标经过后发现变了颜色： 本来以为是一个普通的鼠标经过事件然后进行变换背景颜色，然后我发现我太天真了，他居然是一张图片！！！ 然后我就研究了相关知识： 首先我们要有图标的图片，当然网上也有，也可以自己做。这里我自己准备了一张16*32像素的图标：（此图标我也上传了需要的话直接下载吧） 这里一定要注意背景是透明的而不是纯白！ html语句： <body> &l...
web-简易计时器
m0_58813405的博客
01-02 1909
实验
Web API编程-优质好文
weixin_52479803的博客
02-02 456
Web API编程-优质好文
cs-wab-widgets
03-12
2. HTML和CSS：HTML负责网页内容结构，CSS则负责样式和布局，它们与JavaScript一起构成前端开发的三大核心技术。 3. ArcGIS Web AppBuilder：了解其工作原理、小部件系统以及如何通过其开发接口（API）进行扩展是...
WAB abstract windowing toolkit-开源
05-15
**WAB Abstract Windowing Toolkit（WABawt）** 是一个专门为Java开发的开源库，设计用于在servlet环境中提供窗口和控件的功能。它的核心理念是不在服务器端实际渲染图形用户界面，而是生成HTML输出，这些输出在...
前端开发项目：秒杀活动
09-13
课程类源代码
residents:样本居民wab页面的沙箱
03-10
标题中的“residents:样本居民wab页面的沙箱”表明这是一个关于网页开发的项目，具体是为滨海居民设计的门户网站的一个实验或测试环境，通常称为“沙箱”（Sandbox）。沙箱允许开发者在安全的环境中测试和调试代码，...
wab49yalamarthi
03-26
标题中的“wab49yalamarthi”可能是一个项目或代码库...这个项目涉及了服务器端开发、前端模板引擎的使用、Web应用的部署以及可能的持续集成实践。通过学习和理解这些知识点，开发者能够构建出高效、可扩展的Web服务。
如何搭建互联网医院系统源码？医疗陪诊APP开发实战详解
最新发布
meihusdk的博客
07-11 231
希望本文能够为正在或即将从事相关开发的技术人员提供一些参考和帮助。通过不断的努力和创新，我们可以为患者提供更优质的医疗服务，推动医疗行业的数字化转型。
Node多版本管理器NVM安装使用
GongWeiBuQi的博客
07-11 191
安装node很方便，只需要一条命令可以轻松切换node版本可以多版本node并存。
Javafx利用fxml变换场景的小细节
2301_80311013的博客
07-09 880
在这个代码中，在JavaFX中，FXMLLoader是用来加载FXML文件并将其转换为Java对象（例如控制器类）的工具。当您使用FXMLLoaderFXMLLoader在整个过程中，FXMLLoader是使用JavaFX的后台线程（也称为JavaFX线程）来执行这些操作的，这是为了保持UI线程的响应性。这意味着在用户界面（UI）线程中，您不会看到任何阻塞，即使FXMLLoader正在执行耗时的操作。当FXMLLoader完成加载并调用load()方法时，它会返回一个Parent。
vue实现预览编辑ppt、word、pdf、excel、等功能的解决方案（内网-前端）
m0_68271787的博客
07-10 776
在Vue中实现预览和编辑PPT、Word、PDF、Excel等文件的功能，尤其是在内网环境下且主要侧重于前端，我们需要明确的是，直接在前端编辑这些格式的文件（特别是PPT和Word）是非常复杂且通常不推荐的，因为这些格式涉及复杂的布局和格式设置。然而，我们可以实现预览功能，并可能通过一些间接方式支持简单的编辑（如表格数据的修改）。下面我将分别给出预览PPT、Word、PDF、Excel文件的Vue组件示例代码，并简要说明如何可能实现简单的编辑功能。
Wab前端开发轮播图
05-25
实现轮播图可以使用第三方库，比如Swiper、Slick等，也可以自己手动编写实现。以下是一份简单的自己手写轮播图的代码： HTML部分： ```html <div class="slider"> <ul class="slider-container"> <li class="slider-item"><img src="image1.jpg"></li> <li class="slider-item"><img src="image2.jpg"></li> <li class="slider-item"><img src="image3.jpg"></li> </ul> <ul class="slider-nav"> <li class="slider-nav-item active"></li> <li class="slider-nav-item"></li> <li class="slider-nav-item"></li> </ul> </div> ``` CSS部分： ```css .slider { position: relative; width: 600px; height: 300px; overflow: hidden; } .slider-container { position: relative; width: 1800px; height: 300px; margin: 0; padding: 0; list-style: none; } .slider-item { float: left; width: 600px; height: 300px; } .slider-nav { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); margin: 0; padding: 0; list-style: none; z-index: 10; } .slider-nav-item { display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background-color: #ccc; } .slider-nav-item.active { background-color: #333; } ``` JavaScript部分： ```javascript var slider = document.querySelector('.slider'); var sliderContainer = slider.querySelector('.slider-container'); var sliderItems = slider.querySelectorAll('.slider-item'); var sliderNav = slider.querySelector('.slider-nav'); var sliderNavItems = sliderNav.querySelectorAll('.slider-nav-item'); var currentIndex = 0; var intervalId; function initSlider() { // 设置轮播图容器的宽度 sliderContainer.style.width = sliderItems.length * 100 + '%'; // 设置轮播图每一个item的宽度 for (var i = 0; i < sliderItems.length; i++) { sliderItems[i].style.width = 100 / sliderItems.length + '%'; } // 绑定导航点的click事件 for (var i = 0; i < sliderNavItems.length; i++) { sliderNavItems[i].addEventListener('click', onNavItemClick); } // 开始自动轮播 startAutoPlay(); } function onNavItemClick(event) { var navItem = event.currentTarget; var index = Array.prototype.indexOf.call(sliderNavItems, navItem); currentIndex = index; updateSlider(); } function startAutoPlay() { intervalId = setInterval(function() { currentIndex = (currentIndex + 1) % sliderItems.length; updateSlider(); }, 3000); } function stopAutoPlay() { clearInterval(intervalId); } function updateSlider() { sliderContainer.style.transform = 'translateX(-' + currentIndex * 100 / sliderItems.length + '%)'; for (var i = 0; i < sliderNavItems.length; i++) { var navItem = sliderNavItems[i]; if (i === currentIndex) { navItem.classList.add('active'); } else { navItem.classList.remove('active'); } } } initSlider(); ``` 这份代码实现了基本的轮播功能，并且提供了导航点（小圆点）供用户手动切换图片。你可以根据自己的需要进行修改和优化。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值