HTML期末设计——代码篇
事先声明
引⼊页
效果图：
<!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;
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 = ElementById("audio1");
var toggleBtn = ElementById("play");
function toggleMusic(){
if (music.paused){
music.play(); //如果⾳乐未播放则播放⾳乐
}else{陈慧琳个人资料
music.pause(); //暂停⾳乐
殷桃与文强亲密图片ElementById("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{
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;有关农业生产的谚语
}
#poem{
float: right;
color: #1f4e5f;
/*font-family: NSimSun;*/ background-color: #c6e5d9;
text-align: center;
width: 370px;
height: 397px;
padding-top: 5px;
}
img{
float: left;
width: 510px;
height: 320px;
margin-top: 50px;
}
nav{
display: block;
padding: 10px 60px;
padding-top: 0;
margin-left: 300px;
}
ul{
list-style-type: none;
}
a:link,
a:visited{
display: block;
font-weight: bold;
color: #f4f7f7;
background-color: #7f9eb2;
box-shadow: 10px 10px 15px #f4f7f7; width: 200px;
padding: 10px;
padding: 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
a:hover{
background-color: #aacfd0;
}
a:active{
background-color: #79a8a9;
}
li{
float: left;
}
</style>
</head>
<body>
<div id="words">
<h3> ⼤地夜幕四周，天空星光闪烁，天与地之间充满轻盈芬芬< br>
；闪着微光的萤⽕⾍飞来，说：“美⼈啊，请你帮我将这空⽓全部包起来好么？”<br>
“是送给谁的礼物吗？”<br>
“是的呀，我将它送给你。”</h3>
</div>
<nav>
<ul>
<li><a href="溯源.html">⾹⽔之都</a></li>
<li><a href="分类.html">⾹⽔分类</a></li>
<li><a href="男⾹与⼥⾹.html">男⾹与⼥⾹</a></li>
<li><a href="定制密语.html">定制密语</a></li>
</ul>
</nav>
<div id="left">
<ul>
<li>
<h2>Chanel</h2>
<h3>I wear nothing but a few drops of Chanel No.5.</h3>
</li>
<li>
<h2>Calvin Klein</h2>
<h3>We are one for all for ever.</h3>
</li>
<li>
<h2>DIOR</h2>
<h3>Gold is cold.Diamonds are dead.A Limousine is a car.Don't Pretend.Feel what's real.C'est Ca Que J'adore.
<br>Dior Addict the now fragrance from Dior</h3>
</li>
<li>
<h2>Tom Ford</h2>
<h3>再来⼀趟我的梦⾥吧，就今晚。这次我要冲进你怀⾥，<br>呼吸着你⾝上好闻的味道告诉你这⼏天的委屈以及我好想你</h3>
</li>
</ul>
</div>
<div id="right">
<div id="video1">
<video src="img/视频.mp4">对不起，您的浏览器不⽀持视频API！</video>
<div id="poem">
<h2>Daisy</h2>
<h3>漫⼭遍野的花海<br></h3>
发布评论