简单导航练习

2024-02-06 14:21:10

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
/*border-radius: 10px;*/
/*background-color: greenyellow;*/
cursor: pointer;
margin-left: 100px;
text-align: center ;
width:700px;
height: 40px;
margin-right: auto;
border: 1px solid white;
margin-top: 100px;
/*box-sizing: border-box;*/
}
span{
font-size: 20px;
height:40px;
color: pink;
font-weight:bolder;
float: left ;
width: calc(100%/7);/*如果平分后后面-xpx则就是给这个窗口留下xpx的宽度位置 width: inherit;; 继承父元素宽度*/
border: 1px solid gold;
box-sizing: border-box;/*假如您需要并排放置两个带边框的框，可通过将
box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中*/
}
span:hover{
background-color: burlywood;
}
.one{
/* background-color: gold; */
color: pink;
}
/**div li a:hover 表示当鼠标移动到a上头的样式
div li:hover a 表示当鼠标移到li上头时，a的样式*/
.two
{
display: none;
position: absolute;
margin-top: 14px;
padding: 8px;
left: 110px;
/* background-color: ; */
}
.two li:hover {
background-color: chartreuse;
color: indianred;
}
.one:hover .two{
display: block;
}
.two li{
padding: 1px;
list-style: none;
}
</style>
</head>
<body>
<div class="box">
<span class="one">首页
<ul class="two">
<li>广告招聘</li>
<li>电话联系</li>
<li>人员信息</li>
</ul>
</span>
<span>公司方案</span>
<span>公司人员</span>
<span>公司计划</span>
<span>公司时间</span>
<span>招贤纳才</span>
<span>联系我们</span>
</div>
</body>
</html>

码农公寓

相关文章