• HTML5——周技能检测——菜单编辑——2022年11月22日（考完）

    HTML5——周技能检测——菜单编辑——2022年11月22日（考完）

    一、语言和环境

    1. 实现语言：HTML5。

    2. 开发环境：VScode。

    二、要求

    1、完成下列菜单显示效果。

    2、添加【:hover】选择器，鼠标悬停在文字上方时文字加粗。

    参考图如下所示：

    三、推荐实现步骤

    （1）创建宽度为【100%】，高度为【5vh】的【div】容器。

    （2）通过ul与li的方式创建一个菜单列表，li的数量为8。

    （3）添加外层div的背景颜色为【skyblue】。

    （4）添加li的文本格式为：宽度【12.5%】、水平居中、行高5vh。

    （5）添加li的伪类选择器【:hover】，并添加文字加粗效果。

    四、注意事项

    1. 仔细审题，准确理解题目要求。

    2. 注意按照要求来进行设计。

    3. 代码的书写、命名须符合规范，添加适当的注释。

    五、评分标准

    题目：文件操作

    该程序评分标准如下：

    100

    菜单列表

    10

    Html网页创建成功，引入HTML基础代码

    10

    创建宽度为【100%】，高度为【5vh】的【div】容器。

    20

    通过ul与li的方式创建一个菜单列表，li的数量为8。

    10

    添加外层div的背景颜色为【skyblue】。

    20

    添加li的文本格式为：宽度【12.5%】、水平居中、行高5vh。

    20

    添加li的伪类选择器【:hover】，并添加文字加粗效果。

    10

    变量命名规范，有注释

    总分

    100分

    实现代码：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>menutitle>
    9.     <style>
    10.         /* 去掉内外边距 */
    11.         
    12.         * {
    13.             margin: 0px;
    14.             padding: 0px;
    15.         }
    16.         /* 去掉ul默认样式 */
    17.         
    18.         ul {
    19.             list-style: none;
    20.         }
    21.         /* li样式 */
    22.         
    23.         ul li {
    24.             width: 12.5%;
    25.             float: left;
    26.             text-align: center;
    27.             line-height: 5vh;
    28.         }
    29.         /* 伪类选择器的使用 */
    30.         
    31.         ul li:hover {
    32.             font-weight: bolder;
    33.         }
    34.     style>
    35. head>
    36.  
    37. <body>
    38.     <div style="width: 100%;height:5vh;background-color: skyblue;">
    39.         <ul>
    40.             <li>首页li>
    41.             <li>喜剧片li>
    42.             <li>动作片li>
    43.             <li>爱情片li>
    44.             <li>恐怖片li>
    45.             <li>文艺片li>
    46.             <li>战争片li>
    47.             <li>纪录片li>
    48.         ul>
    49.     div>
    50. body>
    51.  
    52. html>

  • 相关阅读:
    Android 弹出自定义对话框
    Java并发编程—java多线程相关概念
    全网最细，真实企业性能测试落地实施，一文带你快速打通...
    SpringMvc高级（拦截器和文件上传下载）
    HP OfficeJet Pro 8020 如何更换碳粉盒
    嵌入式分享合集91
    Java NIO
    R语言批量处理nc数据/R语言MK趋势检验/NCL绘图(nc可视化）
    使用jmeter+ant+jenkins+git搭建自动化测试平台
    buildadmin+tp8表格操作（7.1）表格的事件监听（el-table中的事件）
  • 原文地址：https://blog.csdn.net/feng8403000/article/details/127985796