您的位置：首页 > 其它

第一次写网页！

2017-12-17 14:07 162 查看

因为想要学爬虫，所以需要了解一下网页的格式，所以跟着网上的教程简单的做了一个网页，主要实现了HTML的部分，CSS的部分我就直接套用了别人的，因为CSS我不会，做这个的目的主要也是为了了解一下HTML。

主要代码如下：

<!DOCTYPE html>   <!--网页文档类型，这里是html5的写法-->
<html lang="en">  <!--表示文档的开始-->
<head>            <!--这里面的内容不会在浏览器内显示出来-->
<meta charset="UTF-8">
<title>狐妖小红娘</title>  <!--网页标题，只能放在head之间-->
<link rel="stylesheet" type = "text/css" href="main.css">
</head>
<body>
<div class="header">  <!--div是分区-->
<img src="images/title.png">
<ul class="nav">   <!--ul是无序列表-->
<li><a href="http://www.cnblogs.com/zyb993963526/">王权富贵篇</a></li>
<li><a href="#">月红篇</a></li>
<li><a href="#">南国篇</a></li>
</ul>
</div>

<div class="main-content">  <!--h1,2,3,4,5,6是标题,h1是最大号-->
<h2>人物介绍</h2>
<ul class="article">
<li>
<img src="images/0001.jpg" width="100" height="90">
<h3><a href="#">涂山苏苏</a></h3>
<p>呆萌迷糊小狐狸一只，涂山三小姐，法力低微。</p>   <!--p是插入文字-->
</li>
<li>
<img src="images/0002.jpg" width="100" height="90">
<h3><a href="#">白月初</a></h3>
<p>史上最无节操的正太道士。</p>
</li>
<li>
<img src="images/0003.jpg" width="100" height="90">
<h3><a href="#">涂山红红</a></h3>
<p>原妖盟盟主，涂山法力第一人。 </p>
</li>
<li>
<img src="images/0004.jpg" width="100" height="90">
<h3><a href="#">东方月初</a></h3>
<p>白月初前世，一气道盟中的后起之秀，后成盟主。</p>
</li>
</ul>
</div>

<div class="footer">
<p>©狐妖小红娘 design by zyb</p>
</div>
</body>
</html>

CSS部分（直接套用了网上的教程，自己完全不会写，羞）：

body {
padding: 0 0 0 0;
background-color: #ffffff;
background-image: url(images/background.jpg);
background-position: top left;
background-repeat: no-repeat;
background-size: cover;
font-family: Helvetica, Arial, sans-serif;
}

.main-content {
width: 500px;
padding: 20px 20px 20px 20px;
border: 1px solid #dddddd;
border-radius:25px;
margin: 30px auto 0 auto;
background: #f1f1f1;
-webkit-box-shadow: 0 0 22px 0 rgba(50, 50, 50, 1);
-moz-box-shadow:    0 0 22px 0 rgba(50, 50, 50, 1);
box-shadow:         0 0 22px 0 rgba(50, 50, 50, 1);
}
.main-content p {
line-height: 26px;
}
.main-content h2 {
color: dimgray;
}

.nav {
padding-left: 0;
margin: 5px 0 20px 0;
text-align: center;
}
.nav li {
display: inline;
padding-right: 10px;
}
.nav li:last-child {
padding-right: 0;
}
.header {
padding: 10px 10px 10px 10px;

}

.header a {
color: #ffffff;
}
.header img {
display: block;
margin: 0 auto 0 auto;
}
.header h1 {
text-align: center;
}

.article {
list-style-type: none;
padding: 0;
}
.article li {
border: 1px solid #f6f8f8;
background-color: #ffffff;
height: 90px;
}
.article h3 {
border-bottom: 0;
margin-bottom: 5px;
}
.article a {
color: #37a5f0;
text-decoration: none;
}
.article img {
float: left;
padding-right: 11px;
}

.footer {
margin-top: 20px;
}
.footer p {
color: #aaaaaa;
text-align: center;
font-weight: bold;
font-size: 12px;
font-style: italic;
text-transform: uppercase;
}

.post {
padding-bottom: 2em;
}
.post-title {
font-size: 2em;
color: #222;
margin-bottom: 0.2em;
}
.post-avatar {
border-radius: 50px;
float: right;
margin-left: 1em;
}
.post-description {
font-family: Georgia, "Cambria", serif;
color: #444;
line-height: 1.8em;
}
.post-meta {
color: #999;
font-size: 90%;
margin: 0;
}

.post-category {
margin: 0 0.1em;
padding: 0.3em 1em;
color: #fff;
background: #999;
font-size: 80%;
}
.post-category-design {
background: #5aba59;
}
.post-category-pure {
background: #4d85d1;
}
.post-category-yui {
background: #8156a7;
}
.post-category-js {
background: #df2d4f;
}

.post-images {
margin: 1em 0;
}
.post-image-meta {
margin-top: -3.5em;
margin-left: 1em;
color: #fff;
text-shadow: 0 1px 1px #333;
}

最后效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航