因为想要学爬虫，所以需要了解一下网页的格式，所以跟着网上的教程简单的做了一个网页，主要实现了HTML的部分，CSS的部分我就直接套用了别人的，因为CSS我不会，做这个的目的主要也是为了了解一下HTML。
主要代码如下：
1 <!DOCTYPE html> <!--网页文档类型，这里是html5的写法--> 2 <html lang="en"> <!--表示文档的开始--> 3 <head> <!--这里面的内容不会在浏览器内显示出来--> 4 <meta charset="UTF-8"> 5 <title>狐妖小红娘</title> <!--网页标题，只能放在head之间--> 6 <link rel="stylesheet" type = "text/css" href="main.css"> 7 </head> 8 <body> 9 <div class="header"> <!--div是分区--> 10 <img src="images/title.png"> 11 <ul class="nav"> <!--ul是无序列表--> 12 <li><a href="http://www.cnblogs.com/zyb993963526/">王权富贵篇</a></li> 13 <li><a href="#">月红篇</a></li> 14 <li><a href="#">南国篇</a></li> 15 </ul> 16 </div> 17 18 <div class="main-content"> <!--h1,2,3,4,5,6是标题,h1是最大号--> 19 <h2>人物介绍</h2> 20 <ul class="article"> 21 <li> 22 <img src="images/0001.jpg" width="100" height="90"> 23 <h3><a href="#">涂山苏苏</a></h3> 24 <p>呆萌迷糊小狐狸一只，涂山三小姐，法力低微。</p> <!--p是插入文字--> 25 </li> 26 <li> 27 <img src="images/0002.jpg" width="100" height="90"> 28 <h3><a href="#">白月初</a></h3> 29 <p>史上最无节操的正太道士。</p> 30 </li> 31 <li> 32 <img src="images/0003.jpg" width="100" height="90"> 33 <h3><a href="#">涂山红红</a></h3> 34 <p>原妖盟盟主，涂山法力第一人。 </p> 35 </li> 36 <li> 37 <img src="images/0004.jpg" width="100" height="90"> 38 <h3><a href="#">东方月初</a></h3> 39 <p>白月初前世，一气道盟中的后起之秀，后成盟主。</p> 40 </li> 41 </ul> 42 </div> 43 44 <div class="footer"> 45 <p>©狐妖小红娘 design by zyb</p> 46 </div> 47 </body> 48 </html>
CSS部分（直接套用了网上的教程，自己完全不会写，羞）：
1 body {
2 padding: 0 0 0 0;
3 background-color: #ffffff;
4 background-image: url(images/background.jpg);
5 background-position: top left;
6 background-repeat: no-repeat;
7 background-size: cover;
8 font-family: Helvetica, Arial, sans-serif;
9 }
10
11
12 .main-content {
13 width: 500px;
14 padding: 20px 20px 20px 20px;
15 border: 1px solid #dddddd;
16 border-radius:25px;
17 margin: 30px auto 0 auto;
18 background: #f1f1f1;
19 -webkit-box-shadow: 0 0 22px 0 rgba(50, 50, 50, 1);
20 -moz-box-shadow: 0 0 22px 0 rgba(50, 50, 50, 1);
21 box-shadow: 0 0 22px 0 rgba(50, 50, 50, 1);
22 }
23 .main-content p {
24 line-height: 26px;
25 }
26 .main-content h2 {
27 color: dimgray;
28 }
29
30 .nav {
31 padding-left: 0;
32 margin: 5px 0 20px 0;
33 text-align: center;
34 }
35 .nav li {
36 display: inline;
37 padding-right: 10px;
38 }
39 .nav li:last-child {
40 padding-right: 0;
41 }
42 .header {
43 padding: 10px 10px 10px 10px;
44
45 }
46
47 .header a {
48 color: #ffffff;
49 }
50 .header img {
51 display: block;
52 margin: 0 auto 0 auto;
53 }
54 .header h1 {
55 text-align: center;
56 }
57
58 .article {
59 list-style-type: none;
60 padding: 0;
61 }
62 .article li {
63 border: 1px solid #f6f8f8;
64 background-color: #ffffff;
65 height: 90px;
66 }
67 .article h3 {
68 border-bottom: 0;
69 margin-bottom: 5px;
70 }
71 .article a {
72 color: #37a5f0;
73 text-decoration: none;
74 }
75 .article img {
76 float: left;
77 padding-right: 11px;
78 }
79
80 .footer {
81 margin-top: 20px;
82 }
83 .footer p {
84 color: #aaaaaa;
85 text-align: center;
86 font-weight: bold;
87 font-size: 12px;
88 font-style: italic;
89 text-transform: uppercase;
90 }
91
92
93
94
95
96
97 .post {
98 padding-bottom: 2em;
99 }
100 .post-title {
101 font-size: 2em;
102 color: #222;
103 margin-bottom: 0.2em;
104 }
105 .post-avatar {
106 border-radius: 50px;
107 float: right;
108 margin-left: 1em;
109 }
110 .post-description {
111 font-family: Georgia, "Cambria", serif;
112 color: #444;
113 line-height: 1.8em;
114 }
115 .post-meta {
116 color: #999;
117 font-size: 90%;
118 margin: 0;
119 }
120
121 .post-category {
122 margin: 0 0.1em;
123 padding: 0.3em 1em;
124 color: #fff;
125 background: #999;
126 font-size: 80%;
127 }
128 .post-category-design {
129 background: #5aba59;
130 }
131 .post-category-pure {
132 background: #4d85d1;
133 }
134 .post-category-yui {
135 background: #8156a7;
136 }
137 .post-category-js {
138 background: #df2d4f;
139 }
140
141 .post-images {
142 margin: 1em 0;
143 }
144 .post-image-meta {
145 margin-top: -3.5em;
146 margin-left: 1em;
147 color: #fff;
148 text-shadow: 0 1px 1px #333;
149 }
最后效果图：
时间： 2024-07-31 06:42:58