任务描述
一、整体要求：
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>
网友评论