HTML期末设计——代码篇

green5+1

已于 2022-12-19 15:31:17 修改

阅读量10w+

收藏 3.3k

点赞数 680

文章标签： html

于 2020-06-22 23:55:24 首次发布

本文链接：https://blog.csdn.net/greengirl5/article/details/106912542

版权

事先声明

这个网页设计也就是用了我学到的知识做的一个中规中矩的网页，可以给以后的大一新生们做个参考，和商业网站的效果肯定是没得比的，期望太高的可以关掉了

引入页

效果图：

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>欢迎来到香氛密语</title>
		<style>
			body {
   
				background: url(img/1的背景图.jpg) no-repeat center center;
				background-size: cover;
				/* 让背景图基于容器大小伸缩 */
				background-attachment: fixed;
				/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 此条属性必须设置否则可能无效*/
				background-color: #CCCCCC;
				/* 设置背景颜色，背景图加载过程中会显示背景色 */
			}

			div.dialog-bz {
   
				width: 550px;
				height: 300px;
				margin: auto;
				margin-top: 200px;
				background-color: white;
				padding: 50px 50px 30px;
				box-shadow: 10px 10px 15px black;
				text-align: center;

			}

			.music {
   
				float: right;
				padding-bottom: 600px;
			}

			.dialog-bz-btn {
   
				text-decoration: none;
				font-size: larger;
				color: #1f4e5f;
			}

			h2 {
   
				font-family: Courier New;
			}

			#start {
   
				width: 40px;
				height: 40px;
			}

			a:hover {
   
				background-color: #f4f7f7;
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<div class="dialog-bz">
			<h2>I wear nothing but a few drops of perfume.</h2>
			<h2>把六月夜晚花园里氤氲升腾的花香包起来<br>送给亲爱的你</h2><br>
			<a href="主页.html" class="dialog-bz-btn"><b>立即探索</b></a>
		</div>

		<audio id="audio1" autoplay="autoplay" src="music/Richard Sanderson - Reality.flac" preload>
			对不起，您的浏览器不支持HTML5音频API
		</audio>
		<div class="music">
			<button id="play" οnclick="toggleMusic()"><img id="start" src="img/play.png" /></button>
		</div>

		<script>
			var music = document.getElementById("audio1");
			var toggleBtn = document.getElementById("play");

			function toggleMusic() {
   
				if (music.paused) {
   
					music.play(); //如果音乐未播放则播放音乐
					document.getElementById("start").src = "img/pause.png";

				} else {
   
					music.pause(); //暂停音乐
					document.getElementById("start").src = "img/play.png";
				}
			}
		</script>
	</body>
</html>

主页

**
效果图：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>欢迎来到香氛密语</title>
		<style>
			body {
   
				background: url(img/蓝灰色背景图.jpg) no-repeat center center;
				background-size: cover;
				/* 让背景图基于容器大小伸缩 */
				background-attachment: fixed;
				/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 此条属性必须设置否则可能无效*/
				background-color: #CCCCCC;
				/* 设置背景颜色，背景图加载过程中会显示背景色 */
			}

			#left {
   
				background-color: #79a8a9;
				color: #f4f7f7;
				height: 800px;
				width: 550px;
				float: left;
				margin-top: 25px;
			}

			#words {
   
				color: #79a8a9;
				font-family: NSimSun;
				/*font-family: FZShouJinShu-S10S;*/
			}

			#right {
   
				background-color: #dae9f4;
				height: 800px;
				width: 950px;
				float: right;
				margin-top: 25px;
			}

			footer {
   
				background-color: #1f4e5f;
				color: #f4f7f7;
				clear: both;
				text-align: center;
			}

			#video1 {
   
				float: left;
				height: 400px;
				width: 950px;
			}

			video {
   
				height: 400px;
				width: 570px;
				padding-left: 5px;

				padding-top: 5px;
			}

			#picture {
   
				height: 390px;
				width: 945px;
				float: right;
				background-color: #58C9B9;
			}