day14

最新推荐文章于 2022-08-13 16:01:38 发布

lmj275871

最新推荐文章于 2022-08-13 16:01:38 发布

阅读量231

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/lmj275871/article/details/125729429

版权

前端

案例1：百度页面

把页面分为上、中、下三部分，逐个完成

1.引入外部样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>百度一下，你就知道</title>
		<!-- 引入外部样式 -->
		<link rel="stylesheet" type="text/css" href="./css/style.css">
		<link rel="icon" type="image/jpg" href="img/1.jpg">
	</head>

2.第一部分

html:页面内容

	<body>
		<!-- top -->
		<div class="top">
			<!-- top-left -->
			<div class="top_left">
				<a href="">新闻</a>
				<a href="">hao123</a>
				<a href="">地图</a>
				<a href="">贴吧</a>
				<a href="">视频</a>
				<a href="">图片</a>
				<a href="">网盘</a>
				<a href="">更多</a>
			</div>
			<!-- top-right -->
			<div class="top_right">
				<a href="" class="set">设置</a>
				<input type="submit" value="登录" class="login">
			</div>
		</div>

css:布局和样式

*{
	margin: 0;
	padding: 0;
}

.top{
	margin-top: 10px;
	width: 1200px;
	height: 30px;
}

.top_left{
	float: left;
}
.top_right{
	float: right;
}
a{
	/* 修改文字颜色 */
	color: black;
	/* 去掉超链接下划线 */
	text-decoration: none;
	font-size: 5px;
	margin-left: 20px;
}
.top_right > a,.top_right > input{
	margin-right: 10px;
}
/* 修改登录按钮 */
.top_right > input{
	width: 44px;
	height: 20px;
	background-color: rgba(61,83,239,0.9);
	color: white;
	border: 0px;
	border-radius: 6px;
	font-size: 1px;
}

3.第二部分

html:

		<!-- center -->
		<div class="center">
			<!-- logo -->
			<div>
				<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="" width="200px"
					height="100px">
			</div>

			<!-- input -->
			<div>
				<input type="text" class="input_text">
				<input type="submit" value="百度一下" class="button">
			</div>

			<!-- table -->
			<div>
				<table>
					<tr>
						<td><b>百度热搜</b></td>
						<td style="text-align: right;">换一换</td>
					</tr>
					<tr>
						<td>
							<span>0</span>
							<span>多措并举助企稳就业</span>
						</td>
						<td>
							<span>3</span>
							<span>山东舰霸气壁纸</span>
						</td>
					</tr>
					<tr>
						<td>
							<span>1</span>
							<span>河南村镇银行多位储户称又被赋红码</span>
						</td>
						<td>
							<span>4</span>
							<span>通信行程卡时间范围由14天改为7天</span>
						</td>
					</tr>
					<tr>
						<td>
							<span>2</span>
							<span>约翰逊辞职后谁将接唐宁街烂摊子</span>
						</td>
						<td>
							<span>5</span>
							<span>山东新增66例本土无症状 在临沂</span>
						</td>
					</tr>
				</table>
			</div>
		</div>

css:

.center{
	width: 1200px;
	text-align: center;
}

.center > div:nth-child(2) > .input_text{
	border: 2px solid lightgray;
	border-right: 0px;
	border-radius: 10px 0 0 10px;
	width: 450px;
	height: 30px;
	
}
.center > div:nth-child(2) > .button{
	border: 0px;
	border-radius: 0 10px 10px 0;
	background-color: rgba(61,83,239,0.9);
	color: white;
	width: 80px;
	height: 34px;
	margin-left: -6px;
}

table{
	width: 530px;
	text-align: left;
	margin-top: 30px;
	margin-left: 28%;
	font-size: 1px;
}
td{
	height: 30px;
}

4.第三部分

html:

		<!-- bottom -->
		<div class="bottom">
			<span>关于百度</span>
			<span>About Baidu</span>
			<span>京公网安备11000002000001号</span>
			<span>京ICP证030173号</span>
			<span>药品医疗器械网络信息服务备案（京）网药械信息备字（2021）第00159号</span>
			<span>^</span>
		</div>
	</body>
</html>

css:

.bottom{
	width: 1200px;
	text-align: center;
	font-size: 1%;
	position: absolute;
	bottom: 2px;
}

案例二：鼠标悬停，一张图片消失，另一张图片显示

方法一

			div{
				width:162px;
				height:168px;
				background: url(./img/cat_open.png) no-repeat;
			}
			div:hover{
				background: url(./img/cat_close.png) no-repeat;
			}

方法二

			body > img:nth-child(2){
				position: absolute;
			}
			
			body > img:nth-child(2):hover{
				/* 不显示 */
				display:none;
		</style>
	</head>
	<body>
		<div></div>
		<img src="./img/cat_open.png" alt="">
		<img src="./img/cat_close.png" alt="">
	</body>

爬虫

BeautifulSoup解析页面

requests - 请求页面，得到响应结果
BeautifulSoup4 - 根据响应结果解析页面、提取数据
写入文件、数据库

bs4 -> BeautifulSoup4

案例：中国新闻网

bs4模块能够从html或者xml中提取数据。

import requests
from bs4 import BeautifulSoup

for page in range(1, 11):
    print(f'第{page}页')
    URL = f'https://www.chinanews.com.cn/scroll-news/news{page}.html'
    # URL = 'https://101.qq.com/#/hero'

2.给爬虫提供伪装

headers = {} --> headers是一个字典:{key:value}
headers是给爬虫提供伪装的
User-Agent --> 将爬虫伪装成浏览器

	Headers = {
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.66 Safari/537.36 Edg/103.0.1264.44'
    }

3.打印网页源代码(字符串)

为什么要对比打印结果和网页中的内容是否一致？
网页：分为静态页面和动态页面
静态页面：内容是写死的，除非人为的进行内容修改，否则这个页面的内容是一成不变的。
动态页面：内容不是写死的，使用某种特殊的技术（JavaScript）使数据通过某种方式显示在页面中。

requests得到的结果是静态页面的结果。

    response = requests.get(url=URL, headers=Headers)
    # 如果状态码=200，爬虫可用
    if response.status_code == 200:
        response.encoding = 'utf-8'
        print(response.text)

4.提取数据

BeautifulSoup(网页源码,解析器) --> 将字符串类型的源代码转换为bs4类型
bs4模块提供了一系列提取数据的方法，这些方法的操作对象是bs4类型的数据。

select:根据CSS选择器(标签、class、id等)定位数据，得到的是符合这个选择器的所有结果(整体是列表，列表中每个元素是一个bs4类型的数据)
select_one：根据CSS选择器(标签、class、id等)定位数据，得到的是符合这个选择器的一个结果（是一个bs4类型数据）
text:从bs4类型数据中提取标签内的内容，结果为str
attrs：从bs4类型数据中提取标签内容属性值，结果为str

		soup = BeautifulSoup(response.text, 'html.parser')
        li_list = soup.select(
            'body > div.w1280.mt20 > div.content-left > div.content_list > ul > li')
        for i in li_list:
            if i.select_one('li > div.dd_lm > a') != None:
                news_type = i.select_one('li > div.dd_lm > a').text
                news_title = i.select_one('li > div.dd_bt > a').text
                news_href = 'https://www.chinanews.com.cn' + i.select_one('li > div.dd_bt > a').attrs['href']
                news_time = i.select_one('li > div.dd_time').text
                print(news_type, news_title, news_href, news_time)