任务描述
一、整体要求：
1、要求页面整洁、美观，与提供的页面效果图、结构保持一致，文字、背景的颜色不统一要求
2、要求HTML代码和CSS代码书写、命名符合规范
二、 具体要求
1、鼠标移入一级菜单时，二级菜单显示，鼠标移出一级菜单时，二级菜单隐藏
（1）元素显示使用display:block属性，隐藏使用display:none属性
2、二级菜单显示在一级菜单的右侧
（1）给一级菜单和二级菜单共同的父元素设置相对定位（position: relative）
（2）给二级菜单设置绝对定位（position: absolute），并设置左侧位移（left）的值为一级菜单的宽度，上放位移（top）的值为0
3、一级菜单的文字和二级菜单的文字水平居中显示
4、一级菜单的文字和二级菜单的文字垂直居中显示
5、一级菜单的每一项和二级菜单的每一项有下边框，边框为点线（dotted）
6、一级菜单的最后一项和二级菜单的最后一项没有下边框（可以使用li:last-child选中最后一项，并设置border:none）
7、每一个菜单项的宽度和高度不做统一要求
思路分析:
评分标准是什么？
规范
1、要求页面整洁、美观，与提供的页面效果图、结构保持一致，文字、背景的颜色不统一要求
2、要求HTML代码和CSS代码书写、命名符合规范
整体
1、鼠标移入一级菜单时，二级菜单显示，鼠标移出一级菜单时，二级菜单隐藏
2、二级菜单显示在一级菜单的右侧
一级菜单
1、一级菜单的文字水平居中显示
2、一级菜单的文字垂直居中显示
3、一级菜单的每一项有下边框，边框为点线（dotted）
4、一级菜单的最后一项没有下边框
二级菜单
1、二级菜单的文字水平居中显示
2、二级菜单的文字垂直居中显示
3、二级菜单的每一项有下边框，边框为点线（dotted）
4、二级菜单的最后一项没有下边框
效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>作业</title> <style> * { margin: 0px; padding: 0px; } .list { position: relative; } ul { width: 200px; height: 29px; list-style: none; /* 去掉无序列表的项目符号 */ } ul>li { border-bottom: 1px dotted white; /* 处理文本内容溢出后的情况 */ overflow: hidden; text-overflow: ellipsis; background-color: black; width: 200px; height: 28px; text-align:center /*为了使里面的文字居中*/ } ul>li#last { border-bottom: 0px; } .list>ul>li>a { display:inline-block; /*设置为内联元素*/ line-height: 28px; /*设置行高为父布局的高度, 为了垂直居中*/ width: 100%; color: white; text-decoration: none; /* 去掉链接元素文本内容的下划线 */ white-space: nowrap; /* 强制文本内容在一行显示 */ } .list>ul>li:hover>ol { display: block; } ul>li>ol { display: none; position: absolute; left: 200px; top:0px; list-style: none; /* 去掉无序列表的项目符号 */ } ul>li>ol>li { border-bottom: 1px dotted white; /* 处理文本内容溢出后的情况 */ overflow: hidden; text-overflow: ellipsis; background-color: #727272; width: 200px; height: 28px; line-height: 28px; text-align:center; /*为了使里面的文字居中*/ top: 0px; color: white; } ul>li>ol>li:last-child { border-bottom: 0px; } </style> </head> <body> <div class="list"> <ul> <li> <a href="#">前端开发</a> <ol> <li>HTML/CSS</li> <li>JavaScript</li> <li>Vue.js</li> <li>ReactJS</li> <li>小程序</li> <li>Node.js</li> </ol> </li> </ul> </div> <div class="list"> <ul> <li> <a href="#">后端开发</a> <ol> <li>Java</li> <li>sprint boot</li> <li>spring cloud</li> <li>python</li> <li>爬虫</li> <li>PHP</li> </ol> </li> </ul> </div> <div class="list"> <ul> <li> <a href="#">移动开发</a> <ol> <li>android</li> <li>iOS</li> <li>reative native</li> <li>weex</li> </ol> </li> </ul> </div> <div class="list"> <ul> <li> <a href="#">算法/数学</a> <ol> <li>算法与数据结构</li> <li>数学</li> <li>算法</li> </ol> </li> </ul> </div> <div class="list"> <ul> <li> <a href="#">前沿技术</a> <ol> <li>微服务</li> <li>区块链</li> <li>以太坊</li> <li>人工智能</li> <li>机器学习</li> <li>深度学习</li> <li>计算机视觉</li> <li>自然语言处理</li> <li>数据处理/数据挖掘</li> </ol> </li> </ul> </div> <div class="list"> <ul> <li id="last"> <a href="#">运维测试</a> <ol> <li>运维</li> <li>自动化运维</li> <li>算法</li> <li>中间件</li> <li>linux</li> </ol> </li> </ul> </div> </body> </html>
