欢迎光临
我们一直在努力

爬虫实战 | 前端HTML页面

这俩天又在写论文又在写后台,没来得及及更新文章,今天留一下刚刚写的两个前端页面,很简单,只有一个搜索框,一个基本的页面结构,我也把所有样式都写在HTML里了,没有备注,有点乱。

注意,HTML内{{}}中的内容都是为了后面jinja2语法传参或者设置循环、判断使用的。

展示效果:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>图书比价系统 | 毕业论文演示</title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			b{font-weight: normal;}
			li{list-style: none;}
			.top{
				width: 100%;
				height: 40px;
				background-color:#e8e8ee;
			}
			.statement{
				width: 1000px;
				height: 40px;
				margin: 0 auto;
			}
			.statement p{
				line-height: 40px;
				color: black;
				float: left;
				margin-left: 20px;
			}
			.statement b{
				line-height: 40px;
				color: black;
				float: right;
				margin-right: 20px;
			}
			.bottom{
				width: 100%;
				background-color: #e8e8ee;
				height: 40px;
				text-align: center;
				line-height: 40px;
				color: black;
			}
            .center{
                width: 1000px;
                margin: 50px auto;
              
                text-align: center;
            }
            .center img{
                width: 300px;
                margin-bottom: 50px;
            }
            .center input{
                width: 600px;
                height: 50px;
                padding: 0 25px;
                font-size: 24px;
                outline: none;
                color: darkgrey;
                
                border: 2px solid gainsboro;
                border-right: none;
                float: left;
            }
            .center .button{
                width: 100px;
                height: 54px;
                float: left;
                background-color: gainsboro;
                color: white;
                border: 2px solid gainsboro;
                border-left: none;
            }
            .center .button:hover{
                background-color: #444444;
            }
            .form{
                padding-left: 150px;
            }
            .form::after{
                content: '';
                display: block;
                visibility: hidden;
                height: 0;
                clear: both;
            }
            .description{
                width: 1000px;
                margin: 30px auto;
                border: 1px solid gray;
                padding: 20px;
            }
            h2{
                line-height: 60px;
                font-weight: normal;
            }
            h3{
                line-height: 35px;
                font-weight: normal;
            }
            p{
                line-height: 30px;
                color: grey;
                text-indent: 2em;
            }
		</style>
	</head>
	<body>
		<div class="top" id="top">
			<div class="statement"><b>作者:刘印</b><p>毕业设计演示系统 | 图书比价工具的设计与实现</p></div>
		</div>
        <div class="center">
            <img src="img/logo.png" alt="logo"><br>
            <div class="form">
                <form action="/template" method="POST">
                <input type="text" placeholder="请输入ISBN进行图书检索...">
                <input type="submit" value="搜书" class="button">
                </form>
            </div>
            
        </div>
        <div class="description">
            <h2>使用教程</h3>
            <p>本图书搜索比价系统仅支持对ISBN编码进行检索。您可以通过在上方输入ISBN编号进行搜索,搜索结果将按照价格由低到高的顺序进行排列。目前本系统支持搜索当当网、京东网、1号店等,若您对结果不满意,请联系我进行反馈,谢谢合作。</p>
        </div>
        <div class="description">
            <h2>ISBN简介</h2>
            <p>
                国际标准书号(International Standard Book Number),简称ISBN,是专门为识别图书等文献而设计的国际编号。ISO于1972年颁布了ISBN国际标准,并在西柏林普鲁士图书馆设立了实施该标准的管理机构——国际ISBN中心。现在,采用ISBN编码系统的出版物有:图书、小册子、缩微出版物、盲文印刷品等。2007年1月1日前,ISBN由10位数字组成,分四个部分:组号(国家、地区、语言的代号),出版者号,书序号和检验码。2007年1月1日起,实行新版ISBN,新版ISBN由13位数字组成,分为5段,即在原来的10位数字前加上3位EAN(欧洲商品编号)图书产品代码“978”。在联机书目中ISBN可以作为一个检索字段,从而为用户增加了一种检索途径。
            </p>
            <h2>新版ISBN</h2>
            <p>国际标准书号号码由13位数字组成,并以五个连接号或四个空格加以分割,每组数字都有固定的含义。</p>
            <h2>13位书号</h2>
            <p>EAN:European Article Number(欧洲商品号),国际标准书号中心于2004年决定在国际标准书号的基础上再添加一组三位数字在最前,即将现有的10位书号前面加上前缀号“978”或“979”及重新计算稽核号,以转换为新的13位格式,与13位欧洲商品编码相同。该计划于2007年1月1日实施。</p>
                <p>新13位国际标准书号-香港公共图书馆书刊注册组</p>
                <p>第一组:978或979;</p>
                <p>第二组:国家、语言或区位代码;</p>
                <p>第三组:出版社代码;</p>
                <p> 由各国家或地区的国际标准书号分配中心,分给各个出版社。</p>
                    <p>第四组:书序码;</p>
                        <p>该出版物代码,由出版社具体给出。</p>
                            <p>第五组:校验码;</p>
                                <p>只有一位,从0到9。</p>
            <h2>中国标准</h2>
            <p>1982年中国参加ISBN系统,并成立中国ISBN中心(设在国家新闻出版署)。中国标准书号(China Standard Book Number)自1987年1月1日起实施,至1988年1月1日完全取代原用的统一书号。</p>
            <p>中国标准书号共分两部分,第一部分为ISBN,是主体部分;第二部分为《中国图书馆图书分类法》基本大类类号和种次号。类号除工业技术诸类图书用两个字母外,其他各学科门类图书均用一个字母。种次号是同一出版社出版同一学科门类图书的顺序号,由出版社自行编定。类号与种次号之间用中圆点(·)隔开。第一部分和第二部分分两行排列,也可用斜线隔开,排成一行。例如ISBN 7-144-00316-X/TP·340。</p>
            <h2>功能作用</h2>
            <p>出版单位、发行单位及图书馆均可通过中国标准书号实现数据检索和信息查询,快速识别出版物的不同版本及不同产品形式,准确定位每一出版物。</p>
            <p>中国标准书号的使用,对出版业而言,除有助于图书出版、发行、经销、统计与库存控制等管理外,更便于出版物的国际交流;对图书馆等数据单位而言,可简化采购、征集、编目、流通、馆际互借等工作。</p>
        </div>
		<div class="bottom">
			<p>图书比价工具的设计与实现&copy;河南大学 | 软件学院 | 刘印</p>
        </div>
	</body>
</html>

展示效果:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>图书比价系统 | 毕业论文演示</title>
		<style type="text/css">
			*{margin: 0;padding: 0;font-family: '仿宋';}
			b{font-weight: normal;}
			li{list-style: none;}
			.top{
				width: 100%;
				height: 40px;
				background-color:#333333;
			}
			.statement{
				width: 1000px;
				height: 40px;
				margin: 0 auto
				;
			}
			.statement p{
				line-height: 40px;
				color: #e8e8ee;
				float: left;
				margin-left: 20px;
			}
			.statement b{
				line-height: 40px;
				color: seashell;
				float: right;
				margin-right: 20px;
			}
			.main{
				width: 100%;
				background-color: white;
				height: 120px;
				border-bottom: 1px solid grey;
			}
			.main div{
				width: 1000px;
				margin: 0 auto;
				background-color: white;
			}
			.main .logo{
				float: left;
				width: 400px;
				height: 120px;
			}
			.main .logo img{
				height: 80px;
				margin-top: 20px;
			}
			.main .search{
				float: right;
				width: 600px;
				height: 120px;
			}
			.main .search p{
				background-color: #f9513b;
				height: 18px;
				padding: 6px 6px;
				color: white;
				font-size: 16px;
				width: 220px;
				margin-top: 20px;
			}
			.main .search input:first-of-type{
				outline: none;
				width: 500px;
				height: 36px;
				border: 3px solid #f9513b;
				line-height: 36px;
				font-size: 16px;
				padding-left: 16px;
				float: left;
			}
			.main .search input:last-of-type{
				outline: none;
				border: none;
				width: 78px;
				font-size: 18px;
				height: 42px;
				background-color: #f9513b;
				color: white;
				float: left;
			}
			.center{
				width: 100%;
				background-color: #eeeeee;
				min-height: 800px;
				padding-top: 30px;
			}
			.center .title{
				width: 1000px;
				margin: 0px auto;
				background-color: tomato;
				color: white;
				font-weight: 700;
				border-radius: 50px;
			}
			.center .title::after{
				content: '.';
				height: 0;
				display: block;
				visibility: hidden;
				clear: both;
			}
			.center .title p{
				float: left;
				height: 30px;
				line-height: 30px;
				width: 200px;
				text-align: center;
				padding: 25px 0;
			}
			.center .origin{
				width: 600px;
				margin: 0px auto 0px auto;
				background-color: tomato;
				color:white;
				height: 50px;
				border-radius: 50px 50px 0px 0px;
				text-align: center;
				border-bottom: 1px solid white;
			}
			.center .origin p{
				line-height: 50px;
				
			}
			.center .book{
				width: 1000px;
				background-color: #eeeeee;
				margin: 0px auto;
			}
			.book ul::after{
				content: '.';
				height: 0;
				display: block;
				visibility: hidden;
				clear: both;
			}
			.center ul{
				border-radius: 50px;
				background-color: white;
				margin-top: 20px;
			}
			.center ul li{
				height: 100px;
				float: left;
				width: 190px;
				border-left: 1px dotted #eee;
				line-height: 100px;
				text-align: center;
			}
			.center ul li:first-of-type{
				height: 80px;
				color: grey;
				font-size: 14px;
				line-height: 16px;
				margin-top: 20px;
				margin-left: 40px;
				text-align: left;
				overflow: hidden;
				border-left: none;
			}
			.center ul li:nth-of-type(2){
				color:red;
				font-weight: 700;
				font-size: 24px;
			}
			.center ul li:nth-of-type(3){
				color:silver;
				font-weight: 700;
				font-size: 20px;
				font-family: '隶书;
			}
			.center ul li:nth-of-type(4){
				color:tomato;
				font-weight: 700;
				font-size: 20px;
				font-family: Arial, Helvetica, sans-serif;
			}
			.center ul li input{
				height: 40px;
				width: 100px;
				color: white;
				background-color: tomato;
				outline: none;
				border: none;
				border-radius: 20px;
			}
			.bottom{
				width: 100%;
				background-color: #333333;
				height: 40px;
				text-align: center;
				line-height: 40px;
				color: white;
				margin-top: 5px;
			}

			.gototop{
				width: 800px;
				height: 20px;
				line-height: 25px;
				color: white;
				background-color: tomato;
				margin: 0px auto;
				padding: 10px;
				top: 30;
				right: 5;
				text-align: center;
				z-index: 1;
				border-radius: 15px;
				margin-top: 20px;
			}
			.gototop a{
				color: white;
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<div class="top" id="top">
			<div class="statement"><b>作者:刘印</b><p>毕业设计演示系统 | 图书比价工具的设计与实现</p></div>
		</div>
		<div class="main">
			<div>
				<div class="logo">
					<img src="{{ url_for('static', filename= './images/logo.png',_t=val1) }}" alt="logo">
				</div>
				<div class="search">
					<p>请在下面输入ISBN号进行搜索</p>
					<form action="/template" method="POST">
						<input type="text" placeholder="请输入ISBN号..." id="isbn" name="isbn">
						<input type="submit" value="搜索">
					</form>
				</div>
			</div>
		</div>	
		<div class="center">
			<div class="origin">
				<p>以下数据来自数据库!数据库每七天更新一次!</p>
			</div>
			<div class="title">
				<p>图书名称</p>
				<p>售卖价格</p>
				<p>店铺名称</p>
				<p>数据来源</p>
				<p>售卖地址</p>
			</div>
			<div class="book">
				<!-- {% for n in book_list%} -->
				<ul>
					<li><p>{{n.title}}</p></li>
					<li>{{n.price}}</li>
					<li>{{n.store}}</li>
					<li>{{n.origin}}</li>
					<li><a href="{{n.link}}" target="_blank"><input type="button" value="点我去买书"></a></li>
				</ul>
				<!-- {% endfor %} -->
				<ul>
					<li><p>{{n.title}}</p></li>
					<li>{{n.price}}</li>
					<li>{{n.store}}</li>
					<li>{{n.origin}}</li>
					<li><a href="{{n.link}}" target="_blank"><input type="button" value="点我去买书"></a></li>
				</ul>
				<ul>
					<li><p>{{n.title}}</p></li>
					<li>{{n.price}}</li>
					<li>{{n.store}}</li>
					<li>{{n.origin}}</li>
					<li><a href="{{n.link}}" target="_blank"><input type="button" value="点我去买书"></a></li>
				</ul>
				<ul>
					<li><p>{{n.title}}</p></li>
					<li>{{n.price}}</li>
					<li>{{n.store}}</li>
					<li>{{n.origin}}</li>
					<li><a href="{{n.link}}" target="_blank"><input type="button" value="点我去买书"></a></li>
				</ul>
				<ul>
					<li><p>{{n.title}}</p></li>
					<li>{{n.price}}</li>
					<li>{{n.store}}</li>
					<li>{{n.origin}}</li>
					<li><a href="{{n.link}}" target="_blank"><input type="button" value="点我去买书"></a></li>
				</ul>
			</div>
			<div class="gototop"><a href="#top">数据加载完毕 | 点我返回顶部</a></div>
		</div>
		<div class="bottom">
			<p>图书比价工具的设计与实现&copy;河南大学 | 软件学院 | 刘印</p>
		</div>
	</body>
	<script>
		function isbn_check(){
			var isbn = document.getElementById('isbn').value;
			if (isbn.length == 11){
				alert('目前仅支持13位ISBN号查询!')
			}else if (isbn.length != 13){
				alert('请输入正确的isbn!')
			}
		}
	</script>
</html>
赞(0) 打赏
未经允许不得转载:散人研 » 爬虫实战 | 前端HTML页面
分享到: 更多 (0)

评论 抢沙发

3 + 5 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏