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.hqwc.cn/news/329746.html

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

相关文章

书生·浦语大模型实战营 Lesson 1

书生浦语大模型全链路开源体系 书生浦语大模型开源历程 书生浦语大模型系列 从模型到应用 数据 预训练 微调 部署

如何写html邮件 —— 参考主流outook、gmail、qq邮箱渲染邮件过程

文章目录 ⭐前言⭐outlook渲染邮件⭐gmail邮箱渲染邮件⭐qq邮箱渲染邮件 ⭐编写html邮件&#x1f496;table表格的属性&#x1f496;文本&#x1f496;图片&#x1f496;按钮&#x1f496;背景图片 ⭐总结⭐结束 ⭐前言 大家好&#xff0c;我是yma16&#xff0c;本文分享关于 …

Android WiFi 连接

Android WiFi 连接 1、设置中WiFi显示2、WiFi 连接流程2.1 获取PrimaryClientModeManager2.2 ClientModeImpl状态机ConnectableState2.3 ISupplicantStaNetworkCallback 回调监听 3、 简要时序图4、原生低层驱动5、关键日志 1、设置中WiFi显示 Android WiFi基础概览 packages/a…

mybatisPlus CodeGenerator 代码生成

在 test 目录下新建 CodeGenerator 类&#xff0c;用于 mybatis-plus 自动生成 java 代码 package com.edward;import com.baomidou.mybatisplus.generator.FastAutoGenerator; import com.baomidou.mybatisplus.generator.config.OutputFile; import com.baomidou.mybatisplu…

ECMAScript简介及特性

ECMAScript&#xff0c;通常简称为ES&#xff0c;是一种由ECMA&#xff08;欧洲计算机协会&#xff09;国际组织标准化和推动的脚本语言规范。它被广泛用于Web浏览器和服务器端编程&#xff0c;是JavaScript的基础。 ECMAScript的起源可以追溯到1996年&#xff0c;当时Netscape…

HCIP-端口隔离、arp代理、聚合vlan、QinQ

目录 一&#xff0c;端口隔离&#xff08;同vlan间同交换机下的端口隔离技术&#xff09; 端口隔离原理&#xff1a; 双向隔离配置 4&#xff0c;端口隔离特殊使用&#xff1a;单向隔离 6&#xff0c;ARP代理 6.1 路由式代理 6.2 VLAN内ARP代理 6.3 VLAN间ARP代理 6.3…

Apache 配置与应用

目录 前言 1.1 Apache连接保持 1.2 Apache 的访问控制 1.2.1 客户机地址限制 1.2.2 用户授权限制 1.2.2.1 创建用户认证数据文件 1.2.2.2 添加用户授权配置 1.2.2.3 验证用户访问授权 ​编辑 1.3 Apache 日志分割 1.3.1 Apache 自带rotatelogs 分割工具 1.3.2 使用第…

Docker nginx容器代理播放m3u8视频文件(HLS)

文章目录 Docker Nginx容器代理播放M3U8文件教程获取Nginx Docker镜像设置Nginx配置文件用 ffmpeg 将 MP4 文件转换成 m3u8 文件运行Docker容器测试M3U8流其他问题我用vlc都能播放http://192.168.121.50/forest4kTest.m3u8和http://192.168.121.50/forest4kTest.mp4&#xff0c…

一款开源的MES系统

随着工业4.0的快速发展&#xff0c;制造执行系统&#xff08;MES&#xff09;成为了智能制造的核心。今天&#xff0c;将为大家推荐一款开源的MES系统——iMES工厂管家。 什么是iMES工厂管家 iMES工厂管家是一款专为中小型制造企业打造的开源MES系统。它具备高度的可定制性和灵…

深度学习数据集大合集—鱼类数据集

最近收集了一大波有关于各类鱼类的数据集&#xff0c;有淡水鱼、有深海鱼、有鱼的状态、有鱼的分类。大家可以详细查看。废话不多说&#xff0c;接下下来逐一的给大家介绍&#xff01;&#xff01; 1、鱼类检测数据集 包含鱼类的对象检测数据集 本数据集包含4种鱼类及其相关…

在c#/VB.NET中使用控件数组

同类型的BASIC语言:VFB,TWINBASIC 2个IDE都实现了控件数组的功能。 控件数组是位于一个窗体上共享同一名称的一组同种类型控件。普通控件仅使用名称就可以识别&#xff0c;而引用控件数组中的成员则需要同时使用名称和索引。开发人员在 Visual Basic 6.0 以及更早的版本中使用…

【Java集合篇】HashMap 是如何扩容的

HashMap 是如何扩容的 ✔️ 为什么需要扩容?✔️ 桶元素重新映射✔️链表重新链接✔️ 取消树化✔️拓展知识仓✔️除了rehash之外&#xff0c;哪些操作也会将树会退化成链表? ✔️ 为什么需要扩容? HashMap在Java等编程语言中被广泛使用&#xff0c;用于存储键值对数据。Ha…