-
Notifications
You must be signed in to change notification settings - Fork 1
/
practice04.html
179 lines (159 loc) · 4.44 KB
/
practice04.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.mainPage {
display: flex;
}
.leftPage {
width: 30%;
background-color: #dcdcdc;
padding: 10px;
}
.leftForm img{
width: 100%;
}
.lefticon{
display: flex;
}
.iconAndbell{
display: flex;
justify-content: flex-end;
}
.icon img{
width: 35px;
height: 35px;
}
.form{
display: flex;
}
.items{
margin: 10px;
}
.number{
display: flex;
justify-content: center;
align-items: center;
}
.rightPage{
background-color: #fff5ee;
width: 70%;
}
.items img{
width: 100%;
}
.form:hover{
background-color: gray;
transition: 1s;
}
</style>
</head>
<body>
<div class="mainPage">
<!-- 左邊頁面 -->
<div class="leftPage">
<div class="leftForm">
<div leftimg>
<img src="https://picsum.photos/500/300/?random=1">
</div>
<div>
<h3>2019年IT鐵人賽-冠軍影片</h3>
<p>29部影片・觀看次數：117,343次・上次更新日期：2019年10月19日</p>
</div>
<div class="lefticon icon">
<a href="#">
<img src="home_pic/02.png">
</a>
<img src="home_pic/03.png">
<img src="home_pic/04.png">
<img src="home_pic/06.png">
</div>
<hr>
<div class="iconAndbell icon">
<img src="home_pic/05.png" style= "margin-right: auto ;">
<img src="home_pic/07.jpg">
<img src="home_pic/01.png">
</div>
</div>
</div>
<!-- 左邊頁面 -->
<!-- 右邊頁面 -->
<div class="rightPage">
<a href="/practice06.html" style="text-decoration:none;">
<div class="form">
<p class="number items">1</p>
<div class="items">
<img src="https://picsum.photos/150/100/?random=1">
</div>
<div class="text">
<h3 class="items">金魚都能懂 網頁設計入門：網頁入門第一步-鐵人賽第二天｜HTML教學｜網頁教學</h3>
<p class="items">CSScoke</p>
</div>
</div>
</a>
<div class="form">
<p class="number items">2</p>
<div class="items">
<img src="https://picsum.photos/150/100/?random=2">
</div>
<div class="text">
<h3 class="items">金魚都能懂網頁設計入門：用甚麼工具寫網頁？鐵人賽第三天｜網頁教學｜HTML教學</h3>
<p class="items">CSScoke</p>
</div>
</div>
<div class="form">
<p class="number items">3</p>
<div class="items">
<img src="https://picsum.photos/150/100/?random=3">
</div>
<div class="text">
<h3 class="items">金魚都能懂網頁設計入門：再談HTML-鐵人賽第四天｜HTML教學｜網頁教學</h3>
<p class="items">CSScoke</p>
</div>
</div>
<div class="form">
<p class="number items">4</p>
<div class="items">
<img src="https://picsum.photos/150/100/?random=4">
</div>
<div class="text">
<h3 class="items">金魚都能懂網頁設計入門：網頁裝潢師CSS-鐵人賽第五天｜CSS教學｜網頁教學</h3>
<p class="items">CSScoke</p>
</div>
</div>
<div class="form">
<p class="number items">5</p>
<div class="items">
<img src="https://picsum.photos/150/100/?random=5">
</div>
<div class="text">
<h3 class="items">金魚都能懂網頁設計入門：CSS撰寫位子-鐵人賽第六天｜CSS教學｜網頁教學</h3>
<p class="items">CSScoke</p>
</div>
</div>
<div class="form">
<p class="number items">6</p>
<div class="items">
<img src="https://picsum.photos/150/100/?random=6">
</div>
<div>
<h3 class="items">金魚都能懂網頁設計入門：怎麼學CSS-鐵人賽第七天｜網頁教學｜CSS教學</h3>
<p class="items">CSScoke</p>
</div>
</div>
<!-- <button>按下去</button>
<a href="">
按下去
</a> -->
</div>
<!-- 右邊頁面 -->
</div>
</body>
</html>