質問編集履歴
4
文章少し変更
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
|
|
87
87
|
念の為、見出しタグ変更前と変更後のキャプチャーを貼っておきます。
|
|
88
88
|
|
|
89
|
-
※画像上部の【これはHTMLのh〇です】と、プロフィール欄の名前【わし】の見出しタグを変更
|
|
89
|
+
※画像上部の【これはHTMLのh〇です】と、プロフィール欄の名前【わし】の見出しタグを変更したが、サイズ変わらず。
|
|
90
90
|
|
|
91
91
|
|
|
92
92
|
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
|
|
97
97
|
|
|
98
98
|
|
|
99
|
-
見出しタグ変更後(画像上部の【これはHTMLのh1です】の見出しタグをh1・プロフィール欄の名前【わし】の見出しタグをh1に変更)
|
|
99
|
+
見出しタグ変更後(画像上部の【これはHTMLのh1です】の見出しタグをh1・プロフィール欄の名前【わし】の見出しタグをh1に変更したが、サイズ変わらず)
|
|
100
100
|
|
|
101
101
|
|
|
102
102
|
|
3
追記(3)
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -90,10 +90,14 @@
|
|
|
90
90
|
|
|
91
91
|
|
|
92
92
|
|
|
93
|
+
見出しタグ変更前(画像上部の【これはHTMLのh3です】の見出しタグがh3、プロフィール欄の名前【わし】の見出しタグがh2)
|
|
94
|
+
|
|
93
95
|
|
|
94
96
|
|
|
95
97
|
|
|
96
98
|
|
|
99
|
+
見出しタグ変更後(画像上部の【これはHTMLのh1です】の見出しタグをh1・プロフィール欄の名前【わし】の見出しタグをh1に変更)
|
|
100
|
+
|
|
97
101
|
|
|
98
102
|
|
|
99
103
|
|
2
追記(2)
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -22,30 +22,30 @@
|
|
|
22
22
|
|
|
23
23
|
④セレクトボックスselect, inputタグ内の選択・入力が出来ない
|
|
24
24
|
|
|
25
|
+
⑤sectionタグ内の見出しh1がh3サイズになる(h1以外のサイズは正常) ※画像上部の【これはHTMLのh〇です】
|
|
26
|
+
|
|
27
|
+
⑥見出しh1のサイズがh2サイズになる(h1以外のサイズは正常)
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
以上、よろしくお願いします。
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
###追記(1)
|
|
36
|
+
|
|
37
|
+
上の現象は、HTMLとCSSファイルで作成しブラウザのプレビューで確認すると発生していました。
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
ですが、只今CSS抜きでHTMLのみでプレビューを確認した所、不具合は⑤と⑥の２点になりました。
|
|
42
|
+
|
|
25
43
|
⑤sectionタグ内の見出しh1がh3サイズになる(h1以外のサイズは正常)
|
|
26
44
|
|
|
27
45
|
⑥見出しh1のサイズがh2サイズになる(h1以外のサイズは正常)
|
|
28
46
|
|
|
29
47
|
|
|
30
48
|
|
|
31
|
-
以上、よろしくお願いします。
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
###追記
|
|
36
|
-
|
|
37
|
-
上の現象は、HTMLとCSSファイルで作成しブラウザのプレビューで確認すると発生していました。
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
ですが、只今CSS抜きでHTMLのみでプレビューを確認した所、不具合は⑤と⑥の２点になりました。
|
|
42
|
-
|
|
43
|
-
⑤sectionタグ内の見出しh1がh3サイズになる(h1以外のサイズは正常)
|
|
44
|
-
|
|
45
|
-
⑥見出しh1のサイズがh2サイズになる(h1以外のサイズは正常)
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
49
|
という事は、他の４つの不具合はCSS側で悪さをしているんだと思います。
|
|
50
50
|
|
|
51
51
|
コードには悪さをしそうな箇所は見当たりませんでした。
|
|
@@ -66,6 +66,38 @@
|
|
|
66
66
|
|
|
67
67
|
おかしい場所があればどんどんコメント下さい！！
|
|
68
68
|
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
### 追記(2)
|
|
72
|
+
|
|
73
|
+
①～④は解決しました。headerのheightが100%の為、下部全てに影響していました。
|
|
74
|
+
|
|
75
|
+
本当にありがとうございました！！
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
⑤と⑥はまだ解決していません。
|
|
80
|
+
|
|
81
|
+
⑤はsectionタグが影響しているとみて間違いないと思います。
|
|
82
|
+
|
|
83
|
+
⑥に関しては、場所を問わずh1がh2のサイズになるので、チンプンカンプンです。
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
念の為、見出しタグ変更前と変更後のキャプチャーを貼っておきます。
|
|
88
|
+
|
|
89
|
+
※画像上部の【これはHTMLのh〇です】と、プロフィール欄の名前【わし】の見出しタグを変更
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
|
|
100
|
+
|
|
69
101
|
```HTML
|
|
70
102
|
|
|
71
103
|
<!DOCTYPE html>
|
|
@@ -134,7 +166,7 @@
|
|
|
134
166
|
|
|
135
167
|
<section>
|
|
136
168
|
|
|
137
|
-
<h
|
|
169
|
+
<h1>これは<abbr title="Hypertext Markup langage">HTML</abbr>のh1です</h1>
|
|
138
170
|
|
|
139
171
|
<blockquote cite="http://www.blog.com">
|
|
140
172
|
|
|
@@ -248,7 +280,7 @@
|
|
|
248
280
|
|
|
249
281
|
<img src="profile(IMG_1001).jpg" alt="わしのプロフィール写真。" title="わしプロフィール写真" width="90%">
|
|
250
282
|
|
|
251
|
-
<h
|
|
283
|
+
<h1>わし</h1>
|
|
252
284
|
|
|
253
285
|
<br>
|
|
254
286
|
|
1
追記とコードを載せました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -20,12 +20,496 @@
|
|
|
20
20
|
|
|
21
21
|
③引用qタグがダブルクォーテーション""表示ではなく鍵括弧｢｣
|
|
22
22
|
|
|
23
|
+
④セレクトボックスselect, inputタグ内の選択・入力が出来ない
|
|
24
|
+
|
|
23
|
-
|
|
25
|
+
⑤sectionタグ内の見出しh1がh3サイズになる(h1以外のサイズは正常)
|
|
24
|
-
|
|
26
|
+
|
|
25
|
-
|
|
27
|
+
⑥見出しh1のサイズがh2サイズになる(h1以外のサイズは正常)
|
|
26
|
-
|
|
27
|
-
⑥select, inputタグ内の選択・入力が出来ない
|
|
28
28
|
|
|
29
29
|
|
|
30
30
|
|
|
31
31
|
以上、よろしくお願いします。
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
###追記
|
|
36
|
+
|
|
37
|
+
上の現象は、HTMLとCSSファイルで作成しブラウザのプレビューで確認すると発生していました。
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
ですが、只今CSS抜きでHTMLのみでプレビューを確認した所、不具合は⑤と⑥の２点になりました。
|
|
42
|
+
|
|
43
|
+
⑤sectionタグ内の見出しh1がh3サイズになる(h1以外のサイズは正常)
|
|
44
|
+
|
|
45
|
+
⑥見出しh1のサイズがh2サイズになる(h1以外のサイズは正常)
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
という事は、他の４つの不具合はCSS側で悪さをしているんだと思います。
|
|
50
|
+
|
|
51
|
+
コードには悪さをしそうな箇所は見当たりませんでした。
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
HTMLとCSSを同時にブラウザのプレビューで確認すると、①～④４点の不具合が発生します。
|
|
56
|
+
|
|
57
|
+
何かその様な現象が起こる原因等あるのでしょうか？
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
初めてのコーディングで、練習用の非常に不格好なコードですが、貼っておきます。お気を害したらすみませんm(__)m
|
|
62
|
+
|
|
63
|
+
まさかこれを公開する事になるとは…恥ずかしいですね。
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
おかしい場所があればどんどんコメント下さい！！
|
|
68
|
+
|
|
69
|
+
```HTML
|
|
70
|
+
|
|
71
|
+
<!DOCTYPE html>
|
|
72
|
+
|
|
73
|
+
<html lang="ja">
|
|
74
|
+
|
|
75
|
+
<head>
|
|
76
|
+
|
|
77
|
+
<meta charset="utf-8">
|
|
78
|
+
|
|
79
|
+
<link rel="stylesheet" href="ask.css">
|
|
80
|
+
|
|
81
|
+
<title>わし BLOG</title>
|
|
82
|
+
|
|
83
|
+
</head>
|
|
84
|
+
|
|
85
|
+
<!---------------------------------------------------------->
|
|
86
|
+
|
|
87
|
+
<body>
|
|
88
|
+
|
|
89
|
+
<header>
|
|
90
|
+
|
|
91
|
+
<div class="container">
|
|
92
|
+
|
|
93
|
+
<nav>
|
|
94
|
+
|
|
95
|
+
<div id="header-tytle">
|
|
96
|
+
|
|
97
|
+
<a href="#">初学者 ぶろぐ</a>
|
|
98
|
+
|
|
99
|
+
</div>
|
|
100
|
+
|
|
101
|
+
<div id="header-list">
|
|
102
|
+
|
|
103
|
+
<ul id="header-ul">
|
|
104
|
+
|
|
105
|
+
<li><a href = "https://www.google.co.jp/" class="ul-btn">HOME</a></li>
|
|
106
|
+
|
|
107
|
+
<li><a href = "#" class="ul-btn">日 常</a></li>
|
|
108
|
+
|
|
109
|
+
<li><a href = "#" class="ul-btn">旅 行</a></li>
|
|
110
|
+
|
|
111
|
+
<li><a href = "#" class="ul-btn">学 習</a></li>
|
|
112
|
+
|
|
113
|
+
<li><a href = "#contact" class="ul-btn">CONTACT</a></li>
|
|
114
|
+
|
|
115
|
+
</ul>
|
|
116
|
+
|
|
117
|
+
</div>
|
|
118
|
+
|
|
119
|
+
</nav>
|
|
120
|
+
|
|
121
|
+
</div>
|
|
122
|
+
|
|
123
|
+
</header>
|
|
124
|
+
|
|
125
|
+
<!---------------------------------------------------------->
|
|
126
|
+
|
|
127
|
+
<main>
|
|
128
|
+
|
|
129
|
+
<article>
|
|
130
|
+
|
|
131
|
+
<div class="container">
|
|
132
|
+
|
|
133
|
+
<div class="contents">
|
|
134
|
+
|
|
135
|
+
<section>
|
|
136
|
+
|
|
137
|
+
<h3>これは<abbr title="Hypertext Markup langage">HTML</abbr>のh3です</h3>
|
|
138
|
+
|
|
139
|
+
<blockquote cite="http://www.blog.com">
|
|
140
|
+
|
|
141
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
142
|
+
|
|
143
|
+
</blockquote>
|
|
144
|
+
|
|
145
|
+
</section>
|
|
146
|
+
|
|
147
|
+
<br>
|
|
148
|
+
|
|
149
|
+
</div>
|
|
150
|
+
|
|
151
|
+
</div>
|
|
152
|
+
|
|
153
|
+
<div class="container">
|
|
154
|
+
|
|
155
|
+
<div class="contents">
|
|
156
|
+
|
|
157
|
+
<h2>僕の映画ベストワンは<cite>"Back to the Future"</cite></h2>
|
|
158
|
+
|
|
159
|
+
<p><em>Lorem ipsum</em> dolor sit amet, <q>consectetur adipiscing elit,</q> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
160
|
+
|
|
161
|
+
<br>
|
|
162
|
+
|
|
163
|
+
<hr><br>
|
|
164
|
+
|
|
165
|
+
<p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
166
|
+
|
|
167
|
+
</div>
|
|
168
|
+
|
|
169
|
+
</div>
|
|
170
|
+
|
|
171
|
+
</article>
|
|
172
|
+
|
|
173
|
+
<article>
|
|
174
|
+
|
|
175
|
+
<div class="container">
|
|
176
|
+
|
|
177
|
+
<div id="contact">
|
|
178
|
+
|
|
179
|
+
<h2>CONTACT</h2>
|
|
180
|
+
|
|
181
|
+
<h3>お問い合わせ・ご質問</h3>
|
|
182
|
+
|
|
183
|
+
<p><strong>(お名前)</strong></p>
|
|
184
|
+
|
|
185
|
+
<input type="text" name="name">
|
|
186
|
+
|
|
187
|
+
<input type="radio" name="gender" value="male">男性
|
|
188
|
+
|
|
189
|
+
<input type="radio" name="gender" value="female">女性
|
|
190
|
+
|
|
191
|
+
<p><strong>(お住まい)</strong></p>
|
|
192
|
+
|
|
193
|
+
<select name="adress">
|
|
194
|
+
|
|
195
|
+
<optgroup label="関東">
|
|
196
|
+
|
|
197
|
+
<option value="tokyo">東京</option>
|
|
198
|
+
|
|
199
|
+
<option value="chiba">千葉</option>
|
|
200
|
+
|
|
201
|
+
<option value="kanagawa">神奈川</option>
|
|
202
|
+
|
|
203
|
+
</optgroup>
|
|
204
|
+
|
|
205
|
+
<optgroup label="関西">
|
|
206
|
+
|
|
207
|
+
<option value="tokyo">東京</option>
|
|
208
|
+
|
|
209
|
+
<option value="chiba">千葉</option>
|
|
210
|
+
|
|
211
|
+
<option value="kanagawa">神奈川</option>
|
|
212
|
+
|
|
213
|
+
</optgroup>
|
|
214
|
+
|
|
215
|
+
</select>
|
|
216
|
+
|
|
217
|
+
<p><strong>(お好きな検索サイト)</strong></p>
|
|
218
|
+
|
|
219
|
+
<input type="checkbox" name="website" value="google">Google
|
|
220
|
+
|
|
221
|
+
<input type="checkbox" name="website" value="yahoo">Yahoo
|
|
222
|
+
|
|
223
|
+
<input type="checkbox" name="website" value="other">その他
|
|
224
|
+
|
|
225
|
+
<p><strong>(パスワード)</strong></p>
|
|
226
|
+
|
|
227
|
+
<input type="password" name="pass">
|
|
228
|
+
|
|
229
|
+
<p><strong>(質問内容)</strong></p>
|
|
230
|
+
|
|
231
|
+
<textarea name="ask" rows="5" cols="80"></textarea>
|
|
232
|
+
|
|
233
|
+
</div>
|
|
234
|
+
|
|
235
|
+
</div>
|
|
236
|
+
|
|
237
|
+
</article>
|
|
238
|
+
|
|
239
|
+
</main>
|
|
240
|
+
|
|
241
|
+
<!---------------------------------------------------------->
|
|
242
|
+
|
|
243
|
+
<aside>
|
|
244
|
+
|
|
245
|
+
<div class="container">
|
|
246
|
+
|
|
247
|
+
<div id="introduce">
|
|
248
|
+
|
|
249
|
+
<img src="profile(IMG_1001).jpg" alt="わしのプロフィール写真。" title="わしプロフィール写真" width="90%">
|
|
250
|
+
|
|
251
|
+
<h3>わし</h3>
|
|
252
|
+
|
|
253
|
+
<br>
|
|
254
|
+
|
|
255
|
+
<p>男。2000年生まれ。東京都在住。<br>
|
|
256
|
+
|
|
257
|
+
趣味：旅行・アニメ・漫画
|
|
258
|
+
|
|
259
|
+
</p>
|
|
260
|
+
|
|
261
|
+
</div>
|
|
262
|
+
|
|
263
|
+
</div>
|
|
264
|
+
|
|
265
|
+
</aside>
|
|
266
|
+
|
|
267
|
+
</body>
|
|
268
|
+
|
|
269
|
+
</html>
|
|
270
|
+
|
|
271
|
+
```
|
|
272
|
+
|
|
273
|
+
```CSS
|
|
274
|
+
|
|
275
|
+
* {
|
|
276
|
+
|
|
277
|
+
margin: 0;
|
|
278
|
+
|
|
279
|
+
padding: 0;
|
|
280
|
+
|
|
281
|
+
box-sizing: border-box;
|
|
282
|
+
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
|
|
286
|
+
|
|
287
|
+
body {
|
|
288
|
+
|
|
289
|
+
background-color: #f5f5f5;
|
|
290
|
+
|
|
291
|
+
padding: 0 20px;
|
|
292
|
+
|
|
293
|
+
margin-bottom: 50px;
|
|
294
|
+
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
|
|
298
|
+
|
|
299
|
+
li {
|
|
300
|
+
|
|
301
|
+
list-style: none;
|
|
302
|
+
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
|
|
306
|
+
|
|
307
|
+
li a {
|
|
308
|
+
|
|
309
|
+
text-decoration: none;
|
|
310
|
+
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
|
|
314
|
+
|
|
315
|
+
.container {
|
|
316
|
+
|
|
317
|
+
background-color: white;
|
|
318
|
+
|
|
319
|
+
margin-bottom: 0;
|
|
320
|
+
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
/*----------------------------------------------------*/
|
|
324
|
+
|
|
325
|
+
header {
|
|
326
|
+
|
|
327
|
+
height: 100%;
|
|
328
|
+
|
|
329
|
+
position: fixed;
|
|
330
|
+
|
|
331
|
+
opacity: 0.9;
|
|
332
|
+
|
|
333
|
+
top: 0;
|
|
334
|
+
|
|
335
|
+
left: 0;
|
|
336
|
+
|
|
337
|
+
right: 0;
|
|
338
|
+
|
|
339
|
+
z-index: 10;
|
|
340
|
+
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
|
|
344
|
+
|
|
345
|
+
#header-tytle {
|
|
346
|
+
|
|
347
|
+
float: left;
|
|
348
|
+
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
|
|
352
|
+
|
|
353
|
+
#header-tytle a {
|
|
354
|
+
|
|
355
|
+
background: linear-gradient(to right, red , gold, blue);
|
|
356
|
+
|
|
357
|
+
-webkit-background-clip: text;
|
|
358
|
+
|
|
359
|
+
color: transparent;
|
|
360
|
+
|
|
361
|
+
font-weight: bold;
|
|
362
|
+
|
|
363
|
+
font-size: 2rem;
|
|
364
|
+
|
|
365
|
+
padding-left: 30px;
|
|
366
|
+
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
|
|
370
|
+
|
|
371
|
+
#header-list {
|
|
372
|
+
|
|
373
|
+
margin-left: 270px;
|
|
374
|
+
|
|
375
|
+
}
|
|
376
|
+
|
|
377
|
+
|
|
378
|
+
|
|
379
|
+
#header-ul {
|
|
380
|
+
|
|
381
|
+
display: flex;
|
|
382
|
+
|
|
383
|
+
max-width: 800px;
|
|
384
|
+
|
|
385
|
+
}
|
|
386
|
+
|
|
387
|
+
|
|
388
|
+
|
|
389
|
+
#header-ul li {
|
|
390
|
+
|
|
391
|
+
line-height: 25px;
|
|
392
|
+
|
|
393
|
+
background-color: black;
|
|
394
|
+
|
|
395
|
+
width: calc(100% / 5);
|
|
396
|
+
|
|
397
|
+
border: 1px solid black;
|
|
398
|
+
|
|
399
|
+
margin: 5px;
|
|
400
|
+
|
|
401
|
+
border-radius: 5px;
|
|
402
|
+
|
|
403
|
+
}
|
|
404
|
+
|
|
405
|
+
|
|
406
|
+
|
|
407
|
+
#header-ul li a:hover {
|
|
408
|
+
|
|
409
|
+
background-color: blue;
|
|
410
|
+
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
|
|
414
|
+
|
|
415
|
+
#header-ul li a{
|
|
416
|
+
|
|
417
|
+
display:block;
|
|
418
|
+
|
|
419
|
+
text-align: center;
|
|
420
|
+
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
|
|
424
|
+
|
|
425
|
+
|
|
426
|
+
|
|
427
|
+
li:first-child a {
|
|
428
|
+
|
|
429
|
+
color: white;
|
|
430
|
+
|
|
431
|
+
}
|
|
432
|
+
|
|
433
|
+
|
|
434
|
+
|
|
435
|
+
li:nth-child(n+2):nth-child(-n+4) a{
|
|
436
|
+
|
|
437
|
+
color: whitesmoke;
|
|
438
|
+
|
|
439
|
+
}
|
|
440
|
+
|
|
441
|
+
|
|
442
|
+
|
|
443
|
+
li:last-of-type a {
|
|
444
|
+
|
|
445
|
+
color: white;
|
|
446
|
+
|
|
447
|
+
}
|
|
448
|
+
|
|
449
|
+
/*----------------------------------------------------*/
|
|
450
|
+
|
|
451
|
+
main {
|
|
452
|
+
|
|
453
|
+
float: left;
|
|
454
|
+
|
|
455
|
+
width: 60%;
|
|
456
|
+
|
|
457
|
+
margin-top: 80px;
|
|
458
|
+
|
|
459
|
+
}
|
|
460
|
+
|
|
461
|
+
|
|
462
|
+
|
|
463
|
+
main .container {
|
|
464
|
+
|
|
465
|
+
margin-bottom: 70px;
|
|
466
|
+
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
|
|
470
|
+
|
|
471
|
+
section p::first-line {
|
|
472
|
+
|
|
473
|
+
color: blue;
|
|
474
|
+
|
|
475
|
+
}
|
|
476
|
+
|
|
477
|
+
|
|
478
|
+
|
|
479
|
+
.contents p ~ p {
|
|
480
|
+
|
|
481
|
+
color: purple;
|
|
482
|
+
|
|
483
|
+
}
|
|
484
|
+
|
|
485
|
+
/*----------------------------------------------------*/
|
|
486
|
+
|
|
487
|
+
aside {
|
|
488
|
+
|
|
489
|
+
float: right;
|
|
490
|
+
|
|
491
|
+
width: 35%;
|
|
492
|
+
|
|
493
|
+
text-align: center;
|
|
494
|
+
|
|
495
|
+
margin-top: 80px;
|
|
496
|
+
|
|
497
|
+
}
|
|
498
|
+
|
|
499
|
+
|
|
500
|
+
|
|
501
|
+
#introduce {
|
|
502
|
+
|
|
503
|
+
padding: 30px 0;
|
|
504
|
+
|
|
505
|
+
}
|
|
506
|
+
|
|
507
|
+
|
|
508
|
+
|
|
509
|
+
#introduce img {
|
|
510
|
+
|
|
511
|
+
border: 20px dotted gold;
|
|
512
|
+
|
|
513
|
+
}
|
|
514
|
+
|
|
515
|
+
```
|