devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

web期末作业网页设计——JavaScript_javascript网页设计期末大作业

作者：IT小白 | 2024-07-15 18:18:39

赞

踩

javascript网页设计期末大作业

目录

 一.作品简介

二.网页效果

首页

花语 

登录界面 

注册界面

三.网页代码

首页

登录界面

注册界面

视频界面

 一.作品简介

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

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

二.网页效果

首页

花语 

登录界面 

注册界面 

视频界面 

三.网页代码

首页

  1.     <head>
  2. 		<meta charset="utf-8" />
  3. 		<title>花遇（首页）</title>
  4. 		<link rel="stylesheet" type="text/css" href="css/reset.css" />
  5. 		<link rel="stylesheet" type="text/css" href="css/index.css"/>
  6. 		
  7. 	</head>
  1. <div class="site-list">
  2. 					<ul class="clearfix">
  3. 						<li>
  4. 							<a href="index1.html"><font color="coral"><b>首页</b></font></a>
  5. 						</li>
  6. 						<li>
  7. 							<a href="dianying2.html">鲜花</a>
  8. 						</li>
  9. 						<li>
  10. 							<a href="dianshij2.html">永生花</a>
  11. 						</li>
  12. 						<li>
  13. 							<a href="#">在线订购</a>
  14. 						</li>
  15. 				<!-- tab下拉菜单 -->
  16. 						<li class="qita">
  17. 							<a href="#">其他</a>
  18. 							<ul class="dis">
  19. 								<li><a href="dianying2.html">礼品</a></li>
  20. 								<li><a href="#">公仔</a></li>
  21. 								<li><a href="#">绿植</a></li>
  22. 								<li><a href="#">团购</a></li>
  23.                                                                                    <li><a href="#">甄选</a></li>
  24. 							</ul>
  25. 						</li>
  26. 					</ul>
  27. 				</div>

轮播图

  1. <div class="site-content">
  2. 			<div class="container">
  3. 				<div class="box">
  4. 				    <ul id="imglist">
  5. 				        <li><img src="img/index/hua1.png" alt=""></li>
  6. 				        <li><img src="img/index/hua2.png" alt=""></li>
  7. 				        <li><img src="img/index/hua3.png" alt=""></li>
  8. 				        <li><img src="img/index/hua4.png" alt=""></li>
  9. 				        <li><img src="img/index/hua5.png" alt=""></li>
  10. 				    </ul>
  11. 				    <ul id="btnlist">
  12. 				        <li class="btn active"></li>
  13. 				        <li class="btn"></li>
  14. 				        <li class="btn"></li>
  15. 				        <li class="btn"></li>
  16. 				        <li class="btn"></li>
  17. 				    </ul>
  18. 				</div>
  19. 				<script src="js/lunb.js"></script>
  20.  
  21. 			</div>
  22. 		</div>

tab菜单 

  1. <div id="tab">
  2. 					<div id="tabNav">
  3. 						<p><strong>鲜花用途</strong></p>
  4. 						<ul>
  5. 							<li class="active">爱情</li>
  6. 							<li>慰问</li>
  7. 							<li>商务</li>
  8. 						</ul>
  9. 					</div>
  10. 					<div id="main">
  11. 						<div class="item show">
  12. 							<!-- tab爱情模块 -->
  13. 							<div class="main-zuixin">
  14. 								
  15. 								<div class="zuixin-left"><!-- 左图 -->
  16. 									<img src="img/index/shengrihua.png" />
  17. 									
  18. 								</div>
  19. 								<div class="zuixin-right"><!-- 右图 -->
  20. 									<div class="zuixin-right1"><!-- 左列 -->
  21. 										<div>
  22. 											<img src="img/index/aiqing1.png" />
  23. 											
  24. 										</div>
  25. 										<div>
  26. 											<img src="img/index/aiqing2.png" />
  27. 											
  28. 										</div>
  29. 									</div>
  30. 									<div class="zuixin-right2"><!-- 右列 -->
  31. 										<div>
  32. 											<img src="img/index/aiqing3.png" />
  33. 											
  34. 										</div>
  35. 										<div>
  36. 											<img src="img/index/aiqing4.png" />
  37. 											
  38. 										</div>
  39. 									</div>
  40. 								</div>
  41. 								
  42. 							</div>
  43. 						</div>

右侧菜单栏

  1. <div class="tableft">
  2. 					<div class="tableft-list">
  3. 						<h3>鲜花花材</h3>
  4. 					</div>
  5. 					<hr size="1" color="#A2A2A2"/>
  6. 					<div class="tableft-list">
  7. 						<p><font face="微软雅黑" size="4"><i>1 </i></font></p>
  8. 						<a href="#">玫瑰</a>
  9. 					</div>
  10. 					<div class="tableft-list">
  11. 						<p><font face="微软雅黑" size="4"><i>2 </i></font></p>
  12. 						<a href="#">康乃馨</a>
  13. 					</div>
  14. 					<div class="tableft-list">
  15. 						<p><font face="微软雅黑" size="4"><i>3 </i></font></p>
  16. 						<a href="#">郁金香</a>
  17. 					</div>
  18. 					<div class="tableft-list">
  19. 						<p><font face="微软雅黑" size="4"><i>4 </i></font></p>
  20. 						<a href="#">马蹄莲</a>
  21. 					</div>
  22. 					<div class="tableft-list">
  23. 						<p><font face="微软雅黑" size="4"><i>5 </i></font></p>
  24. 						<a href="#">向日葵</a>
  25. 					</div>				
  26. 				</div>

底部栏

  1. <div class="footer">
  2. 			<div class="container">
  3. 				<div class="footer-liebiao">
  4. 					<div class="guanyu">
  5. 						<table>
  6. 							<tr class="neir">
  7. 								<td colspan="5"><h4>关于我们</h4></td>
  8. 							</tr>
  9. 							<tr>
  10. 								<td><a href="#">关于我们</a></td>
  11. 								<td><a href="#">联系我们</a></td>
  12. 								<td><a href="#">在线反馈</a></td>
  13. 								<td><a href="#">侵权投诉</a></td>
  14. 							</tr>
  15. 						</table>
  16. 					</div>
  17. 					
  18. 					<div class="xieyi">
  19. 						<table>
  20. 							<tr class="neir">
  21. 								<td><h4>协议声明</h4></td>
  22. 							</tr>
  23. 							<tr>
  24. 								<td><a href="#">用户协议</a></td>
  25. 								<td><a href="#">隐私政策</a></td>
  26. 								<td><a href="#">历史版本</a></td>
  27. 								<td><a href="#">知识产权声明</a></td>
  28. 							</tr>
  29. 						</table>
  30. 					</div>
  31. 				</div>

登录界面

  1. <div class="box">
  2. 			<div class="left"></div>
  3. 			<div class="right">
  4. 				<h4>登 录</h4>
  5. 				
  6. 				<form  action="#">
  7. 					<input class="acc" type="text" id="username" placeholder="用户名"/>
  8. 					<input class="acc" type="password" id="pwd" placeholder="密码"/>
  9. 				</form>
  10. 				<from  action="#">
  11. 						<input class="submit" type="submit" id="log" value="登录"/>
  12. 				</from>
  13. 				
  14. 				<div class="down">
  15. 					<a href="zhuce.html">注册账号</a>
  16. 					<a href="#">忘记密码？</a>
  17. 				</div>
  18. 			</div>
  19. 		</div>

注册界面

  1. <div class="box">
  2. 			<div class="left"></div>
  3. 			<div class="right">
  4. 				<h4>用户注册</h4>
  5. 				<form action="">
  6. 					<input class="acc" type="text" id="username" placeholder="用户名"/>
  7. 					<input class="acc" type="tel" id="phone" placeholder="手机号"/>
  8. 					<input class="acc" type="password" id="pwd" placeholder="密码"/>
  9. 					<input class="acc" type="password" id="pwd2" placeholder="确认密码"/>
  10. 				</form>
  11. 				<form action="">
  12. 					<input class="submit" type="submit" id="log" value="注册"/>
  13. 				</form>
  14. 			</div>
  15. 		</div>

视频界面

  1. <head>
  2. 		<meta charset="utf-8">
  3. 		<title>鲜花和浪漫</title>
  4. 		<link rel="stylesheet" type="text/css" href="css/reset.css" />
  5. 		<link rel="stylesheet" type="text/css" href="css/Video.css" />
  6. 	</head>
  7. 	<body>
  8. 		<div class="beijing">
  9. 			<div class="header">
  10. 				<div class="container">
  11. 					
  12. 					<!-- logo -->
  13. 					<div class="site-logo">
  14. 						<a href="#">
  15. 							
  16. 						</a>
  17. 					</div>
  18. 					
  19. 					<!-- 首页导航 -->
  20. 					<div class="site-list">
  21. 						<ul class="clearfix">
  22. 							<li>
  23. 								<a href="index1.html">首页</a>
  24. 							</li>
  25. 							<li>
  26. 								<a href="dianying2.html"><font color="coral"><b>不止玫瑰有爱意</b></font></a>
  27. 							</li>
  28. 						</ul>
  29. 					
  30. 					</div> 
  31. 					<!-- 登入/注册 -->
  32. 					<div class="login">
  33. 						<a href="dengru.html?">
  34. 							<img src="img/index/yonghu3.png"/>
  35. 						</a>
  36. 					</div>
  37. 					<!-- 搜索框 -->
  38. 					<div class="site-search">
  39. 						<form action="">
  40. 							<input class="search-text"   type="text" placeholder="请输入关键字"/>
  41. 							<input class="submit" type="submit" value="搜索"/>
  42. 						</form>
  43. 					</div>
  44. 				</div>
  45. 			</div>
  46. 			<div id="ship">
  47. 				<div class="container">
  48. 				<video width="1000px" controls="controls" poster="img/huahai.jpg"">
  49. 					<source src="img/shiping.mp4" type="video/mp4"></source>
  50. 				</video>
  51. 				</div>
  52. 			</div>
  53. 		</div>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/830561
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号