4-3个人程序源码，提供给各位参考！

4-3个人程序源码，提供给各位参考！

4-3个人程序源码，提供给各位参考！（最开始我也不会写，研究了很久别人的源码，才写出来自己这份错漏百出的大作业）

html文件


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!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文件


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
/*设置页面的边框、内边距为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
我还差得多 2020-08-13
源自：前端油画商城案例   4-3 项目作业
63
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

1回答
好帮手慕小班 2020-08-13 11:19:02

同学你好，同学的代码完成的不错，题目要求的实现效果也完成了，很棒~

继续加油  祝：学习愉快~

0
收起回答
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

为什么没有编程练习的参考答案
33 0 6
能不能参考一下
8 0 3
老师，请问有所有的源代码吗，包括购物车和个人中心的
0 0 3
6-2自由编程的源代码
27 0 3
已经完成作业，能不能给我一份答案让我看看老师的思路
9 0 4

登录后可查看更多问答，登录/注册

2. 从网页搭建入门JavaWeb
  • 参与学习           人
  • 提交作业       676    份
  • 解答问题       9666    个

本阶段将从前端网页搭建入手，到Java Web基础，前后端结合助你完成Java Web小白的蜕变！

了解课程

本课精华内容

问答 作业

4-3个人程序源码，提供给各位参考！

63 1

2-4 编程练习

22 1

text-align和direction有什么区别

13 1

交作业交作业交作业

225 2

是不是只有在JS语言中局部变量的定义才可以放在else语句中

24 1

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师
插入代码