菜单 搜索
首页 前端知识 web期末作业网页设计——JavaScript

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

2024-01-25 10:01:32 前端知识 前端哥 904 571 我要收藏

目录

 一.作品简介

二.网页效果

首页

花语 

登录界面 

注册界面

三.网页代码

首页

登录界面

注册界面

视频界面

 一.作品简介

网站系统文件种类包含：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>
复制

转载请注明出处或者链接地址：https://www.qianduange.cn//article/270.html
标签
htmlcss
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

js向上取整

2024-02-03 16:02:53

9、jQuery

2024-02-03 12:02:49

web前端1 x（初级）理论（158道单选题含答案）

2024-02-03 12:02:49

网站登录界面制作（three.js 3D特效背景） boostrap导航栏实现 jQuery移动窗口【附加源代码】

2024-02-03 12:02:45

基于javaweb mysql的ssm maven红酒朔源管理系统(java ssm jsp layui jquery mysql)

2024-02-03 12:02:39

VUE倒计时组件，解决setInterval （）引起页面卡顿问题

2024-02-03 12:02:38

jquery导航图片全屏滚动、首页全屏轮播图，各式相册

2024-02-03 12:02:31

基于Bootstrap&HTML&CSS&jQuery制作左侧多级垂直导航菜单(含源码)

2024-02-03 12:02:29

onlyoffice 相关参数设置说明

2024-02-03 12:02:29

jQuery 遍历方法总结

2024-02-03 12:02:26

广告位招租：QQ85750956
大家推荐的文章
1

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
2

HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999
3

web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999
4

html生日祝福网页制作（粉色主题

2024-01-30 20:01:45997
5

导航栏以及二级菜单栏（下拉列表）的制作

2024-01-25 11:01:03994
6

Access-Control-Allow-Origin跨域解决及详细介绍

2024-02-03 12:02:13993
7

Get请求报错404出现原因及解决办法

2024-01-25 10:01:26993
8

vue3 vite pinia 配置动态路由、解决刷新页面路由消失问题

2024-01-27 01:01:35992
9

jQuery实现AJAX和AJAX跨域问题

2024-01-28 12:01:54988
10

echarts - 自定义形状 - 实现立体柱状图

2024-01-30 10:01:46987

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！