Python爬虫实战（一）

最新推荐文章于 2021-01-13 11:36:48 发布

Echo_HK

最新推荐文章于 2021-01-13 11:36:48 发布

阅读量515

点赞数

分类专栏： python爬虫实战总结文章标签： python 爬虫

本文链接：https://blog.csdn.net/hk490871360/article/details/55287780

版权

python爬虫实战总结专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这是我做的一个Html测试页面：

页面效果如下所示：

html代码如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
    <div class = "header">
        ![](images/blah.png)
        <ul class = nav>
            <li><a href="#">Home</a></li>
            <li><a href="#">Site</a></li>
            <li><a href="#">Other</a></li>
        </ul>
    </div>
    <div class = main-content>
        <h2>Article</h2>
        <ul class="article">
            <li>
                <img src = "images/0001.jpg" width="100" height="90">
                <h3><a href="#">The blah</a></h3>
                <p>This is a dangerously delicious cake.</p>
            </li>
            <li>
                <img src = "images/0002.jpg"width="100" height="90">
                <h3><a href="#">The blah</a></h3>
                <p>It's always taco night somewhere!</p>
            </li>
            <li>
                <img src = "images/0003.jpg"width="100" height="90">
                <h3><a href="#">The blah</a></h3>
                <p>Omelette you in on a little secret </p>
            </li>
            <li>
                ![](images/0004.jpg)
                <h3><a href="#">The blah</a></h3>
                <p>It's a sandwich.  That's all we .</p>
            </li>
        </ul>
    </div>
    <div class = "footer">
        <p>@copy;   SouthWest University</p>
    </div>

</body>
</html>

这是另外一个html页面

html代码如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="homework.css">
</head>
<body>
    <div class ="header">
        ![](images/blah.png)
        <ul class = "nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Site</a></li>
            <li><a href="#">Other</a></li>
        </ul>
    </div>
    <div class="main-content">
        <h2>The Beach</h2>
        <ul class = "photos">
            ![](images/0001.jpg)
            ![](images/0002.jpg)
            ![](images/0003.jpg)
        </ul>
        <p>
            stretching from Solta to Mljet, and this unique cycling trip captures the highlights with an ideal
            balance of activity, culture and relaxation. Experience the beautiful island of Korcula with its picturesque old town,
            the untouched beauty of Vis, and trendy Hvar with its Venetian architecture. In the company of a cycling guide,
            this stimulating journey explores towns and landscapes, many of which are on UNESCO's world heritage list.
            Aboard the comfortably appointed wooden motor yacht,
            there is ample time between cycles to swim in the azure waters and soak up the ambience of seaside towns.
        </p>
    </div>
    <div class = "footer">
        <p>@copyright southwest university</p>
    </div>
</body>
</html>

通过如上两个html页面对常用的html标签进行总结
div标签：用于在文档中设定一个块区域常用属性：align:left center right
li标签：标签表示的是一个列表项
 type:这个属性只适用于无序列表，用于设定项目符号，默认值为disc
 value:这个属性只适用于有序列表，用于设定列表的项目数字
ul标签：标签表示的是一个无序列表。type:规定列表的项目符号类型,可取值 disc,square,circle.默认值为disc

问题总结：li标签和ul标签的混合使用方法。

附：css代码

body {
  padding: 0 0 0 0;
  background-color: #ffffff;
  background-image: url(images/bg3-dark.jpg);
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
  font-family: Helvetica, Arial, sans-serif;
}
.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;
}

.main-content {
  width: 500px;
  padding: 20px 20px 20px 20px;
  border: 1px solid #dddddd;
  border-radius:15px;
  margin: 30px auto 0 auto;
  background: #fdffff;
  -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);

}
h1, h2, h3 {
  color: #37A5F0;
}
h1 {
  color: #ffffff;
  margin: 10px 0 15px 0;
  text-align: center;
}
h2 {
  margin: 10px 0 20px 0;
  text-align: center;
  font-size: 26px;
  font-weight: bold;
}
h3 {
  margin: 15px 0 15px 0;
  border-bottom: 1px solid #CCCCCC;
  padding-bottom: 3px;
  font-size: 18px;
  font-weight: bold;
}
ul {
  padding: 0 0 0 50px;
}
ul li {
  margin: 0 0 5px 0;
}
ol {
  padding: 0 0 0 50px;
}

p {
    color: #505050;
    font-size: 15px;
    padding-left: 10px;
    padding-right: 10px;
}
hr {
    border:none;
    border-top:1px solid gainsboro;
    height:0;
}

.main-content {
  width: 500px;
  padding: 20px 20px 20px 20px;
  border: 1px solid #dddddd;
  margin: 30px auto 0 auto;
  background: #ffffff url(images/crossword.png) top left repeat;
}
.main-content p {
 line-height: 26px;
}
.photos {
  list-style-type: none;
  padding: 0;
}
.photos li {
  display: inline;
  padding-left: 11px;
}
.featured-image {
  width: 500px;
  height: 195px;
  background: #ffffff url(images/featured-cake.png) top left no-repeat;
}
.featured-image h3 {
  margin: 0;
  background-color: #333333;
  color: #ffffff;
  padding: 5px 0 5px 15px;
  text-transform: uppercase;
}
.footer {
  margin-top: 20px;
}
.footer p {
  color: #aaaaaa;
  text-align: center;
  font-weight: bold;
  font-size: 12px;
  font-style: italic;
  text-transform: uppercase;
}

Echo_HK

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Python爬虫实战（一）

这是我做的一个Html测试页面：页面效果如下所示：html代码如下所示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="main.css"></head><body>
复制链接

扫一扫

专栏目录