web前端全系列 教程
1839个小节阅读:2244.2k
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
xxxxxxxxxx
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: gray;
}
.container {
width: 300px;
height: 300px;
background-color: white;
margin: 100px auto;
}
.up {
height: 50px;
width: 100%;
}
.up ul {
list-style: none;
text-align: center;
}
.up ul li {
width: 60px;
height: 50px;
float: left;
line-height: 50px;
}
.up ul li a {
text-decoration: none;
font-size: 20px;
}
.down {
height: 250px;
width: 100%;
position: relative;
text-align: center;
}
.down div {
position: absolute;
line-height: 100px;
height: 100%;
width: 100%;
display: none;
}
.select {
border-bottom: 2px solid orange;
}
.down .div_select {
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="up">
<ul>
<li class="select"><a href="#">百度</a></li>
<li><a href="#">新浪</a></li>
<li><a href="#">淘宝</a></li>
<li><a href="#">京东</a></li>
<li><a href="#">网易</a></li>
</ul>
</div>
<div class="down">
<div class="div_select">百度百度百度</div>
<div>新浪新浪新浪</div>
<div>淘宝淘宝淘宝</div>
<div>京东京东京东</div>
<div>网易网易网易</div>
</div>
</div>
</body>
</html>