Skip to content

Commit 5304ab4

Browse files
164321595renbaoshuo
164321595
and
renbaoshuo
authored
102400232 - work2 & work3 (#103)
--------- Co-authored-by: Baoshuo <[email protected]>
1 parent 9f3d056 commit 5304ab4

File tree

17 files changed

+940
-0
lines changed

17 files changed

+940
-0
lines changed

‎work1/work1 by Fzu_zwl/all.jpeg‎

51.6 KB
Loading

‎work1/work1 by Fzu_zwl/haimianbaobao.jpeg‎

31.7 KB
Loading

‎work1/work1 by Fzu_zwl/paidaxing.jpeg‎

25.1 KB
Loading

‎work1/work1 by Fzu_zwl/work.html‎

Lines changed: 289 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,289 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>海绵宝宝-张伟林</title>
7+
<style>
8+
body{
9+
background-color: #dcf3ff;
10+
}
11+
/* 第一部分 */
12+
.nav{
13+
display: flex;
14+
justify-content: space-around;
15+
align-items: center;
16+
height: 50px;
17+
/* background-color: #333; */
18+
19+
font-size: 20px;
20+
}
21+
.nav-title{
22+
float: left;
23+
width: 10%;
24+
line-height: 1.75em;
25+
text-align: center;
26+
cursor: pointer;
27+
}
28+
.nav-title:hover{
29+
background-color: #6495ED;
30+
border-radius: 20px;
31+
transform: scale(1.1);
32+
}
33+
34+
35+
36+
/* 第二部分 */
37+
.firsttext{
38+
border:#BAD6EE 3px solid;
39+
border-radius: 20px;
40+
/* background-color: #5c6cf9; */
41+
margin-top: 20px;
42+
margin-bottom: 20px;
43+
width: 80%;
44+
height: 180px;
45+
display: flex;
46+
justify-content: space-between;
47+
align-items: center;
48+
49+
}
50+
.firstall{
51+
display: flex;
52+
justify-content: center;
53+
align-items: center;
54+
height:200px;
55+
}
56+
.content{
57+
font-size: 20px;
58+
59+
}
60+
/* 第三部分 */
61+
.secondblock{
62+
height: 400px;
63+
/* background-color: #714ec9; */
64+
display: flex;
65+
justify-content: space-around;
66+
align-items: center;
67+
}
68+
.hm{
69+
width: 200px;
70+
height: 350px;
71+
/* background-color: #f0e24e; */
72+
.hmtext{
73+
74+
height: 150px;
75+
color: white;
76+
margin-bottom: 30px;
77+
text-align: center;
78+
background-color: #face3a;
79+
border-radius: 10px;}
80+
}
81+
.pdx{
82+
width: 200px;
83+
height: 350px;
84+
/* background-color: #f69f48; */
85+
.pdxtext{
86+
87+
height: 150px;
88+
margin-bottom:30px ;
89+
color: white;
90+
text-align: center;
91+
background-color: #cf8117;
92+
border-radius: 10px;}
93+
}
94+
.zyg{
95+
width: 200px;
96+
height: 350px;
97+
/* background-color: #5c6cf9; */
98+
.zygtext{
99+
100+
height: 150px;
101+
color: white;
102+
margin-bottom: 30px;
103+
text-align: center;
104+
background-color: #37669c;
105+
border-radius: 10px;}
106+
}
107+
.img:hover{
108+
transform: scale(1.1);
109+
cursor: pointer;
110+
}
111+
/* 第四部分 */
112+
.table{
113+
display: flex;
114+
justify-content: center;
115+
align-items: center;
116+
margin-top: 50px;
117+
}
118+
.table1{
119+
border-collapse: collapse;}
120+
.table tbody{
121+
text-align: center;
122+
}
123+
.line1{
124+
background-color: #99CCFF;
125+
}
126+
.line2{
127+
background-color: #87CEEB;
128+
}
129+
.line3{
130+
background-color: #6699CC;
131+
}
132+
.table tr:first-child .line1 {
133+
border-top-left-radius: 8px;
134+
}
135+
.table tr:first-child .line3 {
136+
border-top-right-radius: 8px;
137+
}
138+
.table tr:nth-child(4) .line1 {
139+
border-bottom-left-radius: 8px;
140+
}
141+
.table tr:nth-child(4) .line3 {
142+
border-bottom-right-radius: 8px;
143+
}
144+
/*第五部分*/
145+
.suggest{
146+
display: flex;
147+
justify-content: center;
148+
align-items: center;
149+
margin-top: 50px;
150+
height: 400px;
151+
152+
font-size: 20px;
153+
.suggesttext{
154+
background-color: #dcf3ff;
155+
width: 1200px;
156+
height: 300px;
157+
border-radius: 10px;
158+
border: 1px solid #B2E1F6;}
159+
}
160+
.submit{
161+
display: flex;
162+
justify-content:right;
163+
align-items: right;
164+
165+
height: 400px;
166+
width: 1150px;
167+
.submitbutton{
168+
background-color:#6495ED;
169+
color: white;
170+
border: none;
171+
width: 150px;
172+
height: 70px;
173+
border-radius: 10px;}
174+
}
175+
.suggestall{
176+
/* background-color: #face3a; */
177+
display: flex;
178+
flex-direction: column;
179+
justify-content: space-around;
180+
align-items: center;
181+
transition: 0.5s;
182+
}
183+
.suggesttext:hover{
184+
background-color: #B2E1F6;
185+
}
186+
.submitbutton{
187+
transition: 0.5s;
188+
}
189+
.submitbutton:hover{
190+
background-color: #37669c;
191+
cursor: pointer;
192+
}
193+
194+
</style>
195+
196+
</head>
197+
198+
<body>
199+
200+
<!-- 第一部分 -->
201+
<div class="nav">
202+
<span class="nav-title"><a href="#A">人物介绍</a></span>
203+
<span class ="nav-title"><a href="#B">作品系列</a></span>
204+
<span class="nav-title"><a href="#C">我们相关</a></span>
205+
</div>
206+
<!-- 第二部分 -->
207+
<div class="firstall" id="A">
208+
<div class="firsttext">
209+
<img src="all.jpeg "alt="all" style="border-radius: 100px;width: 200px;height: 150px; margin: 20px;">
210+
211+
<br><span class="content" >海绵宝宝是一只黄色的方形海绵，住在太平洋深处风光优美无人知晓的比基尼海滩水域下。哪里是一个没有忧虑的世界，住着一群快乐的海洋生物。</span>
212+
213+
</div>
214+
</div>
215+
<!-- 第三部分 -->
216+
<div class="secondblock" id="A">
217+
<div class="hm">
218+
<div class="hmtext">
219+
<h2 >海绵宝宝</h2>
220+
<p>是动画片《海绵宝宝》系列中的主角，超级活泼可爱，给人带来快乐。</p>
221+
</div>
222+
223+
<img ; src="haimianbaobao.jpeg" alt="hm" class="img" style="width: 200px;height: 200px;border-radius: 10px;">
224+
</div>
225+
<div class="pdx">
226+
<div class="pdxtext">
227+
<h2>派大星</h2>
228+
<p>粉红色的海星，很可爱，和海绵宝宝交情最好。</p>
229+
</div>
230+
<img src="paidaxing.jpeg" alt="pdx" class="img" style="width: 200px;height: 200px; border-radius: 10px;">
231+
232+
</div>
233+
<div class="zyg">
234+
<div class="zygtext">
235+
<h2>章鱼哥</h2>
236+
<p>大鼻子章鱼，对艺术有执着的追求，本质上是一个善良且有正义感的章鱼。</p>
237+
</div>
238+
<img margin: 100px; src="zhangyuge.jpeg" alt="zyg" class="img" style="width: 200px;height: 200px;border-radius: 10px;">
239+
</div>
240+
</div>
241+
<!-- 第四部分 -->
242+
<div class="table" id="B">
243+
<table width="80%" class="table1">
244+
<thead>
245+
<th width="50%">系列</th>
246+
<th width="30%">日期</th>
247+
<th witdh="20%">集数</th>
248+
</thead>
249+
<tbody>
250+
<tr>
251+
<td class="line1">海绵宝宝</td>
252+
<td class="line2">2008年10月23日</td>
253+
<td class="line3">60集</td>
254+
</tr>
255+
<tr>
256+
<td class="line1">海绵宝宝</td>
257+
<td class="line2">2008年10月23日</td>
258+
<td class="line3">60集</td>
259+
</tr>
260+
<tr>
261+
<td class="line1">海绵宝宝</td>
262+
<td class="line2">2008年10月23日</td>
263+
<td class="line3">60集</td>
264+
</tr>
265+
<tr>
266+
<td class="line1">海绵宝宝</td>
267+
<td class="line2">2008年10月23日</td>
268+
<td class="line3">60集</td>
269+
</tr>
270+
</tbody>
271+
272+
</table>
273+
</div>
274+
<!-- 第五部分 -->
275+
<div class="suggestall" id="C">
276+
<form action="#">
277+
<div class="suggestall">
278+
<div class="suggest">
279+
<textarea placeholder="对我们的建议" class="suggesttext"></textarea>
280+
</div>
281+
<div class="submit">
282+
<input type="submit" value="提交" class="submitbutton">
283+
</div>
284+
</div>
285+
</form>
286+
</div>
287+
</body>
288+
</html>
289+
<head>

‎work1/work1 by Fzu_zwl/zhangyuge.jpeg‎

42.9 KB
Loading

‎work2/Fzu_zwl/demo1.gif‎

248 KB
Loading

0 commit comments

Comments
 (0)