写一个阅览效果不错的阅读器网页适应手机屏幕。并在屏幕底部加上两排按钮第一排调整字体大小、行距和间距第二排按钮来调整背景颜色并以对应的颜色当作按钮背景颜色为 #FFFFFF、#D5EFD2、#F0C0D6、#DCDCDC、#E6DBBF这两排按钮在用户向下滑动屏幕时按钮会出现在屏幕底部向上滑动时会隐藏。

以下是一个简单的阅读器网页示例，适用于手机屏幕，并包含底部按钮栏：

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>阅读器</title>
	<style>
		body {
			font-family: sans-serif;
			font-size: 16px;
			line-height: 1.5;
			margin: 0;
			padding: 0;
			background-color: #FFFFFF;
			color: #333333;
		}
		
		.container {
			max-width: 600px;
			margin: 0 auto;
			padding: 20px;
		}
		
		.bottom-bar {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 60px;
			background-color: #EEEEEE;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
			padding: 10px;
			box-sizing: border-box;
			transition: transform 0.3s ease-in-out;
			transform: translateY(60px);
		}
		
		.bottom-bar.visible {
			transform: none;
		}
		
		.bottom-bar button {
			margin: 0 10px;
			padding: 8px 16px;
			border: none;
			border-radius: 4px;
			color: #FFFFFF;
			font-size: 14px;
			font-weight: bold;
			cursor: pointer;
			transition: background-color 0.3s ease-in-out;
		}
		
		.bottom-bar button.font-size {
			background-color: #D5EFD2;
		}
		
		.bottom-bar button.line-height {
			background-color: #F0C0D6;
		}
		
		.bottom-bar button.letter-spacing {
			background-color: #DCDCDC;
		}
		
		.bottom-bar button.background-white {
			background-color: #FFFFFF;
		}
		
		.bottom-bar button.background-green {
			background-color: #D5EFD2;
		}
		
		.bottom-bar button.background-pink {
			background-color: #F0C0D6;
		}
		
		.bottom-bar button.background-gray {
			background-color: #DCDCDC;
		}
		
		.bottom-bar button.background-yellow {
			background-color: #E6DBBF;
		}
	</style>
</head>
<body>
	<div class="container">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum dictum quam, vel porta arcu sagittis in. Sed vel semper enim. Duis eget ante ac nisi consequat varius non non lorem. Nullam et dignissim velit. In hac habitasse platea dictumst. Sed in lectus ut justo tempor ultrices. Fusce et libero vel ipsum euismod vulputate. Morbi eget enim eu lorem hendrerit luctus. Sed vestibulum orci tortor, ut imperdiet ipsum feugiat id. Duis congue libero eget odio luctus, et congue risus semper. Pellentesque blandit, sem vel aliquam bibendum, ligula velit iaculis diam, vel dapibus sem nunc nec dui. Vivamus vel risus ut sapien laoreet consequat a eu nunc.</p>
		<p>Nulla facilisi. In hac habitasse platea dictumst. Fusce auctor quam orci, vel tempor augue porttitor ut. Sed eu ornare metus. Fusce euismod metus a quam iaculis, sit amet sagittis augue eleifend. Nulla facilisi. Praesent nec enim vel magna vestibulum lacinia. Sed laoreet, velit vitae feugiat dapibus, purus nisi tincidunt est, nec bibendum ante ante vel mi. Vestibulum nec augue vitae urna efficitur convallis. Nulla facilisi. Nulla consequat, nisl vitae fermentum egestas, ex nulla varius velit, eu ultrices enim tellus sed sapien. Praesent mattis est at purus bibendum, vel egestas orci egestas. Sed ac mauris sapien. Sed aliquet lectus sed dui bibendum, vel malesuada ex eleifend.</p>
		<p>Donec nec sapien euismod, fringilla lorem vitae, consequat velit. Nulla facilisi. Nulla erat elit, posuere eu aliquet ac, interdum vel ex. Integer sodales mauris eget enim convallis, in bibendum metus scelerisque. Sed ultrices euismod turpis, sit amet ullamcorper sapien consectetur vel. Cras quis ante odio. Fusce semper odio vitae nisl malesuada, vel fermentum lacus bibendum. Suspendisse potenti. Phasellus nec dolor et mauris posuere sagittis. Cras ultricies, quam ut suscipit posuere, enim turpis malesuada tortor, vel tempus metus sapien quis purus. Sed id magna ac sem lobortis fringilla. Donec at est eget sapien bibendum varius.</p>
		<p>Integer pellentesque elit elit, et bibendum risus facilisis vel. Sed at lectus tellus. Nulla facilisi. Praesent auctor risus eget consectetur vestibulum. Aenean eget pretium turpis. Integer eu odio sed nulla interdum efficitur. Fusce id fermentum sapien. Fusce aliquet non leo at faucibus. Sed libero diam, pretium ac velit non, placerat semper urna. Nam eget felis massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec maximus mauris vel tortor ultricies, vitae vehicula elit ultricies. Nunc convallis felis ac metus dictum, eu ultrices metus suscipit. Integer at est suscipit, bibendum lacus vitae, tincidunt massa.</p>
	</div>
	
	<div class="bottom-bar">
		<button class="font-size">字体大小</button>
		<button class="line-height">行距</button>
		<button class="letter-spacing">字间距</button>
		<button class="background-white background-active"></button>
		<button class="background-green"></button>
		<button class="background-pink"></button>
		<button class="background-gray"></button>
		<button class="background-yellow"></button>
	</div>
	
	<script>
		var bottomBar = document.querySelector('.bottom-bar');
		var lastScrollY = 0;
		
		window.addEventListener('scroll', function() {
			var currentScrollY = window.scrollY;
			if (currentScrollY > lastScrollY) {
				bottomBar.classList.remove('visible');
			}
			else {
				bottomBar.classList.add('visible');
			}
			lastScrollY = currentScrollY;
		});
	</script>
</body>
</html>

在这个示例中，我们使用了一个 .container div 来包含实际的文本内容，并使用 CSS 调整了默认字体、行距和背景颜色。底部按钮栏被放置在一个 .bottom-bar div 中，并包含了两行按钮，第一行是用来调整文本样式的按钮，第二行是用来调整背景颜色的按钮。我们还添加了一些 JavaScript 代码来使底部按钮栏在滚动时出现或隐藏。

注意，这个示例只是一个简单的阅读器网页，你可以根据自己的需要进行修改和扩展。

写一个阅览效果不错的阅读器网页适应手机屏幕。并在屏幕底部加上两排按钮第一排调整字体大小、行距和间距第二排按钮来调整背景颜色并以对应的颜色当作按钮背景颜色为 #FFFFFF、#D5EFD2、#F0C0D6、#DCDCDC、#E6DBBF这两排按钮在用户向下滑动屏幕时按钮会出现在屏幕底部向上滑动时会隐藏。