HTML開発ブログのホームページデザイン(1)

ホームページのデザイン

Webサイトのホームページのレイアウト

まず、完成したWebページのレイアウトを観察します。

火狐截图_2016-10-31T08-43-36.591Z.png

Webページをヘッダー、写真、コンテンツ、下部に分けます。コンテンツは記事と写真の2つの部分に分けることができます。

まずは頭と下を書いてみましょう前の登録ページの頭と下を直接参照できます

rreee

導入結果は以下の通りです

学び続ける

新しいファイル

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
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>博客首页</title>
 <link href="index.css" rel="stylesheet" type="text/css">
</head>
<style>
 body{
 background-color: #F0F0F0;
 }
 *{
 border: 0px;
 padding: 0px;
 margin: 0px;
 font-size: 14px;
 }
 a:hover{color:red;text-decoration:none;}
 #top{
 width: 100%;
 height: 90px;
 background-color: white;
 border-bottom: 1px solid #bbbbbb;
 }
 #menu{
 width: 1000px;
 overflow: hidden;
 margin: 0 auto;
 }
 #menu img{
 height: 90px;
 }
 #menu ul{
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX