因为想要学爬虫，所以需要了解一下网页的格式，所以跟着网上的教程简单的做了一个网页，主要实现了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 }
最后效果图：
