前言
八月十五，秋已過半，是為中秋。
“但愿人長久，千里共嬋娟”，中秋時節(jié)，氣溫已涼未寒，天高氣爽，月朗中天，正是觀賞月亮的最佳時令。古人把圓月視為團圓的象征，因此，又稱八月十五為“團圓節(jié)”。
在這個團圓夜，每個人心中都寄托著美好的祝愿，回顧自己往日的學(xué)習(xí)，也算是給自己一些祝福，簡單的做一些中秋節(jié)的網(wǎng)頁來復(fù)習(xí)一下前面的基礎(chǔ)知識。
先來看一下效果（點擊查看)
導(dǎo)航條分為五個模塊，跟著模塊來看一下各自的展示效果：
?? 導(dǎo)航條
在之前的文章中介紹過簡單導(dǎo)航條的制作，這個導(dǎo)航條的原理和之前的一樣，只不過利用css增加了更多效果。
html部分：
<div>
<ul class="nav">
<li><a href="今日中秋.html">今日中秋</a></li>
<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>
</div>
css部分：
/*對無序列表樣式進行更改*/
.nav{
list-style: none;
background-color: rgba(30,50,100,0.8);
width: 1000px;
margin: 20px auto 15px ;
/*隱藏超出部分*/
overflow: hidden;
border-radius: 30px;
zoom: 1;
}
.nav li{
float: left;
display: inline;
width: 200px;
}
/*對無序列表中的文字元素更改樣式*/
.nav a{
width: 100%;
/*允許在元素上設(shè)置寬度和高度。*/
display: inline-block;
/*文字居中顯示*/
text-align: center;
padding: 5px 3px;
text-decoration: none;
color: whitesmoke;
font-weight: bold;
}
/*設(shè)置鼠標懸停效果*/
.nav a:hover{
background-color: rgba(221,221,211,1);
}
??今日中秋
html部分
<div class="box2">
<img src="孔明燈1.png" />
</div>
<div class="box3">
<img src="孔明燈2.png" />
<img src="孔明燈3.png" >
<img src="中秋.png" />
</div>
css部分
/*設(shè)置一個背景*/
body{
background-image:url(月圓中秋2月亮.png);
background-size:cover;
position: fixed;
top: 0px;
left: 0px;
}
.box2{
border: transparent 1px solid;
height: 100px;
width: 1600px;
margin: 20px auto;
}
.box3{
border: transparent 1px solid;
height: 1100px;
width: 1600px;
}
.box2 img{
float: left;
height: auto;
width: 100px;
/*制作動畫效果 ease-in-out：低速開始、低速結(jié)束 infinite循環(huán)播放*/
animation:t1 5.5s ease-in-out infinite;
}
.box3 img:nth-of-type(1){
width: 500px;
height:auto;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-150%);
}
.box3 img:nth-of-type(2){
float: right;
display: inline;
height: auto;
width: 500px;
animation: t2 10s ease-in-out infinite;
}
.box3 img:nth-of-type(3){
float: left;
display: inline;
height: auto;
width: 400px;
margin-top: 100px;
animation: t1 10s ease-in-out infinite;
}
/*@keyframes 創(chuàng)建動畫，把它綁定到一個選擇器，否則動畫不會有任何效果。
指定的變化時發(fā)生時使用％，或關(guān)鍵字"from"和"to"，這與0％到100％相同。
*/
@keyframes t1 {
50% {
transform: translate(50px, 10px);
}
/*translate只是transform的一個屬性值；translate(x,y)基于原來的位置，沿X軸平移，長度為x，沿Y軸平移，長度為y*/
100% {
transform: translate(0, 0);
}
}
@keyframes t2 {
50% {
transform: translate(-80px, -110px);
}
100% {
transform: translate(0, 0);
}
}
?何為中秋
html部分
<div class="box">
<img src="嫦娥玉兔.png" />
<img src="月餅.png" />
<p>
中秋節(jié)，又稱祭月節(jié)、月光誕、月夕、秋節(jié)、仲秋節(jié)、拜月節(jié)、月娘節(jié)、月亮節(jié)、團圓節(jié)等，是中國民間的傳統(tǒng)節(jié)日。
中秋節(jié)源自天象崇拜，由上古時代秋夕祭月演變而來。中秋節(jié)自古便有祭月、賞月、吃月餅、看花燈、飲桂花酒等民俗，流傳至今，經(jīng)久不息。
</p>
<p>
中秋節(jié)起源于上古時代，普及于漢代，定型于唐朝初年，盛行于宋朝以后。
中秋節(jié)以月之圓兆人之團圓，為寄托思念故鄉(xiāng)，思念親人之情，祈盼豐收、幸福，成為豐富多彩、彌足珍貴的文化遺產(chǎn)。
最初“祭月節(jié)”的節(jié)期是在干支歷二十四節(jié)氣“秋分”這天，后來才調(diào)至夏歷八月十五日。 中秋節(jié)與春節(jié)、清明節(jié)、端午節(jié)并稱為中國四大傳統(tǒng)節(jié)日。
</p>
</div>
css部分
.box{
height:700px;
width: 1200px;
margin: 20px auto;
overflow: hidden;
border: 5px floralwhite solid;
border-radius: 80px;
}
.box p:nth-of-type(1){
margin-top: 5%;
color: red;
text-align: center;
line-height: 50px;
}
.box p:nth-of-type(2){
color: gold;
text-align: center;
line-height: 50px;
}
.box img:nth-of-type(1){
height: 700px;
width:400px;
margin-right: 5px;
float: left;
}
.box img:nth-of-type(2){
height: 700px;
width: 400px;
margin-left: 5px;
float: right;
}
??暢游中秋
html部分
<div class="bcg">
<p>點擊進入奇妙游</p>
<!-- 創(chuàng)建圖片存儲容器 -->
<div class="demo">
<!--插入一個超鏈接-->
<a href="">
<div class="demo1">
<!-- 引入輪播圖圖片 -->
<img src="佳人賞月.png" alt=""/>
<img src="戲曲嫦娥.png" alt="" />
<img src="明月.png" alt=""/>
<img src="月娥仙子.png" alt="" />
<img src="舞蹈.png" alt=""/>
</div>
</a>
</div>
</div>
css部分
.bcg{
height:700px;
width: 1200px;
margin: 20px auto;
background-image: url(輪播圖背景圖.png);
background-size: 100% 100%;
overflow: hidden;
border: skyblue 5px solid;
border-radius: 80px;
}
.bcg p{
margin-top: 70px;
margin-left: 750px;
font-size: large;
color: ghostwhite;
font-family: Arial,"Microsoft Yahei", "微軟雅黑";
}
/*用作顯示輪播畫面的容器*/
.demo{
width:500px;
height:400px;
margin-top: 50px;
margin-left: 600px;
border-radius: 10px;
overflow: hidden;/*用于隱藏超出展示容器的內(nèi)容部分*/
}
/*用于存放所有的輪播圖的容器*/
.demo1{
width:2500px;
height:400px;
animation:text 25s infinite linear;
font-size:0px;/*消除圖片間隔*/
}
/*輪播圖片*/
.demo1 img{
width:500px;
height:400px;
float:left;
}
@keyframes text {
/*0%-10%是圖片播放的時間，10%-20%是進行暫停*/
0%,10%{
margin-left:0px;
}
20%,30%{
margin-left:-500px;
}
40%,50%{
margin-left:-1000px;
}
60%,70%{
margin-left:-1500px;
}
80%,90%{
margin-left:-2000px;
}
}
??詩詞中秋
html部分
<div class="abc">
<div class="box1">
<img src="李白.png" />
<img src="徐有貞.png" />
<p>
中秋 唐·李樸<br />
皓魄當空寶鏡升，云間仙籟寂無聲；<br />
平分秋色一輪滿，長伴云衢千里明；<br />
狡兔空從弦外落，妖蟆休向眼前生；<br />
靈槎擬約同攜手，更待銀河徹底清。
</p>
</div>
<div class="box2">
<p>
中秋月 唐·齊已<br />
空碧無云露濕衣，群星光外涌清規(guī)。<br />
東樓莫礙漸高勢，四海待看當午時。<br />
還許分明吟皓魄，肯教幽暗取丹枝。<br />
可憐半夜嬋娟影，正對五侯殘酒池。<br />
</p>
<img src="蘇軾.png"/>
<p>
中秋月 唐·白居易<br />
萬里清光不可思，添愁益恨繞天涯。<br />
誰人隴外久征戍？何處庭前新別離？<br />
失寵故姬歸院夜，沒蕃老將上樓時。<br />
照他幾許人腸斷，玉兔銀蟾遠不知。<br />
</p>
</div>
<div class="box3">
<img src="張養(yǎng)浩.png" />
<img src="范仲淹.png" />
<p>
八月十五夜玩月 唐·劉禹錫<br />
天將今夜月，一遍洗寰瀛。<br />
暑退九霄凈，秋澄萬景清。<br />
星辰讓光彩，風露發(fā)晶英。<br />
能變?nèi)碎g世，翛然是玉京。<br />
</p>
</div>
</div>
css部分
.abc{
height:700px;
width: 1200px;
margin: 20px auto;
overflow: hidden;
border: 5px floralwhite solid;
border-radius: 80px;
}
.abc p:nth-of-type(1){
color: red;
text-align: center;
line-height: 50px;
}
.abc img:nth-of-type(1){
float: left;
margin-right: 0px;
width: 400px;
height: 200px;
}
.abc img:nth-of-type(2){
float: right;
margin-top:0px;
width: 400px;
height: 200px;
}
.abc img:nth-of-type(3){
text-align: center;
margin-top: 200px;
width: 400px;
height: 250px;
}
.abc img:nth-of-type(4){
float: left;
margin-bottom: 0px;
width: 400px;
height: 300px;
}
.abc img:nth-of-type(5){
float: right;
margin-bottom: 0px;
width: 400px;
height: 300px;
}
??月圓中秋
html部分
<div class="abc">
<div id="div">
<p id="desc"></p>
<!--默認顯示第二張圖片-->
<img src="picture1.png" alt="" style="width: 800px;height: 400px;">
<button id="pre">上一張</button>
<button id="next">下一張</button>
</div>
</div>
css部分
* {
padding: 0;
}
.abc{
height:700px;
width: 1200px;
margin: 20px auto;
overflow: hidden;
border: 5px floralwhite solid;
border-radius: 80px;
}
.abc p:nth-of-type(1){
color: red;
text-align: center;
line-height: 50px;
}
.abc img:nth-of-type(1){
float: left;
margin-right: 0px;
width: 400px;
height: 200px;
}
.abc img:nth-of-type(2){
float: right;
margin-top:0px;
width: 400px;
height: 200px;
}
.abc img:nth-of-type(3){
text-align: center;
margin-top: 200px;
width: 400px;
height: 250px;
}
.abc img:nth-of-type(4){
float: left;
margin-bottom: 0px;
width: 400px;
height: 300px;
}
.abc img:nth-of-type(5){
float: right;
margin-bottom: 0px;
width: 400px;
height: 300px;
}
js部分
/*只要頁面加載完畢，這個事件才會觸發(fā)*/
window.onload = function () {
/*通過元素名獲取一個類數(shù)組對象*/
var num = document.getElementsByTagName("img")[0];
//定義圖像地址
var shuzu = ["picture1.png", "picture2.png","picture3.png" , "picture4.png", "picture5.png","picture6.png","picture7.png","picture8.png","picture9.png","picture10.png", ];
//獲取按鈕
var prev = document.getElementById("pre");
var next = document.getElementById("next");
var index = 0;
//圖片描述
var pdesc = document.getElementById("desc");
pdesc.innerHTML = "一共" + shuzu.length + "張圖片" + ",當前是第" + (index + 1) + "張";
//注意此處前面是字符串的拼接，實現(xiàn)加法需要用到括號,默認顯示第一張圖片的時候，index是0。
prev.onclick = function () {
index--;
if (index < 0)
index = shuzu.length - 1;
num.src = shuzu[index];
pdesc.innerHTML = "一共" + shuzu.length + "張圖片" + ",當前是第" + (index + 1) + "張";//注意此處前面是字符串的拼接，實現(xiàn)加法需要用到括號
}
//點擊下一張，則index加一，當加到數(shù)組的總長度，也就是圖片總數(shù)時，index恢復(fù)默認值
next.onclick = function () {
index++;
if (index > shuzu.length - 1 )
index = 0;
num.src = shuzu[index];
pdesc.innerHTML = "一共" + shuzu.length + "張圖片" + ",當前是第" + (index + 1) + "張";//注意此處前面是字符串的拼接，實現(xiàn)加法需要用到括號
}
}
總結(jié)
以上就是利用html、css和JavaScript做的一些簡單的網(wǎng)頁了，感興趣的小伙伴可以去試試哦，可以練練手。
初學(xué)乍道，有很多不足的地方，還請各位前輩指點，萬分感謝！文章來源：http://www.zghlxwxcb.cn/news/detail-727053.html
最后祝大家中秋快樂，月餅炫起來吧。文章來源地址http://www.zghlxwxcb.cn/news/detail-727053.html
到了這里，關(guān)于中秋之美——html+css+js制作中秋網(wǎng)頁的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
