• 适配移动端，菜单采用底部固定形式(1+X Web前端开发初级 例题)

    文章目录

     

    📄题目要求

    🧩说明

    🧩效果图

    🧩补充：题目文件结构

    💻HTML代码

    💻CSS代码

    💻JavaScript代码

    🎯实现效果

    📰完整答案

    📄题目要求

    • 阅读下列说明、效果图和代码，进行静态网页开发，回答问题1至问题8。

    🧩说明

    • 某互联网公司开发官网的首页，为了适配移动端，决定菜单采用底部固定形式。现在需要编写代码实现效果。

    • 项目名称为menu，包含首页index.html、css文件夹、js文件夹，其中，css文件夹包含style.css文件；js文件夹包含jquery.min.js 和index.js。

    • 根据注释，补全代码，在（1）至（8）处填入正确的内容。

    🧩效果图

    🧩补充：题目文件结构

     

    💻HTML代码

    1. html>
    2. <html>
    3.  
    4. <head>
    5.     <title>第五题title>
    6.     <meta charset="utf-8">
    7.     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    8.     <link rel="stylesheet" href="css/style.css">
    9.     <script src="js/jquery.min.js">script> 
    10. head>
    11.  
    12. <body>
    13.     <div class="layout-footer">
    14.         <div class="bottom_nav">
    15.             <a href="">首页a>
    16.         div>
    17.         <div class="bottom_nav">
    18.             <div class="layout-submenu">
    19.                 <div class="sub_menu" style="border-bottom: 1.5px solid #F2F2F2"><a>项目a>div>
    20.                 <div class="sub_menu">项目div>
    21.             div>
    22.             <a>服务a>
    23.         div>
    24.         <div class="bottom_nav">
    25.             <div class="layout-submenu">
    26.                 <div class="sub_menu" style="border-bottom: 1.5px solid #F2F2F2"><a>中心公告a>div>
    27.                 <div class="sub_menu">中心资讯div>
    28.             div>
    29.             <a>资讯a>
    30.         div>
    31.         <div class="bottom_nav">
    32.             <a>我的账户a>
    33.         div>
    34.     div>
    35.     <script src="js/index.js">script>
    36. body>
    37.  
    38. html>

    💻CSS代码

    1. a {
    2.     text-decoration: none;
    3.     color: #333;
    4. }
    5.  
    6. .layout-footer {
    7.     /*（1）固定定位*/
    8.     /* position: (1); */
    9.     position: fixed;
    10.     z-index: 9999;
    11.     /*（2）（3）左边距离0px，底部距离0px*/
    12.     /* left: (2); */
    13.     /* bottom: (3); */
    14.     left: 0px;
    15.     bottom: 0px;
    16.     /*（4）（5）实现flex布局，主轴对齐方式是两端对齐，项目之间的间隔都相等。*/
    17.     /* display: (4); */
    18.     /* justify-content: (5); */
    19.     display: flex;
    20.     justify-content: space-between;
    21.     width: 100%;
    22.     height: 50px;
    23.     border-top: 1px solid gainsboro;
    24.     color: black;
    25.     text-align: center;
    26.     background-color: #f2f2f2;
    27. }
    28.  
    29. .bottom_nav {
    30.     width: 25%;
    31.     line-height: 50px;
    32. }
    33.  
    34. .layout-submenu {
    35.     position: fixed;
    36.     height: 80px;
    37.     width: 25%;
    38.     margin-left: -1px;
    39.     z-index: 9999;
    40.     bottom: 50px;
    41.     border: 1px solid gainsboro;
    42.     text-align: center;
    43.     background-color: white;
    44.     display: none;
    45. }
    46.  
    47. .sub_menu {
    48.     line-height: 40px;
    49.     vertical-align: middle;
    50. }
    51.  
    52. .layout-footer .bottom_nav:hover {
    53.     border-left: 1px solid gainsboro;
    54.     border-right: 1px solid gainsboro;
    55. }
    56.  
    57. .layout-footer .bottom_nav:hover .layout-submenu {
    58.     display: block;
    59.  
    60. }

    💻JavaScript代码

    本题考点都在JavaScript的内容。

    1. $(".bottom_nav a").click(function (e) {
    2. 	e.stopPropagation();
    3. 	//被点击a的上一个div元素样式设置为block，其余项目的div的隐藏。
    4. 	// $(this).prev().stop().(6).parent().siblings().children(".layout-submenu").stop().(7);
    5. 	$(this).prev().stop().css("display", "block").parent().siblings().children(".layout-submenu").stop().css("display", "none");
    6. })
    7. $(document).click(function () {
    8. 	//点击页面的任意地方，二级菜单全部取消
    9. 	// $(".layout-submenu").(8);
    10. 	$(".layout-submenu").css("display", "none");
    11. })

    🎯实现效果

      

    📰完整答案

    试题五（16分）
    【问题】（16分）
    （1）fixed
    （2）0 或者 0px
    （3）0 或者 0px
    （4）flex
    （5）space-between
    （6）css("display", "block")
    （7）css("display", "none")
    （8）css("display", "none")
    （每空2分，共16分）

    🎯点赞收藏，防止迷路🔥 

  • 相关阅读:
    矩阵分析与应用(22)
    KT142C-sop16语音芯片的4个IO口如何一对一触发播放_配置文件详细说明
    机器学习（四十八）：粒子群优化（PSO）-提升机器学习模型准确率的秘密武器
    飞桨机器学习最小实现，出租车计费规则预测
    Fiddler工具使用
    接口自动化测试小结
    猿代码浅谈MPI与OpenMP并行程序设计
    php的错误机制
    Microservices communication
    01_Vue引入方式-CDN
  • 原文地址：https://blog.csdn.net/weixin_53231455/article/details/127761006