web期末作业网页设计——JavaScript

目录

 一.作品简介

二.网页效果

首页

花语 

登录界面 

注册界面

三.网页代码

首页

登录界面

注册界面

视频界面


 一.作品简介

网站系统文件种类包含:html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件。

网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。

二.网页效果

首页

花语 

登录界面 

注册界面 

视频界面 

三.网页代码

首页

    <head><meta charset="utf-8" /><title>花遇(首页)</title><link rel="stylesheet" type="text/css" href="css/reset.css" /><link rel="stylesheet" type="text/css" href="css/index.css"/></head>
<div class="site-list"><ul class="clearfix"><li><a href="index1.html"><font color="coral"><b>首页</b></font></a></li><li><a href="dianying2.html">鲜花</a></li><li><a href="dianshij2.html">永生花</a></li><li><a href="#">在线订购</a></li><!-- tab下拉菜单 --><li class="qita"><a href="#">其他</a><ul class="dis"><li><a href="dianying2.html">礼品</a></li><li><a href="#">公仔</a></li><li><a href="#">绿植</a></li><li><a href="#">团购</a></li><li><a href="#">甄选</a></li></ul></li></ul></div>

轮播图

<div class="site-content"><div class="container"><div class="box"><ul id="imglist"><li><img src="img/index/hua1.png" alt=""></li><li><img src="img/index/hua2.png" alt=""></li><li><img src="img/index/hua3.png" alt=""></li><li><img src="img/index/hua4.png" alt=""></li><li><img src="img/index/hua5.png" alt=""></li></ul><ul id="btnlist"><li class="btn active"></li><li class="btn"></li><li class="btn"></li><li class="btn"></li><li class="btn"></li></ul></div><script src="js/lunb.js"></script></div></div>

tab菜单 

<div id="tab"><div id="tabNav"><p><strong>鲜花用途</strong></p><ul><li class="active">爱情</li><li>慰问</li><li>商务</li></ul></div><div id="main"><div class="item show"><!-- tab爱情模块 --><div class="main-zuixin"><div class="zuixin-left"><!-- 左图 --><img src="img/index/shengrihua.png" /></div><div class="zuixin-right"><!-- 右图 --><div class="zuixin-right1"><!-- 左列 --><div><img src="img/index/aiqing1.png" /></div><div><img src="img/index/aiqing2.png" /></div></div><div class="zuixin-right2"><!-- 右列 --><div><img src="img/index/aiqing3.png" /></div><div><img src="img/index/aiqing4.png" /></div></div></div></div></div>

右侧菜单栏

<div class="tableft"><div class="tableft-list"><h3>鲜花花材</h3></div><hr size="1" color="#A2A2A2"/><div class="tableft-list"><p><font face="微软雅黑" size="4"><i>1 </i></font></p><a href="#">玫瑰</a></div><div class="tableft-list"><p><font face="微软雅黑" size="4"><i>2 </i></font></p><a href="#">康乃馨</a></div><div class="tableft-list"><p><font face="微软雅黑" size="4"><i>3 </i></font></p><a href="#">郁金香</a></div><div class="tableft-list"><p><font face="微软雅黑" size="4"><i>4 </i></font></p><a href="#">马蹄莲</a></div><div class="tableft-list"><p><font face="微软雅黑" size="4"><i>5 </i></font></p><a href="#">向日葵</a></div>				</div>

底部栏

<div class="footer"><div class="container"><div class="footer-liebiao"><div class="guanyu"><table><tr class="neir"><td colspan="5"><h4>关于我们</h4></td></tr><tr><td><a href="#">关于我们</a></td><td><a href="#">联系我们</a></td><td><a href="#">在线反馈</a></td><td><a href="#">侵权投诉</a></td></tr></table></div><div class="xieyi"><table><tr class="neir"><td><h4>协议声明</h4></td></tr><tr><td><a href="#">用户协议</a></td><td><a href="#">隐私政策</a></td><td><a href="#">历史版本</a></td><td><a href="#">知识产权声明</a></td></tr></table></div></div>

登录界面

<div class="box"><div class="left"></div><div class="right"><h4>登 录</h4><form  action="#"><input class="acc" type="text" id="username" placeholder="用户名"/><input class="acc" type="password" id="pwd" placeholder="密码"/></form><from  action="#"><input class="submit" type="submit" id="log" value="登录"/></from><div class="down"><a href="zhuce.html">注册账号</a><a href="#">忘记密码?</a></div></div></div>

注册界面

<div class="box"><div class="left"></div><div class="right"><h4>用户注册</h4><form action=""><input class="acc" type="text" id="username" placeholder="用户名"/><input class="acc" type="tel" id="phone" placeholder="手机号"/><input class="acc" type="password" id="pwd" placeholder="密码"/><input class="acc" type="password" id="pwd2" placeholder="确认密码"/></form><form action=""><input class="submit" type="submit" id="log" value="注册"/></form></div></div>

视频界面

<head><meta charset="utf-8"><title>鲜花和浪漫</title><link rel="stylesheet" type="text/css" href="css/reset.css" /><link rel="stylesheet" type="text/css" href="css/Video.css" /></head><body><div class="beijing"><div class="header"><div class="container"><!-- logo --><div class="site-logo"><a href="#"></a></div><!-- 首页导航 --><div class="site-list"><ul class="clearfix"><li><a href="index1.html">首页</a></li><li><a href="dianying2.html"><font color="coral"><b>不止玫瑰有爱意</b></font></a></li></ul></div> <!-- 登入/注册 --><div class="login"><a href="dengru.html?"><img src="img/index/yonghu3.png"/></a></div><!-- 搜索框 --><div class="site-search"><form action=""><input class="search-text"   type="text" placeholder="请输入关键字"/><input class="submit" type="submit" value="搜索"/></form></div></div></div><div id="ship"><div class="container"><video width="1000px" controls="controls" poster="img/huahai.jpg""><source src="img/shiping.mp4" type="video/mp4"></source></video></div></div></div>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/371101.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

flutter开发实战-Charles抓包设置,dio网络代理

flutter开发实战-Charles抓包设置 在开发过程中抓包&#xff0c;可以看到请求参数等数据&#xff0c;方便分析问题。flutter上使用Charles抓包设置。dio需要设置网络代理。 一、dio设置网络代理 在调试模式下需要抓包调试&#xff0c;所以需要使用代理&#xff0c;并且仅用H…

EtherCAT转Profinet网关配置说明第三讲:博图配置

EtherCAT协议转Profinet协议网关模块&#xff08;XD-ECPNS20&#xff09;是实现EtherCAT协议和Profinet协议之间无缝通讯的重要设备。使EtherCAT协议和Profinet协议能够相互转换&#xff0c;进行工控自动化里的互连和传送数据。 EtherCAT作为一种高性能实时以太网通信协议&…

SSM中小学生信息管理系统 -计算机毕业设计源码02677

摘要 随着社会的发展和教育的进步&#xff0c;中小学生信息管理系统成为学校管理的重要工具。本论文旨在基于SSM框架&#xff0c;采用Java编程语言和MySQL数据库&#xff0c;设计和开发一套高效、可靠的中小学生信息管理系统。中小学生信息管理系统以学生为中心&#xff0c;通过…

非参数检测3——单输入检测系统

输入数据 各个变量之间相互独立&#xff0c;其概率分布函数为&#xff0c;均值和方差分别为 单输入系统&#xff1a;w由确定性信号s和零均,方差为σ02高斯白噪声n组成 单输入系统的H认为是简单的&#xff0c;K认为是复杂的&#xff0c;其概率分布函数分别为 其联合概率密度函数…

Java编程:解决实际问题的高效方法

&#x1f380;&#x1f380;引言 &#x1f44d;&#x1f44d;点关注编程梦想家&#xff08;大学生版&#xff09;-CSDN博客 不迷路❤❤ Java是一种广泛使用的编程语言&#xff0c;它不仅适用于企业级应用开发&#xff0c;还能高效解决各种实际问题。从数学问题到工程问题&…

深入探索Python库的奇妙世界:赋能编程的无限可能

在编程的浩瀚宇宙中&#xff0c;Python以其简洁的语法、强大的功能和广泛的应用领域&#xff0c;成为了众多开发者心中的璀璨明星。而Python之所以能够如此耀眼&#xff0c;很大程度上得益于其背后庞大的库生态系统。这些库&#xff0c;如同一块块精心雕琢的积木&#xff0c;让…

【MYSQL】事务隔离级别以及InnerDB底层实现

事务隔离级别 读未提交&#xff08;Read Uncommitted&#xff09; 允许事务读取其他事务未提交的数据&#xff0c;可能会导致脏读。 读已提交&#xff08;Read Committed&#xff09; 一个事务只能看见已经提交的事务所做的更改&#xff0c;可以避免脏读&#xff0c;但可能…

MIT6.s081 2021 Lab Traps

使用gdb调试xv6内核 从最近两个 Lab 开始&#xff0c;代码逻辑的复杂度明显上升&#xff0c;对内核进行调试可能是帮助理解操作系统机制的绝佳方法。因此在开始本 Lab 之前&#xff0c;我们先来配置一下针对 xv6 内核的 gdb 调试器。 安装 gdb-multiarch. 利用包管理工具进行…

接口测试工具Postman

Postman Postman介绍 开发API后&#xff0c;用于API测试的工具。在我们平时开发中&#xff0c;特别是需要与接口打交道时&#xff0c;无论是写接口还是用接口&#xff0c;拿到接口后肯定都得提前测试一下。在开发APP接口的过程中&#xff0c;一般接口写完之后&#xff0c;后端…

python基础篇(8):异常处理

在Python编程中&#xff0c;异常是程序运行时发生的错误&#xff0c;它会中断程序的正常执行流程。异常处理机制使得程序能够捕获这些错误&#xff0c;并进行适当的处理&#xff0c;从而避免程序崩溃。 1 错误类型 代码的错误一般会有语法错误和异常错误两种&#xff0c;语法错…

CAN总线(下)

位时序 为了灵活调整每个采样点的位置&#xff0c;使采样点对齐数据位中心附近&#xff0c;CAN总线对每一个数据位的时长进行了更细的划分&#xff0c; 分为同步段&#xff08;SS&#xff09;、传播时间段&#xff08;PTS&#xff09;、相位缓冲段1&#xff08;PBS1&#xff0…

Python实战训练(方程与拟合曲线)

1.方程 求e^x-派&#xff08;3.14&#xff09;的解 用二分法来求解&#xff0c;先简单算出解所在的区间&#xff0c;然后用迭代法求逼近解&#xff0c;一般不能得到精准的解&#xff0c;所以设置一个能满足自己进度的标准来判断解是否满足 这里打印出解x0是因为在递归过程中…

详解AT_dp_l Deque(区间动态规划)

题目 思路 考虑模拟博弈过程。 题目可以看成:先手希望X - Y最大&#xff0c;后手希望X - Y最小。 显然游戏过程中剩下的数必然是连续的一段。设 dp[i,j]​ 表示剩下下标为 [i,j] 的数时&#xff0c;先手&#xff08;并非当前的先手而是开始时的先手&#xff0c;下同&#xf…

Zabbix触发器

目录 触发器基础概念 创建和管理触发器 示例 定义一个触发器 在 Zabbix 中&#xff0c;触发器&#xff08;Trigger&#xff09;用于定义在监控数据满足特定条件时触发警报或动作。触发器是实现监控告警和自动响应的核心组件之一。以下是关于 Zabbix 触发器的详细解释和用法…

【JAVA多线程】线程池概论

目录 1.概述 2.ThreadPoolExector 2.1.参数 2.2.新任务提交流程 2.3.拒绝策略 2.4.代码示例 1.概述 线程池的核心&#xff1a; 线程池的实现原理是个标准的生产消费者模型&#xff0c;调用方不停向线程池中写数据&#xff0c;线程池中的线程组不停从队列中取任务。 实现…

动手学深度学习(Pytorch版)代码实践 -循环神经网络-54循环神经网络概述

54循环神经网络概述 1.潜变量自回归模型 使用潜变量h_t总结过去信息 2.循环神经网络概述 ​ 循环神经网络&#xff08;recurrent neural network&#xff0c;简称RNN&#xff09;源自于1982年由Saratha Sathasivam 提出的霍普菲尔德网络。循环神经网络&#xff0c;是指在全…

封锁-封锁模式(共享锁、排他锁)、封锁协议(两阶段封锁协议)

一、引言 1、封锁技术是目前大多数商用DBMS采用的并发控制技术&#xff0c;封锁技术通过在数据库对象上维护锁来实现并发事务非串行调度的冲突可串行化 2、基于锁的并发控制的基本思想是&#xff1a; 当一个事务对需要访问的数据库对象&#xff0c;例如关系、元组等进行操作…

uniapp跨域问题解决

找到menifest文件&#xff0c;在文件的最后添加如下代码&#xff1a; // h5 解决跨域问题"h5":{"devServer": {"proxy": {"/adminapi": {"target": "https://www.demo.com", // 目标访问网址"changeOrigin…

基于SpringBoot+Vue的招生管理系统(带1w+文档)

基于SpringBootVue的招生管理系统(带1w文档&#xff09; 通过招生管理系统的研究可以更好地理解系统开发的意义&#xff0c;而且也有利于发展更多的智能系统&#xff0c;解决了人才的供给和需求的平衡问题&#xff0c;招生管理系统的开发建设&#xff0c;由于其开发周期短&…

【Linux】进程优先级 + 环境变量

前言 在了解进程状态之后&#xff0c;本章我们将来学习一下进程优先级&#xff0c;还有环境变量等。。 目录 1.进程优先级1.1 为什么要有优先级&#xff1f; 2.进程的其他概念2.1 竞争性与独立性2.2 并行与并发2.3 进程间优先级的体现&#xff1a;2.3.1 O(1) 调度算法&#xf…