4-3个人程序源码，提供给各位参考！
4-3个人程序源码，提供给各位参考！（最开始我也不会写，研究了很久别人的源码，才写出来自己这份错漏百出的大作业）
html文件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>前端页面</title> <link type="text/css" rel="stylesheet" href="css/content.css"> </head> <body> <!--页眉和banner区设置--> <div class="top"> <div class="top_top"> <a> <img src="images/logo.png"></a> <ul> <li><a href="###">CONTACT</a></li> <li><a href="###">EVENTS</a></li> <li><a href="###">FAULTY</a></li> <li><a href="###">GALLERY</a></li> <li><a href="###">ABOUT</a></li> <li><a href="###">HOME</a></li> </ul> </div> <div class="top_banner"> <div class="Mask"></div> <img src="images/banner3.jpg"> <div class="text_box"> <ul> <li> <input type="text" name="Name" placeholder="Your Name"></li> <li><input type="text" name="Phone" placeholder="Your Phone"></li> <li><input type="text" name="Email" placeholder="Your Email"></li> <li><textarea name="Comment">Writter Your Comment Here </textarea></li> <li><input type="submit" value="SEND MESSAGE" style="cursor: pointer"></li> </ul> </div> </div> </div> <!--about和gallery区设置--> <div class="middle"> <!-- about上半区域--> <div class="middle_top"> <div class="middle_top_about_upper"> <h1>ABOUT</h1> <P style="color: #07cbc9; font-weight: bold" >——</P> <p style="font-size: 10px;line-height:20px">jjasopqn nmqiipirmnc mznbbj wuqu <br>er iifhn dmdhusj dnj dhdg dfdffd<br> gd gdafa dbcj cj</p> </div> <div class="middle_top_about_lower"> <div class="middle_top_about_lower_left"> <div class="middle_top_about_lower_left_upper" style="margin-left: 10px"> <h2>A WORD</h2> <h2>ABOUT US</h2> </div> <div class="middle_top_about_lower_left_lower"> <p>CareerBuilder is a global, end-to-end human capital solutions company focused on helping employers find, hire and manage great talent.</p> <input type="button" value="EXPLORE"style="cursor: pointer"> </div> </div> <div class="middle_top_about_lower_center"> <img src="images/bb3.jpg"> </div> <div class="middle_top_about_lower_right"> <div> <h3>70000</h3> <P style="color: #07cbc9; font-weight: bold" >——</P> <p>Students</p> </div> <div> <h3>6000</h3> <P style="color: #07cbc9; font-weight: bold" >——</P> <p>Faculty</p> </div> </div> </div> </div> <!-- about多图区域--> <div class="middle_middle"> <ul> <li><img src="images/b1.jpg"></li> <li> <div> <p class="p1">Library</p><p class="p2">CareerBuilder is a global, end-to-end human capital solutions company focused on helping employers find</p><p class="p3">CareerBuilder is a global,end-to-end human capital solutions company focused on helping employers find, hire and manage great talent. CareerBuilder is a global,end-to-end human capital solutions company focused on helping employers find, hire and manage great talent.</p> <a href="#"><input type="button" name="" value="EXPLORE" style="cursor: pointer"></a> </div> </li> <li><img src="images/b2.jpg"></li> <li> <div> <p class="p1">Computer Lab</p><p class="p2">CareerBuilder is a global, end-to-end human capital solutions company focused on helping employers find</p><p class="p3">CareerBuilder is a global,end-to-end human capital solutions company focused on helping employers find, hire and manage great talent. CareerBuilder is a global,end-to-end human capital solutions company focused on helping employers find, hire and manage great talent.</p> <a href="#"><input type="button" name="" value="EXPLORE" style="cursor: pointer"></a> </div> </li> <li> <div > <p class="p1" >Conference Hall</p><p class="p2">CareerBuilder is a global, end-to-end human capital solutions company focused on helping employers find</p><p class="p3">CareerBuilder is a global,end-to-end human capital solutions company focused on helping employers find, hire and manage great talent. CareerBuilder is a global,end-to-end human capital solutions company focused on helping employers find, hire and manage great talent.</p> <a href="#"><input type="button" name="" value="EXPLORE" style="cursor: pointer"></a> </div> </li> <li><img src="images/b3.jpg"></li> <li> <div> <p class="p1">Play Ground</p><p class="p2">CareerBuilder is a global, end-to-end human capital solutions company focused on helping employers find</p><p class="p3">CareerBuilder is a global,end-to-end human capital solutions company focused on helping employers find, hire and manage great talent. CareerBuilder is a global,end-to-end human capital solutions company focused on helping employers find, hire and manage great talent.</p> <a href="#"><input type="button" name="" value="EXPLORE" style="cursor: pointer"></a> </div> </li> <li><img src="images/b4.jpg"></li> </ul> </div> <!-- gallery区--> <div class="middle_footer"> <!-- gallery文字区域--> <div class="middle_footer_upper"> <h1>GALLERY</h1> <P style="color: #07cbc9; font-weight: bold" >——</P> <p style="font-size: 10px;line-height:20px">CareerBuilder is a global, end-to-end human capital solutions company focused on helping employers find</p> </div> <!-- gallery区多图区域 --> <div class="middle_footer_lower"> <ul> <li><img src="images/03-01.jpg"><div>SCIENCE LAB</div></li> <li><img src="images/03-02.jpg"><div>INDOOR STADIUM</div></li> <li><img src="images/03-03.jpg"><div>TIANSPORTATION</div></li> <li><img src="images/03-04.jpg"><div>KIDS ROOM</div></li> <li><img src="images/03-05.jpg"><div>MEDITATION CLASSES</div></li> <li><img src="images/03-06.jpg"><div>KIDS PALY GROUND</div></li> </ul> </div> </div> </div> <!--页脚区设置--> <div class="footer"> <P>@2016 imooc.com 京ICP备1304667号</P> </div> </body> </html>
css文件
/*设置页面的边框、内边距为0 ，字体为Microsoft YaHei UI*/
*{
margin: 0;
padding: 0;
font-family: "Microsoft YaHei UI";
}
/*去除超链接的下划线，改变字体颜色为黑色*/
a{
text-decoration: none;
color: black;
}
/*改变li的标记样式为无*/
li{
list-style: none;
}
/*设置页面fixe 宽度100% 背景色#07cbc9 z-index为100*/
.top_top{
width:100%;
/*height: 55px;*/
position: fixed;
background-color: #07cbc9;
z-index: 100;
}
/*设置图片左缩进80px 相对定位 上部缩进5px*/
.top_top img{
margin-left: 80px;
position: relative;
top: 5px;
/*margin-top: -24px;*/
}
/*menu菜单右浮动 右缩进80px*/
.top_top ul{
float: right;
margin-right: 80px;
}
.top_top ul li{
float: right;
list-style: none;
}
/*设置<a>为块级元素 行高为55px */
.top_top ul li a{
display: block;
color: white;
line-height: 55px;
margin-right: 20px;
}
/*设置鼠标在menu时的浮动效果*/
.top_top ul li a:hover{
background-color: black;
color: white;
}
/*html中banner区设置*/
.top .top_banner{
width: 100%;
position: relative;
/*margin-top: 55px;*/
height: 555px;
font-size: 0;
}
/*图片上的半透明遮罩*/
.top_banner .Mask{
background-color: black;
opacity: 0.4;
height: 500px;
width: 100%;
position: absolute;
top:54px;
/*多缩进1px 防着页眉和banner中的白线出现*/
z-index: 30;
/*设置z_index为30，方便页眉在banner上显示*/
}
.top_banner img{
margin-top: 54px;
height: 500px;
width: 100%;
}
/*对banner上的文本框进行设置*/
.top_banner .text_box{
position: relative;
/*margin: 0 auto;*/
text-align: center;
top:-500px;
z-index:50;
/*background-color: rgba(255,255,255,0.4);*/
}
.top_banner .text_box ul li{
margin-top: 30px;
}
/*对banner图片上的文本输入进行相关设置*/
.top_banner .text_box ul li input[type="text"]{
background-color: transparent;
/*设置文本框的透明效果*/
border-style: solid;
padding: 0;
width: 20%;
height: 25px;
color: rgba(255,255,255,0.4);
/*line-height: 25px;*/
/*text-align: center;*/
}
.top_banner .text_box ul li textarea{
background-color: transparent;
border-style: solid;
color: rgba(255,255,255,0.4);
width: 20%;
height: 60px;
border-width: 2px;
/*line-height: 25px;*/
/*text-align: center;*/
}
/*对banner区submit按钮进行相关设置*/
.top_banner .text_box ul li input[type="submit"]{
background-color: transparent;
/*背景透明*/
border-style: solid;
color: rgba(255,255,255,0.4);
padding: 8px;
}
/*对banner区文本框、按钮的浮动效果进行设置*/
/*鼠标在文本框上浮动时，文本框变色 */
.top_banner .text_box ul li input:hover{
border-color: #07cbc9;
}
.top_banner .text_box ul li textarea:hover{
border-color: #07cbc9;
}
/*鼠标在submit上浮动时，submit背景色为#07cbc9 无边框 字体为白色*/
.top_banner .text_box ul li input[type="submit"]:hover{
border-style: none;
background-color: #07cbc9;
color: white;
}
/*鼠标键入文本框、点击按钮，变色*/
.top_banner .text_box ul li input:focus{
border-color: black;
}
.top_banner .text_box ul li textarea:focus{
border-color: black;
}
.top_banner .text_box ul li input[type="submit"]:focus{
border-style: none;
}
/*middle_top设置*/
.middle_top_about_upper{
margin: 30px auto;
text-align: center;
height: 150px;
width: 50%;
}
.middle_top_about_lower{
position: relative;
top:-30px;
height: 350px;
}
.middle_top_about_lower_left{
position: relative;
/*float: left;*/
width: 300px;
margin: 0 auto;
left: -270px;
height: 300px;
z-index: 20;
}
.middle_top_about_lower_left_lower{
background-color: rgba(255,255,255,0.4);
/*背景透明*/
padding: 15px;
border: 1px solid #C0C0C0;
line-height: 20px;
}
.middle_top_about_lower_left_lower input{
margin: 20px auto;
padding: 5px;
color: white;
background-color: black;
border-style: hidden;
}
/*about区按钮悬浮效果*/
.middle_top_about_lower_left_lower input:hover{
color: black;
background-color: white;
border: 1px solid black;
}
.middle_top_about_lower_center{
position: relative;
width: 500px;
margin: 0 auto;
text-align: center;
top:-300px
}
.middle_top_about_lower_center img{
height: 300px;
/*width: 360px;*/
}
.middle_top_about_lower_right{
position: relative;
top: -550px;
left: 340px;
text-align: center;
width: 140px;
margin: 0 auto;
}
.middle_top_about_lower_right div{
border: 1px solid #07cbc9;
padding: 10px;
margin-bottom: 40px;
}
/*about下半部和gallery设置*/
.middle_middle{
height: 740px;
}
.middle_middle ul li{
width:25%;
height: 370px;
float: left;
overflow: hidden;
}
.middle_middle ul li img{
width: 100%;
height: 100%;
}
.middle_middle ul li div{
padding: 15px;
height: 370px;
color: white;
background-color: #07cbc9;
}
.middle_middle ul li div .p1{
font-size: 20px;
padding-bottom: 10px;
line-height: 30px;
}
.middle_middle ul li div .p2{
font-size: 15px;
padding-bottom: 10px;
line-height: 25px;
}.middle_middle ul li div .p3{
font-size: 12px;
padding-bottom: 10px;
line-height: 20px;
}
.middle_middle ul li div a{
display: block;
text-align: center;
margin-top: 30px;
}
.middle_middle ul li div input{
color: white;
background-color: black;
padding: 10px;
border-style: hidden;
}
.middle_middle ul li div input:hover{
background-color: rgba(255,255,255,0);
color: black;
border: 1px solid black;
}
/**/
.middle_footer_upper{
position: relative;
height: 100px;
width: 300px;
text-align: center;
margin: 30px auto;
}
.middle_footer_lower{
/*text-align: center;*/
width: 1140px;
height: 650px;
margin: 0 auto;
overflow: hidden;
}
.middle_footer_lower ul li{
float: left;
position: relative;
right: -20px;
margin-bottom: 30px;
margin-right: 20px;
font-size: 0;
}
.middle_footer_lower ul li div{
/*position: absolute;*/
height: 50px;
color: white;
line-height: 50px;
background-color: black;
font-size: 15px;
text-indent: 2em;
}
.footer{
margin-top: 20px;
background-color: #07cbc9;
text-align: center;
height: 50px;
line-height: 50px;
}最后给各位在作业挣扎的同学一点建议：多用position，少用float。懂得margin和top、right、left、bottom的区别。知道text-align：center和margin：0 auto；的区别。一定要分清楚各div（ul和li）块、行元素的层级关系，懂得使用浏览器的F12
63
收起
正在回答 回答被采纳积分+1
2. 从网页搭建入门JavaWeb
- 参与学习 人
- 提交作业 676 份
- 解答问题 9666 个
本阶段将从前端网页搭建入手，到Java Web基础，前后端结合助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星