页面开发
隐藏样式，有三种方法
一种是dispplay
第二种是透明度
第三中是 visibility: visible;
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>公司网站页面title>
<style>
.header{
width: 1180px;
margin: 0 auto;
height: 90px;
border: 1px solid red;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo{
width: 100px;
}
.logo img {
width: 100px;
height: 80px;
animation: logoBig 6s linear infinite;
}
.nav{
flex: 1;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
padding: 0 20px;
}
.item{
position: relative;
padding: 20px 10px;
}
.item:hover .show {
background: red;
visibility: visible;
}
.show {
visibility: hidden;
position: absolute;
height: 60px ;
width: 100px;
top :50px;
left: 0;
display: flex ;
flex-direction: column;
justify-items: center;
background: #000;
color: #FFF;
padding: 8px;
border-radius: 5px;
}
.show:hover{
visibility: visible;
}
.lable{
margin: 2px 0;
padding: 3px;
}
.lable:hover{
color: red;
background: yellow;
}
.tel{
width: 120px;
}
@keyframes logoBig {
0%{
width: 100px;
height: 80px;
}
50%{
position: absolute;
top :200px;
left: 10px;
width: 400px;
height: 320px;
}
100%{
width: 100px;
height: 80px;
}
}
style>
head>
<body>
<div class="header">
<div class="logo"><img src="https://www1.djicdn.com/dps/f77b1a299ef740568ce7fcbe13990403.jpg" >div>
<div class="nav">
<div class="item">首页div>
<div class="item">关于我们
<div class="show">
<div class="lable">加入我们div>
<div class="lable">公司简介div>
div>
div>
<div class="item">解决方案
<div class="show">
<div class="lable">公司一div>
<div class="lable">案例二div>
div>
div>
<div class="item">荣誉证书
<div class="show">
<div class="lable">全国第一div>
<div class="lable">牛逼哄哄div>
div>
div>
<div class="item">新闻报道div>
<div class="item">留言div>
div>
<div class="tel">
<div>全国电话div>
<div>400-888-8888div>
div>
div>
body>
html>
页面布局效果