devbox
爱喝兽奶帝天荒
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

web前端——页面设计_前端页面设计

作者：爱喝兽奶帝天荒 | 2024-06-27 13:01:46

赞

踩

前端页面设计

为xhu.html添加CSS样式，设计实现西华大学主页导航栏的多级菜单，除了本实验明确要求的设置之外，页面效果应尽可能与西华大学首页导航栏一致，主要要求：

  1. 设置导航栏菜单横向分布，当鼠标经过导航栏主菜单项时，显示相应的二级子菜单，一、二级菜单的菜单项宽度一致，见图1；
  2. 导航菜单和展示图应能随浏览器窗口宽度自适应变化，但应能确保导航栏主菜单项始终单行横向分布，并且导航栏一级、二级菜单项中的超链接文本应能始终单行显示且宽度一致，见图2；
  3. 不能更改原HTML文本，包括不能添加任何类名和ID属性！
  4. 编写应用缓存文件，缓存页面中图像；
  5. 在页面图片下方动态显示当前时间，历史浏览次数，添加姓名、学号、电话输入域和一个普通提交按钮（不要使用submit），如果用户曾经提交过信息，则打开页面时在输入域默认显示用户历史信息。（相关布局和元素样式自行设计）。

友情提示：推荐使用弹性盒布局设计导航栏； 二级菜单的显示与隐藏display属性；二级菜单的定位采用position定位。

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8" />
  6.     <title>西华大学</title>
  7.     <style>
  8.         * {
  9.             padding: 0;
  10.             margin: 0;
  11.         }
  12.         
  13.         body {
  14.             font-size: 18px;
  15.             color: white;
  16.         }
  17.         
  18.         a {
  19.             text-decoration: none;
  20.             color: white;
  21.             /*color:white;*/
  22.         }
  23.         
  24.         ul {
  25.             position: relative;
  26.             background: #0e6bc2;
  27.             height: 50px;
  28.             width: auto;
  29.             list-style: none;
  30.         }
  31.         
  32.         li {
  33.             background: #0e6bc2;
  34.             min-width: 144px;
  35.             width: auto;
  36.             height: 50px;
  37.             line-height: 50px;
  38.         }
  39.         
  40.         li:hover {
  41.             background-color: #005691;
  42.         }
  43.         
  44.         div {
  45.             box-sizing: border-box;
  46.             /*便于对齐，免受各类型元素padding不一致的影响*/
  47.         }
  48.         
  49.         .nav {
  50.             display: flex;
  51.             justify-content: center;
  52.             flex-wrap: nowrap;
  53.             width: 100%;
  54.         }
  55.         
  56.         .sub-menu {
  57.             display: none;
  58.         }
  59.         
  60.         .menu-item {
  61.             display: block;
  62.             text-align: center;
  63.         }
  64.         
  65.         #bg {
  66.             margin: 0 auto;
  67.             max-width: 1400px;
  68.         }
  69.         
  70.         img {
  71.             width: 100%;
  72.         }
  73.         
  74.         .block {
  75.             display: block;
  76.         }
  77.         
  78.         input {
  79.             outline-style: none;
  80.             border: 1px solid #ccc;
  81.             border-radius: 3px;
  82.             padding: 3px 4px;
  83.             width: 200px;
  84.             font-size: 14px;
  85.             font-weight: 200;
  86.         }
  87.         
  88.         .form {
  89.             color: black;
  90.             margin: 0 auto;
  91.             max-width: 1400px;
  92.         }
  93.         
  94.         #datetime {
  95.             font-size: 20px;
  96.             background: linear-gradient(to right, rgb(53, 177, 72), rgb(118, 7, 7));
  97.             -webkit-background-clip: text;
  98.             color: transparent;
  99.         }
  100.         
  101.         .times {
  102.             letter-spacing: 0.2rem;
  103.             font-size: 1.2rem;
  104. 			background-image: -webkit-linear-gradient(left, #961414, #9005e6 10%, #142396 10%, #05e679 50%, #879614);
  105.             -webkit-text-fill-color: transparent;
  106.             -webkit-background-clip: text;
  107.             -webkit-background-size: 200% 100%;
  108.         }
  109.     </style>
  110.  
  111. 	<script>
  112. 		var user = JSON.parse(localStorage.getItem('user')) || []
  113. 		var m = parseInt(localStorage.getItem('times')) || 1;
  114. 		console.log(m);
  115. 		window.addEventListener("load", () => {
  116. 			let item = document.getElementsByClassName('menu-item')
  117. 			for (let i = 0; i < item.length; i++) {
  118. 				item[i].addEventListener("mouseover", mouserOver)
  119. 				item[i].addEventListener("mouseout", mouserOut)
  120. 			}
  121.  
  122. 			function mouserOver() {
  123. 				this.children[1].classList.add('block')
  124. 			}
  125.  
  126. 			function mouserOut() {
  127. 				this.children[1].classList.remove('block')
  128. 			}
  129.  
  130. 			setInterval("document.getElementById('datetime').innerHTML=new Date().toLocaleString();", 500);
  131. 			document.getElementById('frequency').innerHTML = m
  132.  
  133. 		})
  134. 		window.addEventListener("beforeunload", () => {
  135.  
  136. 			m++;
  137. 			console.log(m);
  138. 			localStorage.setItem('times', JSON.stringify(m))
  139. 		})
  140.  
  141. 		nam = document.getElementById("name")
  142. 		num = document.getElementById("num")
  143. 		tel = document.getElementById("tel")
  144. 		nam.value = user.id
  145. 		num.value = user.num
  146. 		tel.value = user.tel
  147.  
  148. 		function local(value) {
  149. 			localStorage.setItem('user', JSON.stringify(value))
  150. 		}
  151.  
  152. 		function add() {
  153. 			const nam = {
  154. 				id: document.getElementById('name').value,
  155. 				num: document.getElementById('num').value,
  156. 				tel: document.getElementById('tel').value,
  157. 			}
  158. 			local(nam)
  159. 		}
  160. 	</script>
  161. </head>
  162.  
  163. <body>
  164.     <ul class="nav">
  165.         <li class="menu-item"><a href="http://www.xhu.edu.cn">学校概况</a>
  166.             <ul class="sub-menu">
  167.                 <li><a href="http://www.xhu.edu.cn" target="new">西华简介</a></li>
  168.                 <li>历史沿革</li>
  169.                 <li>现任领导</li>
  170.                 <li>西华标识</li>
  171.                 <li>西华影像</li>
  172.             </ul>
  173.         </li>
  174.         <li class="menu-item"><a href="http://www.xhu.edu.cn">机构设置</a>
  175.             <ul class="sub-menu">
  176.                 <li>学院</li>
  177.                 <li>部门</li>
  178.             </ul>
  179.         </li>
  180.         <li class="menu-item"><a href="http://www.xhu.edu.cn">人才培养</a>
  181.             <ul class="sub-menu">
  182.                 <li>师资队伍</li>
  183.                 <li>本科教育</li>
  184.                 <li>研究生教</li>
  185.                 <li>留学生教育</li>
  186.                 <li>专科教育</li>
  187.                 <li>继续教育</li>
  188.             </ul>
  189.         </li>
  190.         <li class="menu-item"><a href="http://www.xhu.edu.cn">科学研究</a>
  191.             <ul class="sub-menu">
  192.                 <li>科研信息</li>
  193.                 <li>科研成果</li>
  194.                 <li>学科科研平台</li>
  195.                 <li>学术期刊</li>
  196.             </ul>
  197.         </li>
  198.         <li class="menu-item"><a href="http://www.xhu.edu.cn">招生就业</a>
  199.             <ul class="sub-menu">
  200.                 <li>本专科招生</li>
  201.                 <li>研究生招生</li>
  202.                 <li>继续教育招生</li>
  203.                 <li>就业信息</li>
  204.             </ul>
  205.         </li>
  206.  
  207.         <li class="menu-item"><a href="http://www.xhu.edu.cn">合作交流</a>
  208.             <ul class="sub-menu">
  209.                 <li>国际交流与合作</li>
  210.                 <li>地方合作</li>
  211.                 <li>西华大学科技园</li>
  212.                 <li>国际教育学院</li>
  213.             </ul>
  214.         </li>
  215.         <li class="menu-item"><a href="http://www.xhu.edu.cn">公共服务</a>
  216.             <ul class="sub-menu">
  217.                 <li>学校校历</li>
  218.                 <li>网络服务</li>
  219.                 <li>招标投标</li>
  220.                 <li>后勤服务</li>
  221.                 <li>办公电话</li>
  222.             </ul>
  223.         </li>
  224.         <li class="menu-item"><a href="http://www.xhu.edu.cn">人才招聘</a>
  225.         </li>
  226.     </ul>
  227.     <div id="bg"><img src="images/bg.jpg"></div>
  228.     <div class="form">
  229.         姓名<input value="" type="text" id="name"> 学号
  230.         <input value="" type="number" id="num"> 电话
  231.         <input value="" type="tel" id="tel">
  232.         <button onclick=add()>提交</button>
  233.         <div id="datetime">时间</div>
  234.         <span class="times">历史浏览次数:<span id="frequency">0</span></span>
  235.     </div>
  236. </body>
  237.  
  238. </html>

css： 

  1.  <style>
  2.         * {
  3.             padding: 0;
  4.             margin: 0;
  5.         }
  6.         
  7.         body {
  8.             font-size: 18px;
  9.             color: white;
  10.         }
  11.         
  12.         a {
  13.             text-decoration: none;
  14.             color: white;
  15.             /*color:white;*/
  16.         }
  17.         
  18.         ul {
  19.             position: relative;
  20.             background: #0e6bc2;
  21.             height: 50px;
  22.             width: auto;
  23.             list-style: none;
  24.         }
  25.         
  26.         li {
  27.             background: #0e6bc2;
  28.             min-width: 144px;
  29.             width: auto;
  30.             height: 50px;
  31.             line-height: 50px;
  32.         }
  33.         
  34.         li:hover {
  35.             background-color: #005691;
  36.         }
  37.         
  38.         div {
  39.             box-sizing: border-box;
  40.             /*便于对齐，免受各类型元素padding不一致的影响*/
  41.         }
  42.         
  43.         .nav {
  44.             display: flex;
  45.             justify-content: center;
  46.             flex-wrap: nowrap;
  47.             width: 100%;
  48.         }
  49.         
  50.         .sub-menu {
  51.             display: none;
  52.         }
  53.         
  54.         .menu-item {
  55.             display: block;
  56.             text-align: center;
  57.         }
  58.         
  59.         #bg {
  60.             margin: 0 auto;
  61.             max-width: 1400px;
  62.         }
  63.         
  64.         img {
  65.             width: 100%;
  66.         }
  67.         
  68.         .block {
  69.             display: block;
  70.         }
  71.         
  72.         input {
  73.             outline-style: none;
  74.             border: 1px solid #ccc;
  75.             border-radius: 3px;
  76.             padding: 3px 4px;
  77.             width: 200px;
  78.             font-size: 14px;
  79.             font-weight: 200;
  80.         }
  81.         
  82.         .form {
  83.             color: black;
  84.             margin: 0 auto;
  85.             max-width: 1400px;
  86.         }
  87.         
  88.         #datetime {
  89.             font-size: 20px;
  90.             background: linear-gradient(to right, rgb(53, 177, 72), rgb(118, 7, 7));
  91.             -webkit-background-clip: text;
  92.             color: transparent;
  93.         }
  94.         
  95.         .times {
  96.             letter-spacing: 0.2rem;
  97.             font-size: 1.2rem;
  98. 			background-image: -webkit-linear-gradient(left, #961414, #9005e6 10%, #142396 10%, #05e679 50%, #879614);
  99.             -webkit-text-fill-color: transparent;
  100.             -webkit-background-clip: text;
  101.             -webkit-background-size: 200% 100%;
  102.         }
  103.     </style>

 新增HTML：

  1. <div class="form">
  2.         姓名<input value="" type="text" id="name"> 学号
  3.         <input value="" type="number" id="num"> 电话
  4.         <input value="" type="tel" id="tel">
  5.         <button onclick=add()>提交</button>
  6.         <div id="datetime">时间</div>
  7.         <span class="times">历史浏览次数:<span id="frequency">0</span></span>
  8.     </div>

js脚本：

  1. <script>
  2. 		var user = JSON.parse(localStorage.getItem('user')) || []
  3. 		var m = parseInt(localStorage.getItem('times')) || 1;
  4. 		console.log(m);
  5. 		window.addEventListener("load", () => {
  6. 			let item = document.getElementsByClassName('menu-item')
  7. 			for (let i = 0; i < item.length; i++) {
  8. 				item[i].addEventListener("mouseover", mouserOver)
  9. 				item[i].addEventListener("mouseout", mouserOut)
  10. 			}
  11.  
  12. 			function mouserOver() {
  13. 				this.children[1].classList.add('block')
  14. 			}
  15.  
  16. 			function mouserOut() {
  17. 				this.children[1].classList.remove('block')
  18. 			}
  19.  
  20. 			setInterval("document.getElementById('datetime').innerHTML=new Date().toLocaleString();", 500);
  21. 			document.getElementById('frequency').innerHTML = m
  22.  
  23. 		})
  24. 		window.addEventListener("beforeunload", () => {
  25.  
  26. 			m++;
  27. 			console.log(m);
  28. 			localStorage.setItem('times', JSON.stringify(m))
  29. 		})
  30.  
  31. 		nam = document.getElementById("name")
  32. 		num = document.getElementById("num")
  33. 		tel = document.getElementById("tel")
  34. 		nam.value = user.id
  35. 		num.value = user.num
  36. 		tel.value = user.tel
  37.  
  38. 		function local(value) {
  39. 			localStorage.setItem('user', JSON.stringify(value))
  40. 		}
  41.  
  42. 		function add() {
  43. 			const nam = {
  44. 				id: document.getElementById('name').value,
  45. 				num: document.getElementById('num').value,
  46. 				tel: document.getElementById('tel').value,
  47. 			}
  48. 			local(nam)
  49. 		}
  50. 	</script>

测试结果截图：

 

 

 

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

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

  

闽ICP备14008679号