慕课网——CSS作业练习题
作业地址：点击打开链接
html：
css慕课网作业
ABOUT
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s
A WORD
ABOUT US
Praesent dignissim viverra est,sed
bibendum ligula congue non.Sed ac nisl
et felis gravida commodo?Suspendisse
eget ullamcorper ipsum.Suspendisse
diam amet
70000
Students
600
Faculty
Library
Lorem Ipsum is simply dummy text of the
printing and typesetting industry
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unkonw printer tool a galley of type and scrambled it to make a type specimen book.
Computer Lab
Lorem Ipsum is simply dummy text of the
printing and typesetting industry
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unkonw printer tool a galley of type and scrambled it to make a type specimen book.
Conference Hall
Lorem Ipsum is simply dummy text of the
printing and typesetting industry
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unkonw printer tool a galley of type and scrambled it to make a type specimen book.
Play Ground
Lorem Ipsum is simply dummy text of the
printing and typesetting industry
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unkonw printer tool a galley of type and scrambled it to make a type specimen book.
GALLERY
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s
SCIENCE LAB
INDOOR STADIUM
TRANSPORTATION
KIDS ROOM
MEDITATION CLASSES
KIDS PLAYGROUND
CSS：
/*css reset*/
* {
margin: 0;
padding: 0;
font-family: "Microsoft YaHei UI";
list-style: none;
}
a {
text-decoration: none;
color: #fff;
}
/*通用样式设置*/
.i {
display: block;
height: 3px;
width: 40px;
background-color: #07cbc9;
margin: 0 auto;
text-align: center;
margin-bottom: 15px;
}
/*top样式*/
.top {
width: 100%;
height: 80px;
background: #07cbc9;
position: fixed;
top: 0;
left: 0;
z-index: 9;
}
.top .logo {
width: 250px;
height: 60px;
position: absolute;
top: 50%;
margin-top: -30px;
margin-left: 80px;
}
.top .nav {
height: 80px;
float: right;
}
.top .nav ul {
margin-right: 80px;
}
.top .nav li {
float: left;
width: 80px;
line-height: 80px;
font-weight: bold;
text-align: center;
padding-left: 5px;
cursor: pointer;
}
.top .nav li:hover {
background: #333;
}
/*banner样式*/
.banner {
height: 500px;
width: 100%;
position: relative;
margin-top: 80px;
}
.banner img {
height: 500px;
width: 100%;
position: relative;
}
.banner .topLayer {
background-color: #000;
opacity: 0.5;
z-index: 1;
position: absolute;
top: 0;
height: 500px;
width: 100%;
}
.banner .btn {
width: 400px;
height: 300px;
position: absolute;
top: 50%;
margin-top: -150px;
left: 50%;
margin-left: -200px;
z-index: 2;
}
.banner .btn form {
width: 400px;
height: 300px;
}
.banner .btn input {
width: 398px;
height: 30px;
background: transparent;
margin-bottom: 15px;
outline: none;
border-color: #ccc;
color: #fff;
}
.banner .btn textarea {
width: 100%;
height: 80px;
background: transparent;
margin-bottom: 20px;
outline: none;
border-color: #ccc;
color: #fff;
}
.banner .btn button {
display: block;
margin: 0 auto;
width: 120px;
height: 40px;
text-align: center;
background: transparent;
outline: none;
border-color: #ccc;
color: #fff;
cursor: pointer;
}
.banner .btn input:hover,
.banner .btn textarea:hover {
border-color: #07cbc9;
}
.banner .btn button:hover {
background-color: #07cbc9;
border: none;
}
/*about样式*/
.about {
position: relative;
height: 1000px;
}
.about .about-top {
height: 500px;
background: #fff;
position: relative;
}
.about .about-top-content {
width: 800px;
height: 400px;
position: absolute;
top: 50%;
margin-top: -200px;
left: 50%;
margin-left: -400px;
}
.about .about-top-content .about {
width: 100%;
height: 50px;
text-align: center;
font-size: 40px;
font-weight: bold;
}
.about .about-top-content .text1 {
width: 400px;
height: 80px;
text-align: center;
font-size: 12px;
margin: 0 auto;
}
.about .about-top-content .word {
display: block;
font-size: 30px;
margin: 0 10px;
}
.about .about-top-content .text2 {
position: absolute;
width: 300px;
height: 160px;
background: rgba(255,255,255,.3);
border: 1px #ccc solid;
z-index: 9;
}
.about .about-top-content .text2 .text2-content {
margin: 15px;
}
.about .about-top-content .text2 .text2-content p {
font-size: 14px;
}
.about .about-top-content .text2 button {
width: 80px;
height: 30px;
color: #fff;
background-color: #000;
border: none;
display: block;
margin: 10px 10px 0 0;
cursor: pointer;
}
.about .about-top-content .text2 button:hover {
background-color: #fff;
color: #000;
border: 1px #000 solid;
}
.about .about-top-content .pic {
width: 400px;
height: 260px;
position: absolute;
bottom: 0px;
left: 200px;
/*background: url(../img/bb3.jpg) no-repeat center;*/
}
.about .about-top-content img {
width: 400px;
height: 260px;
}
.about .about-top-content .student,
.about .about-top-content .faculty {
border: 1px #07cbc9 solid;
width: 160px;
height: 100px;
position: absolute;
right: 0;
top: 140px;
text-align: center;
}
.about .about-top-content .faculty {
top: 260px;
}
.about .about-top-content .tit {
font-size: 30px;
font-weight: bold;
display: block;
margin: 10px 0 5px;
}
/*about 下半部分样式*/
.about .about-bottom {
width: 100%;
height: 500px;
}
.about-item {
float: left;
height: 250px;
width: 25%;
background-color: #07cbc9;
}
.about .about-bottom .item1 {
background: url(../img/b1.jpg) no-repeat center;
}
.about .about-bottom .item3 {
background: url(../img/b2.jpg) no-repeat center;
}
.about .about-bottom .item6 {
background: url(../img/b3.jpg) no-repeat center;
}
.about .about-bottom .item8 {
background: url(../img/b4.jpg) no-repeat center;
}
.about-bottom .about-item-content {
margin: 25px;
}
.about-bottom .about-item-content .title {
color: #fff;
font-size: 20px;
}
.about-bottom .about-item-content .content-1 {
color: #fff;
font-size: 12px;
margin-top: 10px;
}
.about-bottom .about-item-content .content-2 {
color: #fff;
font-size: 10px;
margin-top: 10px;
}
.about-bottom .about-item-content button {
width: 80px;
height: 30px;
color: #fff;
background-color: #000;
border: none;
display: block;
margin: 15px auto 0 auto;
cursor: pointer;
}
.about-bottom .about-item-content button:hover {
background-color: #07cbc9;
border: 1px #000 solid;
}
/*gallery样式*/
.gallery {
width: 100%;
height: 600px;
background: #fff;
position: relative;
}
.gallery .gallery-top .about {
width: 100%;
height: 50px;
text-align: center;
font-size: 40px;
font-weight: bold;
margin-top: 40px;
}
.gallery .gallery-top .text1 {
width: 400px;
height: 80px;
text-align: center;
font-size: 12px;
margin: 0 auto;
}
.gallery .gallery-bottom {
width: 806px;
height: 400px;
margin: 0 auto;
}
.gallery .gallery-bottom .gallery-bottom-item {
width: 246px;
height: 180px;
margin: 10px;
float: left;
position: relative;
}
.gallery .gallery-bottom .gallery-bottom-top {
width: 100%;
height: 40px;
line-height: 40px;
background-color: #333;
position: absolute;
bottom: 0;
color: #fff;
}
.gallery .gallery-bottom .gallery-pic {
width: 100%;
height: 140px;
}
.gallery .gallery-bottom .gallery-pic img {
width: 100%;
height: 140px;
}
/*footer样式*/
.footer {
height: 80px;
line-height: 80px;
text-align: center;
background: #07cbc9;
color: #fff;
}