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

最新推荐文章于 2024-01-17 15:24:51 发布

super帅锅锅

最新推荐文章于 2024-01-17 15:24:51 发布

阅读量832

点赞数 1

分类专栏： WEB应用程序开发文章标签： html 可视化 css

本文链接：https://blog.csdn.net/qq_45804925/article/details/113193037

版权

WEB应用程序开发专栏收录该内容

5 篇文章 1 订阅

订阅专栏

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

在这里插入图片描述

1 index.html文件代码

<!DOCTYPE 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，终于复习完了，哈哈哈！！！

super帅锅锅

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
python爬虫豆瓣读书top250+数据清洗+数据库+Java后端开发+Echarts数据可视化(七)

最后做整体前端页面的代码及展示效果。在webapp根目录下，新建一个html文件index.html文件。1 index.html文件代码<!DOCTYPE html><html><head><meta charset="UTF-8"><title>豆瓣读书top250数据可视化效果</title><script src="js/echarts.min.js"></script><.
复制链接

扫一扫

专栏目录