CSS实验案例02简单专业介绍网页
2.1CSS
body {
font-size: 24px;
text-align: center;
}
div {
width: 1500px;
margin: 1px auto;
background: white;
}
#top {
}
#nav, #nav ul {
height: 40px;
font-size: 18px;
list-style: none;
}
#nav a:link, #nav a:visited {
display: block;
text-decoration: none;
}
#nav li {
float: left;
position: relative;
background-color: #D8D8D8;
}
#nav ul {
display: none;
position: absolute;
padding-top: 1.75em;
}
#nav li:hover ul {
display: block;
}
#banner {
height: 40px;
}
#IT {
width: 1500px;
height: 210px;
}
.content_left {
width: 580px;
height: 200px;
float: left;
margin: 0;
}
.content_right {
font-size: 16px;
font-family: "宋体";
text-indent: 2em;
text-align: left;
width: 900px;
float: left;
height: 200px;
margin: 0 0 0 20px;
}
ul {
float: left;
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}
a {
float: left;
width: 8em;
color: black;
background-color: #D8D8D8;
padding: 0.2em 0.6em;
border-right: 1px solid black;
border-top: 1px solid white;
}
a:hover {
float: left;
width: 8em;
color: black;
background-color: #ff7500;
padding: 0.2em 0.6em;
}
.content_left {
width: 580px;
height: 200px;
overflow: hidden;
}
.con {
width: 3300px;
height: 300px;
overflow: hidden;
animation: move 12s linear infinite normal;
animation-fill-mode: forwards;
}
.con:hover {
animation-play-state: paused;
-webkit-animation-play-state: paused;
}
@keyframes move {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(-1740px);
}
}
.con img {
float: left;
width: 580px;
height: 200px;
}
.content_left input {
display: none;
}
.line {
width: 1500px;
_zoom: 1;
position: relative;
text-align: center;
}
.line span::after {
content: "";
width: 600px;
border-top: 1px solid #333;
height: 1px;
background: #333;
position: absolute;
right: 0;
top: 10px;
}
.line