* {
margin
: 0;
padding
: 0;
}
body {
font-family
: "微软雅黑", Arial, sans-serif;
font-size
: 14px;
}
.banner {
width
: 100%;
height: 300px;
position
: relative;
}
.banner img {
width
: 100%;
height: 300px;
object-fit
: cover;
}
.layer {
position
: absolute;
width
: 100%;
height: 100%;
background
: rgba(0, 0, 0, 0.5);
}
.banner p {
position
: absolute;
top
: 50
%;
left
: 50
%;
transform
: translate(-50
%, -50
%);
color
: white;
font-size
: 45px;
text-align
: center;
}
.container {
width
: 100%;
height: 50px;
background
: darkorange;
margin-top
: 2px;
}
.menu {
width
: 800px;
height: 50px;
margin
: 0 auto;
}
.menu ul {
display
: flex;
justify-content
: space-around;
align-items
: center;
}
.menu ul li {
list-style
: none;
}
.menu a {
text-decoration
: none;
color
: white;
padding
: 15px 20px;
display
: block;
}
.menu a
:hover {
background
: darkgreen;
}
.footer {
width
: 800px;
height: 400px;
margin
: 20px auto;
display
: flex;
}
.left {
flex
: 1;
background
: black;
position
: relative;
}
.right {
flex
: 1;
background
: #eee;
padding
: 20px;
}
.left ul li {
list-style
: none;
border-radius
: 100%;
border
: 1px solid #394;
position
: absolute;
}
.sun {
width
: 20px;
height: 20px;
background
: yellow;
top
: 1
85px;
left
: 190px;
border
: none;
}
.shui {
width
: 60px;
height: 30px;
top
: 165px;
left
: 170px;
animation
: myanimation 6s linear infinite;
}
.shui span {
width
: 4px;
height: 4px;
background
: blue;
display
: block;
border-radius
: 100%;
position
: absolute;
left
: 5px;
top
: 8px;
}
.
earth {
width
: 130px;
height: 130px;
top
: 130px;
left
: 135px;
animation
: myanimation 5s linear infinite;
}
.
earth > span {
width
: 4px;
height: 20px;
background
: yellow;
position
: absolute;
left
: 5px;
top
: 8px;
}
.moon {
width
: 2px;
height: 2px;
background
: rgb(243, 242, 242);
position
: absolute;
top
: -4px;
left
: -4px;
display
: block;
border-radius
: 100%;
}
@keyframes myanimation {
from {
transform
: rotate(0deg);
}
to {
transform
: rotate(360deg);
}
}
.btn {
display
: inline-block;
padding
: 10px 20px;
background
: #4d92d9;
color
: white;
text-decoration
: none;
border
: 2px solid #4d92d9;
transition
: all 0.4s;
}
.btn
:hover {
background
: white;
color
: #4d92d9;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-
8">
<title></title>
<link rel="stylesheet" type="text/css" href="sy2.css" />
</head>
<body>
<div class="banner">
<div class="img"> <img src="images/1.jpeg"> </div>
<div class="layer"></div>
<p></p >
</div>
<div class="container">
<div class="menu">
<ul>
<li><a href=" ">首页</a ></li>
<li><a href="#">推荐阅读</a ></li>
<li><a href="#">历史故事</a ></li>
<li><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>
<div class="footer">
<div class="left">
<ul>
<li class="sun"></li>
<li class="shui"><span></span></li>
<li class="jin"><span></span></li>
<li class="
earth"><span><span class="moon"></span></li>
</ul>
</div>
<div class="right">
</div>
</div>
</body>
</html>帮我完善我现在写的代码完成实验指导书内容
扫一扫
3941
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
