HTML——页面制作：career builder
效果展示：
代码实现过程中的收获：
- 熟悉HTML中各种标签的应用；
- 熟悉了float+position设置制作层叠效果。
顶部HTML代码：
顶部CSS代码：
#top #topImg #topImg1{
margin-left: 80px;
position: absolute;
}
#top{
background-color: #07cbc9;
height: 50px;
width: 100%;
position: fixed;
z-index: 100;
}
#top #topList ul{
list-style: none;
}
#top #topList ul li{
float:right;
font-size: 10px;
margin-right: 20px;
color: white;
line-height: 50px;
font-weight: 700;
}
#top #topList{
margin-right: 20px;
height:50px;
}
#top #topList ul li:hover{
background-color: black;
}
Banner区HTML
Banner区CSS
#banner #bannerImg #bannerImg1{
width: 100%;
height: 400px;
float: left;
position:absolute;
z-index: -30;
}
#banner{
height: 450px;
padding-top: 50px;
}
#banner #bannerMessage{
position: absolute;
width:500px;
left:50%;
margin-left: -250px;
}
#banner #bannerMessage input[type="text"]{
width: 500px;
height: 30px;
background: none;
border: 0.5px solid white;
color: white;
margin-top: 30px;
padding-left: 5px;
box-sizing: border-box;
}
#banner #bannerMessage #aboutText4{
width: 500px;
height: 80px;
background: none;
border: 0.5px solid white;
color: white;
margin-top: 30px;
padding-left: 5px;
box-sizing: border-box;
padding: 5px;
}
#banner #bannerMessage #aboutButton1{
width: 180px;
height: 30px;
background: none;
border: 0.5px solid white;
color: white;
margin-top:30px;
margin-left:160px;
}
#banner #bannerMessage input[type="text"]:hover{
border-color: #07cbc9;
}
#banner #bannerMessage #aboutText4:hover{
border-color: #07cbc9;
}
#banner #bannerMessage input[type="text"]:focus{
border-color: #07cbc9;
}
#banner #bannerMessage #aboutButton1:hover{
background-color: #07cbc9;
border-color: #07cbc9;
}
About区HTML
ABOUT
华中科技大学是国家教育部直属重点综合性大学，由原华中理工大学、同济医科大学、武汉城市建设学院于2000年5月26日合并成立，是国家“211工程”重点建设和“985工程”建设高校之一，是首批“双一流”建设高校。学校校园占地7000余亩，园内树木葱茏，碧草如茵，环境优雅，景色秀丽，绿化覆盖率72%，被誉为“森林式大学”。
A WORD
ABOUT US
-
-
-
Library
Lorem Ipsum is simply dummy text of the printing and typesetting industry
Loren Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-
Library
Lorem Ipsum is simply dummy text of the printing and typesetting industry
Loren Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-
Library
Lorem Ipsum is simply dummy text of the printing and typesetting industry
Loren Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-
Library
Lorem Ipsum is simply dummy text of the printing and typesetting industry
Loren Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.
About区CSS
#About{
height:1400px;
width: 100%;
}
h1{
text-align: center;
}
#About #fenge{
width:50px;
border-top: 2px solid;
border-color: #07cbc9;
margin: 10px auto;
}
#About #intro{
width: 280px;
font-size:0.5em;
margin: 0 auto;
text-align: center;
line-height: 15px;
}
#About #upAbout{
height: 300px;
width:650px;
margin: 30px auto;
}
#About #upAbout #up-left{
float:left;
position: relative;
z-index: 30;
}
#About #upAbout #up-left #title{
width:100px;
text-align: center;
}
#About #upAbout #up-left #content{
width:185px;
font-size:0.5em;
line-height: 15px;
margin: 10px;
height:150px;
border: 0.5px solid gray;
padding-top: 20px;
padding-left:10px;
padding-right: 10px;
text-align: justify;
background-color: white;
/*opacity: 0.5*/
background-color: rgba(255, 255, 255, 0.5);
}
#About #upAbout #up-left #content #aboutButton{
margin-top: 20px;
padding: 5px;
color: white;
background-color: black;
border: 0.5px solid black;
}
#About #upAbout #up-left #content #aboutButton:hover{
color:black;
background-color: white;
}
#About #upAbout #up-middle img{
float: left;
position: relative;
height:250px;
margin-left: -100px;
}
#About #upAbout #up-right{
position: relative;
float:right;
}
#About #upAbout #up-right ul li{
list-style: none;
border: 1.5px solid #07cbc9;
padding: 10px;
margin-right: 20px;
margin-top: 0px;
margin-bottom: 30px;
height:50px;
text-align: center;
width: 80px;
}
#About #upAbout #up-right ul li .big{
font-weight:700;
}
#About #upAbout #up-right ul li .fengexian{
width:30px;
border-top: 2px solid #07cbc9;
margin: 5px auto;
}
#About #upAbout #up-right ul li .small{
font-size:0.6em;
font-weight:700;
}
#About .c{
width: 100%;
overflow: hidden;
margin-top: 80px;
}
#bout .c img{
width:100%;
}
#About .c li{
float: left;
width: 25%;
height: 400px;
background-color: #07cbc9;
list-style: none;
}
#About .c li h3{
margin:30px 20px;
font-size: 30px;
font-weight: inherit;
color: white;
}
#About .c li .p1{
margin:30px 20px;
font-size: 18px;
font-weight: inherit;
color: #fbf7f7;
}
#About .c li .p2{
margin:30px 20px;
font-size: 14px;
font-weight: inherit;
color: #e0dcdc;
}
#About .c li .p3{
text-align: center;
}
#About .c li .p3 input{
background-color: black;
color: white;
width: 120px;
height: 50px;
margin-top: 28px;
border:0;
}
#About .c li .p3 input:hover{
background: none;
color: black;
border:1px solid black;
}
Galley/Foot区
GALLERY
华中科技大学是国家教育部直属重点综合性大学，由原华中理工大学、同济医科大学、武汉城市建设学院于2000年5月26日合并成立，是国家“211工程”重点建设和“985工程”建设高校之一，是首批“双一流”建设高校。学校校园占地7000余亩，园内树木葱茏，碧草如茵，环境优雅，景色秀丽，绿化覆盖率72%，被誉为“森林式大学”。
-
SCIENCELAB
-
INDOORGYM
-
TRANS
-
KIDSROM
-
CLASSROOM
-
PLAYGROUND
@2016 imooc.com 京ICP备13046642号
Galley/Foot CSS
#GALLERY{
height: 750px;
width: 100%;
}
#GALLERY #fenge2{
width:50px;
border-top: 2px solid;
border-color: #07cbc9;
margin: 10px auto;
}
#GALLERY #intro2{
width: 280px;
font-size:0.5em;
margin: 0 auto;
text-align: center;
line-height: 15px;
}
#GALLERY #list2{
margin: 0 auto;
}
#GALLERY #list2 ul{
width: 80%;
margin:20px auto;
position: relative;
}
#GALLERY #list2 ul li{
float:left;
margin: 10px;
list-style: none;
width: 30%;
}
#GALLERY #list2 ul li img{
width: 100%;
}
#GALLERY #list2 .listtitle{
background-color: black;
color: white;
line-height: 2em;
margin-top: -5px;
padding-left: 5px;
}
#foot{
line-height: 3em;
color:white;
background-color: #07cbc9;
text-align: center;
}