转载自:[HTML+CSS] 下拉菜单 激情步骤解说_哔哩哔哩_bilibili
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>描绘的资料</title>
<link rel="stylesheet" href="xiala.css">
</head>
<body>
<ul class="shell">
<li class="button">
<span><a href="#">个人信息</a></span>
<ul>
<li><a href="#">基本信息</a></li>
<li><a href="#">学习精力</a></li>
<li><a href="#">个人实践</a></li>
</ul>
</li>
<li class="button">
<span><a href="#">往事回首</a></span>
<ul>
<li><a href="#">大一学期</a></li>
<li><a href="#">大二学期</a></li>
<li><a href="#">大三学期</a></li>
<li><a href="#">社会实践</a></li>
</ul>
</li>
<!-- 图片 -->
<li class="portrait">
<ul class="information">
<li><a href="#">描绘的前端</a></li>
<li><a href="https://blog.csdn.net/m0_68557179?spm=1000.2115.3001.5343">描绘的博客</a></li>
<li><a href="#">其他作品</a></li>
</ul>
</li>
<li class="button">
<span><a href="#">精彩瞬间</a></span>
<ul>
<li><a href="#">校园生活</a></li>
<li><a href="#">世界各地</a></li>
<li><a href="#">我的自拍</a></li>
<li><a href="#">随手拍拍</a></li>
</ul>
</li>
<li class="button">
<span><a href="#">心得感悟</a></span>
<ul>
<li><a href="#">学业感悟</a></li>
<li><a href="#">就业方向</a></li>
<li><a href="#">我的理想</a></li>
</ul>
</li>
</ul>
</body>
</html>
css
*{
margin: 0;
padding: 0;
/* 取消li的点点 */
list-style: none;
font-size: 20px;
color: #f4f1de;
/* 取消a下的横线 */
text-decoration: none;
}
body{
/* vh是相对单位,这里相当于100% */
height: 100vh;
/* 横向 */
display: flex;
/* 下面这两个加起来就可以把盒子放中间 */
/* 将弹性 <div> 元素的所有项目的居中对齐: */
align-items: center;
/* 在容器中央对齐弹性项目: */
justify-content: center;
/* 渐变 --right前面有个to*/
background: linear-gradient(to right,rgb(95, 255, 220),rgb(178, 209, 255));
}
.shell{
display: flex;
justify-content:center;
}
.button,.portrait{
background-color: #50536e;
width: 180px;
height: 70px;
text-align: center;
line-height: 70px;
/* 过渡 */
transition: 0.3s;
/* 鼠标放上会变小手:可点击样式 */
/* 可以没有,因为已经把它加上a标签了 */
/* cursor: pointer; */
}
/* 伪类标签 */
.portrait::before{
/* 在每个 <portrait> 元素的内容之前插入新内容: */
content: " ";
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
/* 位置 */
transform: translate(30px,-30px);
/* 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。 */
background-size: cover;
background-image: url(../textx-xiala/image/1.jpg);
border: 10px solid #fff;
}
.information{
width: 220px;
background-color: #e07a5f;
border-radius: 10px;
transform: translate(-20px,-200px);
padding: 20px 0;
line-height: 0;
height: 0;
transform: 0.3s;
/* 隐藏 */
opacity: 0;
}
.button:hover{
background-color: #d15139;
}
.button li:hover{
background-color: #e07a5f;
}
.button ul li{
height: 0;
transform: 0.2s;
opacity: 0;
transform: translateY(-65px);
background-color: #e07a5f;
}
.button:hover li{
height: 70px;
/* 显示 */
opacity: 1;
transform: translateY(0);
}
.portrait:hover .information{
opacity: 1;
line-height: 70px;
transform: translate(-20px,-10px);
height: auto;
}
展示