资源描述
HTML期末设计
代码篇
事先声明这个网页设计也就是用了我学到的知识做的一个中规中矩的网页，可以给以后 的大一新生们做个参考，和商业网站的效果肯定是没得比的，期望太高的可以 关掉了
引入页效果图:
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: #lf4e5f;/*font-family: NSimSun;*/
background-color: #c6c5d9;text-align: center;
width: 370px;
height: 397px; padding-top: 5px;)
img (
float: left;
width: 510px;
height: 320px; margin-top: 50px;}
nav (
display: block; padding: lOpx 60px;
padding-top: 0; margin-left: 300px;}
ul (list-style-typc: none;
a: link, a:visited (
display: block; font-weight: bold;
color: #f4f7f7;
#f4f7f7;
background-col or: #7f9eb2; box-shadow: lOpx lOpx 15px width: 200px;
padding: lOpx;
text-align: center; text-decoration: none; text-transform: uppercase;}
a:hover (background-color: ttaacfdO;
}a:active (
background-color: #79a8a9;li {
float: left;}
</style></head>
<body><div id="words〃>
<h3> &nb sp; 大地夜幕四周，天空星光闪烁，天与地之间充满轻盈芬 芬 <br> 闪着微光的萤火虫飞来，说："美人
啊，请你帮我将这空气全部包起来好么？ ” <br>
“是送给谁的礼物吗？ ” <br>
“是的呀，我将它送给你。"</h3></div>
<nav><ul>
<li><a href—溯源.html〃>香水之都</a></li>
<li><a hrcf=〃分类.html〃>香水分类</a></li>
<1 iXa href二〃男香与女香.html〃>男香与女 香</a></li>
<li><a href=//定制密语.html，z>定制密语</a></li>
</ul></nav>
<div id=〃left〃><ul>
<li><h2>Chanel</h2>
<h3>I wear nothing but a fewdrops of Chanel No. 5. </h3>
</li> <li>
<h3>We are one for all forever. </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=〃videol">
<video src=/zimg/视频.mp4”>对不起，您的浏览器不支持视频API! </video>
<div id=〃poenT><h2>Daisy</h2>
<h3>漫山遍野的花海<br></h3><h3>溪边微凉的夏风<br></h3>
<h3>白色纱裙的女孩<br></h3><h3>那个我们永远怀念的夏天
<br></h3><h3>有一种诗意町以形容见空的瓶
底<br></h3><h3> 是酒?</h3>
<h2>还是香水</h2></div>
</div><div id=〃picture”〉
<img src="img/l 小图.jpg” /><img style="float: right;width:
435px;〃 src=，，img/祖马龙动画 1. gif” /></div>
</div>
<audio id=〃audiol〃 autop 1 ay=/，autopiayz， src=z，music/Richard Sanderson - Reality. flac/z preload>对不起，您的浏览器不支持HTML5音频API
</audio><footer>
版权 © zhuchuchu5</footer></body>
</html>分页一
代码:
<!DOCTYPE html> <html><head>
<meta charset=〃utf-8〃><title> 香水缘起 </title>
<meta name=〃viewport〃 content=z/initial-scale=l. 0, user-scalable=noz，/>
<meta http-equiv="Content-Type" content=，，text/html; charset=utf-8z，/><style type=〃text/css">
html{height:100%）body {
height:100%;width:70% marginTeft:30%;
padding:25px;background: u「l （img/背景图 3. jpg） no-repeat
center center;background-size: cover;
/*让背景图基于容器大小伸缩*/background-attachment: fixed;
/*当内容高度大于图片高度时，背景图像的位置相对于viewport固定此条属性必须设置否则可能无效*/ background-color: #CCCCCC;
/*设置背景颜色，背景图加载过程中会显示背景色 }^container(height:100%;}
img(width: 50px;
height: 50px;float: right;
}#world{
border-left: 600px;margin-top: 15px;
margin-bottom: 5px:
padding-left: 30px;border: 2px dashed #1F4E5F;
font-size: larger;,/*\vidLh: 650px;*/
)h2(
margin:0;width: 600px;
<!DOCTYPE html>
<html><head>
<meta charset=z，utf-8，z><title>欢迎来到香氛密语</title>
<style>body （
background: url （img/1 的背景图.jpg） no repeat center center;
background-size: cover:
/*让背景图基于容器大小伸缩*/ background-attachment: fixed;
/*当内容高度大于图片高度时，背景图像 的位置相对于viewport固定此条属性必须设置否则可能无效*/}
h3(margin: 0;
width: 500px;}
</style><script type=〃text/javascript"
src=〃. map. baidu. com/api?v=2. 0&ak=99kGo9f4AwIInUv2b8MMxAnrSwOYHKiKN〃>
//v2. 0版本的引用方式：
src=，z. map. baidu. com/api?v=2. O&ak二您的密钥"</script>
</head><body>
<h2>香水之都一一法国普罗旺斯格拉斯</h2><h3> “没有在格拉斯历练过的人，不配自称为香水制造
者。” </h3><div id=〃world〃>
<p>从18世纪末以来，格拉斯就是法国香水业的中心。
在这座南法小城，有30多家香水厂和调香实验室,三分之二的居民工作都和香水有关。随着近些年旅游
产业的发展,
参观香水工厂，了解香水文化，成为了不少游客来到 这里深度游的选择。</p></div>
<div id=z/container，，X/div><script type=〃text/javascript〃>
var map = new BMap. Map("container");//创建地图实例
var point = new BMap. Point (6. 924, 43. 6591);〃创建点坐标 116.404, 39.9156.92478 43.6591
map. centerAndZoom(point, 15);//初始化地图，设置中心点坐标和地图级别
map. centerAndZoom(new BMap. Point (6. 924, 43. 6591),11)；；
map. addControl(new BMap. NavigationControl());</script>
<a href=”主页.html^Ximg src="img/返回首页.jpg”/></a>
</body>分页二
<!DOCTYPE html><html>
<head><meta charset=，/utf-8，，>
<title> 香水分类 </title><style type=〃text/css">
body ( background: url (img/背景图 3. jpg) no repeat center center;
background-size: cover;
/*让背景图基于容器大小伸缩*/ background-attachment: fixed;
/*当内容高度大于图片高度时，背景图像 的位置相对于viewport固定此条属性必须设置否则可能无效*/ background-color: #CCCCCC;
/*设置背景颜色，背景图加载过程中会显 示背景色*/}
div (background-color: #f4f7f7;
width: 800px;height: 900px;
margin: auto;box-shadow: lOpx lOpx 15px #7F9EB2;
}hr (
width: 80%;
background-color: #7F9EB2; height: 3px;}
hl (
padding-top: 35px;
color: #7F9EB2: text-align: center;}
h3 {
padding-left: 50px; padding-right: 50px; color: #lf4e5f;}
table (border-collapse: collapse;
width: 70%;margin: auto;
table,td,
th {border: 3px solid #D1B6E1;
}.alt (
background-color: #C6E5D9;color: #1F4E5F;
}tr {
color: #1F4E5F;background-color: white;
}img (
width: 50px;height: 50px;
float: right;}
</style></head> <body>
<div><hl>香水分类</hl>
<hr><h3>
香水是一种混合了香精油、固定剂与酒精的液体，用来让物体（通常是人体部位）拥有持久且 悦人的气味。<br>
根据酒精与香料 的比例不同，相对的在香味的表现上也会有所差异，这个比例也就是所谓的赋 香率，当赋香率越高，
也就代表酒精浓度较低，香精的比例也就比 较高，香水也会比较持久，一般分为四个等级。<br>
精油是取自于花 草植物的蒸馄，比如说橘花或玫瑰。如果无法蒸馅的时候，就会使用脂吸法 enfleurage,比如茉莉原精 Jasmin AbsolutCo
酒精浓度则取决于是香水、淡香水还是古龙 水，并且香水的保存期限通常是五年。
</h3> <tablc><th>香水的等级</th>
<th> 缩写 </th>〈th> 浓度 </th>
<th>持续时间</th><th> 特征 </th>
</tr><tr>
<th> 香精 <br>Parfum</th> <th>P</th><th>15"30%</th> <th>5"7h</th>
<th>香料的纯度最高，持续时间 长，通常都是以沾式的设计为主，少量使用在
手腕及颈部，就能够有很 持久的表现</th></tr>
<tr><th>淡香ffi<br>Eau de
Parfum</th><th>EDP</th>
<th>5h 左右</th>
<th>淡香精的持久度表现会比淡香 水来的理想，若您的工作场合
或活动的环境不太允许您 常常补香，淡香精会是您最佳的选择。〈/th></tr>
<tr><th>淡香水<br>Eau de
Toilette</th><th>EDT</th>
<th>5"10%</th><th>3~4h〈/th>
<th>淡香水的酒精比例较高，较容 易挥发，通常清晨使用后，
在中午休息可以再补香， 微微的气息可以持续到下午，适合喜欢清爽的人。</th></tr>
<tr><th>古龙水<br>Eau de
Cologne</th><th>EDC</th>
<th>广2h〈/th>
<th>古龙水多半以清爽的柑橘调居 多，适合用在运动之后，洗澡之后，
或者想要转换心情及恢复 精神的时候使用。〈/th></tr>
</table>
<h3> 香精适用于夜晚外出 或赴宴会等正式场合使用，每次只需少量涂抹腕部等重点部位即可；香水适合白天的宴会或是假期外出使用；淡 香水，是男用香水中最常见的品种，香味轻柔，更适合办公室的环境.</h3>
</div><audio id=〃audiol〃 autoplay="autoplay”
src二〃music/Richard Sanderson - Reality. flac〃 preload>对不起，您的浏览器不支持HTML5音频API
</audio><a href=/，主页.html^Ximg src="img/返回首页.jpg”
/></a></body>
</html>分页三
background-color: #CCCCCC;
/*设置背景颜色，背景图加载过程中会显示背景色*/
div.dialog-bz {width: 550px;
height: 300px;margin: auto;
margin-top: 200px;
background-color: white;padding: 50px 50px 30px;
box-shadow: lOpx lOpx 15px black;text-align: center;
.musicfloat: right;
padding-bottom: 600px;
效果图:
代码：
<!DOCTYPE html><html>
<head><meta charset=//utf-8，，>
<title>男香与女香</title><style>
/*body(background-color: #C6E5D9;
}*/hl (
color: #1F4E5F;text-align: center;
#oneword (
float: left; margin: auto;
padding: lOpx 26px;
margin-top: 50px;
color: #1F4E5F;}
#one (
display: block; float: left;
width: 30px;
height: 60px;padding-top: Opx;
margin-top: 50px;
}抑ord 1 (
margin-left: 500px;text-align: center;
width: 750px;
height: 150px;
border: 3px dashed mediumpurple; font-size: larger;
color: #1F4E5F;}
#word2 (margin-left: lOpx;
margin-top: 50px;paddi ng-1eft: 20px;
width: 750px;height: 200px;
border: 3px dashed mediumpurple;font-size: larger;
color: #1F4E5F;)
woword (float: right;
margin-top: T50px;margin-right: lOOpx;
color: #1F4E5F;#two {
display: block; float: right;
width: 30px; height: 60px;
margin-right: 65px;
margin-top: ~160px; color: #1F4E5F;}
#two2 (
display: block; float: right;
width: 30px;
height: 60px;margin-right: 470px;
margin-top: T60px;
#three (display: block; float: left;
width: 30px; height: 60px; padding-top: Opx;margin-top: 150px;
)ttthreeword {
float: left; padding: lOpx 26px; margin-top: 150px;color: #1F4E5F;
}#word3 (
margin-left: 500px; margin-top: 50px; width: 900px;height: 300px;
border: 3px dashed mediumpurple; font-size: larger;padding-left: 20px;
padding-top: 20px;color: #1F4E5F;
}img (
width: 50px;height: 50px;
float: right;}
</style></head>
<body><hl>男香与女香</hl>
<hr><p style="font-size:
1 arger; 〃> 香水是我们平时经常可以见到有很多人都 喜欢使用的一种彩妆产品，现在市面上的香水都分男士香水和女士香水，男香 和女香是有一定区别的，那么男士香水女士能用吗？如何区分传统意义上的男 香和女香。</p>
<h2Ximg id="one" src="iing/边框左.jpg〃 /><span id=〃oncword〃>男士香水女士能用吗？ </span>
<img id= one src=】mg/边框石.jpg /></h2>
<div id="wordl〃>
<p>可以，不过要选择比较中性的男士香水，如果你 用了一种比较男性化的男士香水，<br>
异性在你身边可能会觉得很奇怪，当然，这 只是一种下意识的感受，不是所有人<br>都会很敏感，但是当你用男士香水 后，在香水的尾调也就是大概30分钟
或更久<br>一些之后，你自己也会有明显的 感觉，不如女士香水和你本人结合的那么自然。
</p></div>
<div id=〃word2〃>〈P> 女香 <br>
一般花、粉、甜会被认为是女香。<br> 从取材上看，女士香水很广泛，花，花木， 花果，奶香调都有。味道比较香甜。<br>传统意义的男香就是被大众叫做古龙水的味
道。<br>男士香水一般树木，皮革，烟草等香味多
些。味道通常会有比较重的麝香味，比较干练，清爽。<br></p>
</div><h2Ximg id="two" src=z，img/边框右.jpg〃 />
<span id=，，twoword〃>如何区分传统意义上的男香和女香。span>
<img id=”two2〃 src="img/边框左.jpg" /></h2>
<h2Ximg id="three" src=*img/边框左.jpg" /><span id=〃threcword〃>男士香水怎么喷效果最好
</span><img id二〃three" src二〃inig/边框右.jpg〃 />
</h2><div id=〃word3">l、香精是以“点”,男士香水是以
“线” <br>淡男士香水是以“面”的方式来喷涂，浓度越低，涂
抹的范围应越广。<br>
首先将男士香水分别喷于左右手腕静脉处，双手中指 及无名指轻触对应手腕静脉处，随后轻触双耳后侧、后颈部；<br>
轻拢头发，并于发尾处停留稍久;双手手腕轻触相对 应的手肘内侧;使用喷雾器将男士香水喷于腰部左右两侧，左右手指<br>
分别轻触腰部喷香处，然后用沾有男士香水的手指轻 触大腿内侧、左右腿膝盖内侧、脚踝内侧，七点擦香法到此结束。<br>
注意擦香过程中所有轻触动作都不应有摩擦，否则香 料中的有机成分发生化学反应，可能破坏男士香水的原味。</div><audio id=〃audiol〃 autoplay=/zautoplay//
src=〃music/Richard Sanderson - Reality. flac〃 preload>对不起，您的浏览器不支持HTML5音频API
</audio><a href="主页.html^Ximg src=*img/返回首页.jpg”
/></a></body>
</html>分页四
效果图:
代码：
<!DOCTYPE html><html>
<head><meta charset=，，utf-8，z>
<title> 定制密语 </title><style>
body （
background: url （img/背景图 4. jpg） no repeat center center;
background-size: cover;
/*让背景图基于容器大小伸缩*/
background-attachment: fixed;.dialog-bz-btn (
text-decoration: none;font-size: larger;
color: #lf4e5f;}
h2 {font-family: Courier New;
}ttstart {
width: 40px;height: 40px;
}a:hover (
background-color: #f4f7f7; padding: lOpx;}
</style></head> <body>
/*当内容高度大于图片高度时，背景图像的位置相对于viewport固定此条属性必须设置否则可能无效*/ background-color: #CCCCCC;
/*设置背景颜色，背景图加载过程中会显 示背景色*/}
form(height: 750px;
width: 850px;box-shadow:lOpx lOpx 15px black;
background-color: white;/*margin-left: 400px;*/
margin:auto; /*当 margin 设置为 auto 则 会有居中对齐的效果*/)
hr (width:80%;
height:3px;background-color:#If4e5f ;
border: 0;
button(background-color: #519D9E;
color: white;margin-top: 20px;
margin-left: 380px;padding: lOpx;
border: 20px;)
form (height: 950px;
width: 900px;}
label (margin-left: 15px;
}ol {
margin-left: 80px;} li(
margin-top: lOpx;
margin-bottom: lOpx;
color: #lf4e5f; font-size: larger;)
hl(color: #lf4e5f;
text-align: center;padding-top: 30px;
padding-bottom: 5px;margin: 0;
}ol (
margin-left: lOOpx;}
h4(
margin-1eft: 250px;
margin-right: 250px;
text-align: center; font-size: larger;
background-color: whitesmoke;
color: #519D9E;img(
width: 50px;height: 50px;
float: right;}
</style></head>
<body><form mcthod="post〃 action="URL〃 autocomplete=〃on">
<hl>香水倾向调查</hl><hr />
<button o nclick=〃myFunction() 〃>获取六月香氛密 语</button>
<h4 id=〃demo〃>
</hl>
<div>
<ol>
<li>您的性别</li>
<input type=〃radio〃
name=〃ql〃 rcquircd>
<input type="radio〃
〃 c〃 name二 qZ
requi red>
<li>您的年龄段是？ </li>
<input type="radio”
name=〃ql〃 rcquired>
〃 c〃
name二 qZ
required>
18岁以下 <input typc=〃radio〃
〃 c〃 name= q2
rcquircd>
18-25 岁
<input type="radio”
〃 c" name= q2
required>
26-30 岁
<input type="radio”
31-35 岁<input Lype=〃radio〃
name二〃q2〃 required>
35岁以上
<ii>您门常是否会使用香
水？ </li><input
type=〃radio”
name= q3required>
偶尔<input
type=〃radio”
〃 c 〃name二 q3
requi red>
有时<input
type="radio”
name二〃q3required>
经常<input
type="radio”
name=〃q3〃rcquircd>
每天<li>您喜欢以下什么类型
的味道？（可多选）</li>
<input type=〃checkbox”
name=k value="q4” />花 香
<input type="checkbox”
name二k value=〃q4〃 />木质香
name=k value—q4〃 />果香
<input type=〃checkbox”
name=k value=〃q4〃 />都不喜欢
<li>您喜欢以下哪一类别
的香水？（可多选）
<br /Xinputtype=〃checkbox" name=k
value=〃q5〃 />香精<br /Xinput
type=〃checkbox”name=k value="q5" />淡香精
<br /Xinputtype=〃checkbox”
name=k value=〃q5〃 />淡香水<br /Xinput
type=〃checkbox"name=k value="q5〃 />古龙水
<br /Xinputtype二"checkbox”
name二k value=〃q5〃 />都不喜欢</li>
</ol> <br /Xbutton type=〃submit”〉提
交问卷</button>
<script>function myFunction() (
var x;var d =
Math, round (Math, random () * 13);switch (d) (
case 0:
x二〃芦丹氏八月夜桂花＜br＞把八月夜晚花园里氤氟升腾的花香包起来，送给亲爱的你…〃；
break;case 1:
x = "Chanel No. 5<br>I wear nothing but a few drops of ChanelNo. 5.";
break;case 2: x = 〃ck be＜br＞Be good, be bad, just be yourself. /z;
break;case 3: x二〃YSL反转巴黎＜br〉从我闻到她身上香水味的那一刻起，脑子里已
经想和她过完一生〃；break;
case 4: x二〃芦丹氏孤儿怨＜br＞我即将破碎，但我依旧完整。我见过人生百态，生而如此不凡。我从不难过，人间不值得。世人说她孤傲高冷，但总有人
能一眼看穿她深藏的温柔。"；break;
case 5:
x = 〃罗意威事后清晨＜br＞灵动清甜的佛手柑，馥郁温暖的檀香，这是属于你的味道〃;
break;case 6:
x = 〃香奈儿蔚蓝＜br＞假如可以，我想余生的每一秒记忆，都是关于你的香气〃
break;case 7:
x = ?zMiuMiu＜br＞想与你呆坐到黄昏,跳舞到清晨，地暗天昏,虚度人生〃;
break;case 8:
x = "Byredo无人区玫瑰＜br＞我踏碎所有的冰山，不远万里，去找你〃;break;
case 9:
x二〃Kenzo风之恋＜br＞我们出生穿的第一件衣服，是风。〃;
<div class=〃dialog-bz〃><h2>I wear nothing but a few drops of
perfume. </h2><h2>把六月夜晚花园里氤氯升腾的花香包起来<br>送
给亲爱的你</h2Xbr><a href=〃主页.html〃 class=/，dialog-bz-btn//><b>
立即探索</b></a></div>
<audio id=〃audiol〃 autoplay="autoplay”src二〃music/Richard Sanderson - Reality, flac" preload>
对不起，您的浏览器不支持HTML5音频API</audio>
<div class=〃music”〉<button id二"play”
o nclick=z，toggleMusic () ^Ximg id=〃start" src="img/play. png〃/></button>
</div><script>
var music = document. gctElemcntByld(〃audiol〃)；break;
case 10:
x = "Bvlgari白茶＜br＞白茶清欢无别事，我在等风也等你，若酒折柳今相离，无风无月也无你〃;
break;case 11:
x二〃银色山泉＜br＞这个世纪疯狂、没人性、腐败，你却一直清醒、温柔、一尘不染〃;
break;case 12:
x = "Gucci罪爱〈br＞永不为自己的快乐而感到有罪〃;break;
document. getElementById(〃demo〃). innerHTML 二 x:
</script>
</div>
</form>
<audio id=〃audiol〃 autoplay="autoplay〃 src=zzmusic/Richard Sanderson - Reality, flac" preload> 对不起，您的浏览器不支持HTML5音频API </audio><a href="引入.html^Ximg src="img/返回首页.jpg”
/></a></body>
</html>-全文完-
var toggleBtn =document. gctElementByld(〃play〃)；
function toggleMusic() (if (music, paused) (
music, play (); 〃如果音乐未播放则播放音乐
document. getElementByld C'start^). src = 〃img/pause. png〃；
} else (
music, pause() ; //暂停音乐 document. getElementByld (/zstartz/). src = 〃img/play. png〃 ；}
}</script>
</body></html>
**主页
主页
**
代码：
<!DOCTYPE html><html>
<head>
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
