python爬虫豆瓣读书top250+数据清洗+数据库+Java后端开发+Echarts数据可视化(七)

最后做整体前端页面的代码及展示效果。
在webapp根目录下,新建一个html文件index.html文件。

python爬虫豆瓣读书top250+数据清洗+数据库+Java后端开发+Echarts数据可视化(七)_第1张图片
python爬虫豆瓣读书top250+数据清洗+数据库+Java后端开发+Echarts数据可视化(七)_第2张图片

1 index.html文件代码


<html>
<head>
<meta charset="UTF-8">
<title>豆瓣读书top250数据可视化效果title>
<script src="js/echarts.min.js">script>
<script src="js/jquery-1.11.0.min.js">script>
<link type="text/css" rel="styleSheet"  href="css/index.css" />
<style type="text/css">
#content {
      
	margin: 1%;
	min-height: 700px;
	background-image: url(img/doubanbg4.jpg);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-attachment: fixed;
	background-color: rgba(255, 255, 255, 0.2);
}
style>
head>
<body id="content">

	<header> 豆瓣读书top250数据可视化 header>
	<article>
		<nav>
			<ul class="menu">
				<li><a href="countryNum.html" target="choose">国家a><hr style="width: 85%"/>li>
				<li><a href="authorNum.html" target="choose">作者a><hr style="width: 85%"/>li>
				<li><a href="priceNum.html" target="choose">价格a><hr style="width: 85%"/>li>
				<li><a href="scoreNum.html" target="choose">评分a><hr style="width: 85%"/>li>
				<li><a href="publisherNum.html" target="choose">出版社a><hr style="width: 85%"/>li>
				<li><a href="presstimeNum.html" target="choose">出版时间a><hr style="width: 85%"/>li>
				<li><a href="people10.html" target="choose">评价人数a><hr style="width: 85%"/>li>
			ul>
		nav>
		<div class="graphic">
		div>
	article>
	<footer>版权所有 COPYRIGHT © 2020 - 2021 ALL RIGHTS
		SRESERVED footer>

body>
html>

2 index.css文件代码

#content {
     
	margin: 1%;
	min-height: 700px;
	background-image: url(../img/doubanbg4.jpg);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-attachment: fixed;
	background-color: red;
}

header {
     
	height: 100px;
	margin: 1%;
	font-family: 黑体;
	color: #BA55D3;
	font-size: 70px;
	text-align: center;
	border-radius: 10px 10px 10px 10px;
	border-color: #AFEEEE;
	border-style: groove;
	line-height: 100px;
	overflow: hidden;
}

nav {
     
	color: #8B0000;
	border-radius: 10px 10px 10px 10px;
	margin: 1%;
	width: 9%;
	height: 500px;
	display: block;
	float: left;
	scroll-margin: 0;
	border-color: #AFEEEE;
	border-style: ridge;
}

.menu {
     
	font-size: 18px;
	height: 30px;
	text-align: left;
}

nav ul li {
     
	list-style: none;
	font-size: 18px;
	line-height: 200%;
}

.graphic {
     
	margin: 1%;
	border-style: ridge;
	display: block;
	border-color: #AFEEEE;
	border-radius: 10px 10px 10px 10px;
	float: right;
	height: 500px;
	scroll-margin: 0;
	width: 86%;
}

a {
     
	text-decoration: none;
}

a:link {
     
	color: white;
}

a:visited {
     
	color: 	#FF0000;
}

a:hover {
     
	color: coral;
}

footer {
     
	width: 95%;
	text-align: center;
	color: white;
	fontsize: 30px;
}

PS:背景图自己找一张就好了。okk,终于复习完了,哈哈哈!!!

你可能感兴趣的:(WEB应用程序开发,html,可视化,css)