中秋節網頁設計，傳統文化中秋節網頁，中秋節網頁設計作業

秋節網頁設計有12個頁面組成，帶js圖片輪播。

網頁介紹了中秋節文化起源，歷史沿革，風俗習慣，各民族傳統已經神話傳說個中秋相關的古詩詞。

網頁設計模板可以用dw、hbuilder vscode、 sublime等編輯軟件進行修改和查看并可以修改圖片文字等

網頁設計效果圖：

網頁設計首頁源代碼：

首先，我們來分下一下，這個海報動態部分的組成部分：

1.主題和利益點的上下動態部分；

2.孔明燈飄上天的動態部分；

3.大背景切換的動態部分；

4.京東狗附在月亮圖的切換動態部分。

海報的各個部分都被分割成好幾個部分而獨立存在，他們之間的獨立相互結合在一起形成了整個整體，獨立的個體利用HTML語言把他們結合起來，這就是網頁設計的功能。我們平時在電商設計中，美工設計利用PS做好海報生成JPG圖片，圖片大了利用DW切下圖，切完圖，上傳圖片空間，添加對應鏈接就OK了。一些大的店鋪可能都很專業，也許會有前端工程師的崗位，他們會把美工做成的圖交給前端工程師，前端工程師再把圖片利用css,html和JavaScript實現網頁動態的功能。

也許，你以后會想開一家屬于自己特點的店鋪，有錢了可以把這些交給自己的前端工程師，若你經濟上不允許，自己學，自己來可以，如今的網絡那么發達，什么都可以學，只要你想學，什么都有。所以，你是否希望你的店鋪能有別于其他的店鋪嗎？不僅有特效，還有視頻（暫且不做介紹）。

對于電商的設計師來說，不需要懂得太多的html(網頁語言)，只要懂得DIV ul li position z-index a就足夠了，比如這個定位，什么時候用相對定位，什么時候用絕對定位，這個DIV的層級是多少，在那個div的上面還是下面等等。如果你想讓你的店鋪有更多的特效出現，那么CSS就要花點時間了，不過，這個應該不是很難，很容易懂，這個有點扯遠了。

對于這張海報來說，最外面的容器是名字為movebox的div，它是父級元素，把它的位置定位為相對位置，也就是position:relatvie;那么它里面的子級元素就以絕對位置來定位，我們在CSS中看到很多的position:absolute;以絕對定位的div就結合其中的left,top,right,bottom來具體定位，這個數字是多少呢？我們可以用PS來確定具體的大小數值。

1.主題和利益點它們所在的div名字的CSS樣式格式分別是：

.wordall{position:absolute;top:10px;left:-20px;z-index:20;animation: worda 6s linear infinite; } // 天涯共此食

.wordald{position:absolute;top:10px;left:0px;z-index:10;animation: worda 6s linear infinite;} // 禮盒買一贈一，部分每滿199減100

這兩張png圖的尺寸都是1920x768px，他們的絕對定位距頭部TOP10px,距離左邊的距離一個-10px,另一個是0px,他們引用一個共同的運動，這個運動的名字是 worda,這個運動的時間是6秒，線性漸變，永遠往返運動。這個運動的CSS格式就是：

@keyframes worda {

0% { transform: translateY(0px); }

30% { transform: translateY(5px);}

60% { transform: translateY(10px);}

90% { transform: translateY(5px);}

100% {transform: translateY(0px);}

}

我大概翻譯下這個運動的意思：如果是大神或者專業的可以忽略我的啰嗦，當這個運動在6s的0%時間里，運動的位置是0px，也就是說不動，當運動在6s的30%時間里，在y軸向上運動了5px，在6s的60%時間向上運動了10px,在6s的90%時間里向上運動了5px(也就是說從最高點回來了5px),在6s的100%時間里，也就是6秒鐘的最后，回到了最初的起點。

就是這樣一個格式造就了這個圖形做上下來回往返運動。

其實，我們可以改下，把格式里的Y改成X，她就會做左右來回的往返運動。我們可以設想再改下，給這個運動格式添加X和Y，它會怎樣的運動呢？這個格式是有的。就是這樣稍微的改動它就會有另一種的表現形式，這就是CSS的魅力所在！

2.孔明燈飄上天動態部分：

這個CSS所想表達的意思就是：孔明燈突然從屋檐上出現，緩緩地放飛上天，慢慢地消失在人們的視野里。

孔明燈的圖片也是PNG格式，有四張圖片，他們的大小也是1920x768，跟外部的DIV容器大小是一樣的，他們div的class名字分別是：kongming1,kongming2,kongming3,kongming4。他們的CSS樣式格式分別是：

.kongming1{position:absolute;animation: kma1 9s linear infinite;z-index:3;}

.kongming2{position:absolute;animation: kma2 10s linear infinite;z-index:3;}

.kongming3{position:absolute;animation: kma3 7s linear infinite;z-index:3;}

.kongming4{position:absolute;animation: kma4 12s linear infinite;z-index:3;}

這一次它們的運動軌跡是不一樣的，所以名字不一樣kma1 ,kma2 kma3 kma4；還有時間也不一樣9s 10s 7s 12s 。

我只列出其中兩項出來做例子：

@keyframes kma1 {

0% { transform:translate(0px,0px); opacity: 0; }

9% { transform:translate(-8px,-8px);opacity: 1;}

92% { transform:translate(-155px,-155px); opacity: 1; }

100% {transform:translate(-195px,-195px);opacity: 0; }

}

@keyframes kma2 {

0% { transform:translate(0px,0px); opacity: 0; }

6% { transform:translate(-10px,-10px);opacity: 1;}

90% { transform:translate(-162px,-162px); opacity: 1; }

100% {transform:translate(-180px,-180px);opacity: 0; }

}

這個格式跟上面的格式基本一樣的，我想有我前面的翻譯，這個小白們應該發現不會很難了吧，你們猜的不錯，這個格式包含了X軸和Y軸方向上的運動，括號里面第一個是X軸方向的參數值，第二個是Y軸方向的，只不過上面只有一個屬性transform(變形)，這一次有了第二個屬性：opacity(透明)，1表示出現，0表示隱藏。就這樣一個格式，舉一反三就簡單多了。

3.大背景的切換主題：

這大背景看似是兩張圖片的切換，如果沒看到代碼，不是精通的我們很難發現是怎么做的，但看了代碼之后，才發現原來是這么簡單。

其實它兩張圖片，其中有一張不用變的，只需要變第二張背景圖片就可以了，也就是說對第二張圖片用CSS來實現出現和隱藏的功能。

它的CSS樣式格式如下：

.imgbgl{position:absolute;animation: bgl1 18s linear infinite;z-index:2;width:1920px;}

@keyframes bgl1 {

0% { opacity: 0; }

45% { opacity: 0;}

50% { opacity: 1;}

95% { opacity: 1;}

100% { opacity: 0;}

}

這個大背景的切換主題時間跟下面要講的京東狗圖片切換主題的時間是一樣的（來個承上啟下）

4.京東狗附在月亮圖的切換動態部分。

.moon1{position:absolute;animation: moon1 18s linear infinite;z-index:8;}

.moon2{position:absolute;animation: moon2 18s linear infinite;z-index:8;}

@keyframes moon1 {

0% { transform: translateY(768px); }

42% { transform: translateY(768px);}

50% { transform: translateY(0px);}

92% { transform: translateY(0px);}

100% {transform: translateY(768px);}

}

@keyframes moon2 {

0% { transform: translateY(0px); }

42% { transform: translateY(0px);}

50% { transform: translateY(768px);}

92% { transform: translateY(768px);}

100% {transform: translateY(0px);}

}

同樣，這兩張png圖的大小也是一樣的1920x768，我們從特效的表現來看，這兩個動作是反向而來的，你左我右，你上我下的意思，看參數就知道了，在同一段時間里，我們所要到的那幾個地方都是一樣的，只不過時間不一樣，你8點在北京，我8點在上海，你19點在上海，我19點在北京，打個簡單的比喻讓人易于理解。

總結：這個中秋的海報設計得很有意義：中秋到了，雖然你我都身在異地，但我們在共同的節日了，共享一樣的美食就如同陪在家人身邊一樣。

兩只京東狗圖片和背景圖片的同時切換就襯托了天涯這個主題，第四部分的CSS特效起到了海報畫龍點睛的作用。

這就是CSS的魅力所在，還好京東的商家店鋪不同天貓，CSS權限在京東是免費的，而在天貓是需要購買的！

如果有需要完整代碼的小伙伴歡迎在底下留言，我會把代碼發給你們，喜歡的小伙伴就點一波關注吧！自媒體不容易，多謝大家的支持！

（本文所涉及到的圖片，代碼版權歸原作者所有，不可用作商業用途，僅供學習之用）

近閑來無事，做個摸魚界面圖，時刻提醒自己還有多久又能享受假期。

界面部分代碼：

<div class="title">摸魚日歷</div>
    <div class="main">
       <div class="header">
        摸魚快樂，快樂摸魚
       </div>
       
        <div class="main-box">
            <div class="main-left">
                <div class="time-title" >
                    <div>距離周末還有：</div>
                    <div class="time-text-box" id="day"></div>
                </div>
                <div  class="time-title">
                    <div>距離中秋還有：</div>
                    <div id="zq"></div>
                </div>
                <div  class="time-title">
                    <div>距離十一還有：</div>
                    <div id="sy"></div>
                </div>
                <div  class="time-title">
                    <div>距離過年還有：</div>
                    <div id="gn"></div>
                </div>
            </div>
            <div class="main-right">
                <div class="clock" id="clock"></div>
                <div class="action-box"></div>
            </div>
        </div>
    </div>

樣式代碼

<style>
    .title {
        width: 100%;
        height: 50px;
        background-color: #f5f5f5;
        text-align: center;
        line-height: 50px;
        font-size: 20px;
        font-weight: bold;
    }
    
    .main {
        width: 1000px;
        height: 600px;
        margin: 0 auto;
        background-image: url('image/background.png');
        background-size: cover;
    }
    
    .header {
        width: 100%;
        height: 50px;
       
        text-align: center;
        line-height: 50px;
        font-size: 20px;
        font-weight: bold;
        border-bottom: 5px solid #941414;

    }
    
   
    .main-box{
        margin-top: 20px;
        display: flex;
        flex-direction: row;
    }
    .main-left{
        width:60%;
        height:100%;
    }
    .time-title{
        display: flex;
        flex-direction: row;
        padding: 20px;
        font-size: 20px;
        align-items: center;
        
    }
    .time-text{
        font-size: 40px;
        font-weight: bold;
        color: red;
    }
    .time-text-box{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .main-right{
        width:40%;
        height:100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .clock{
       width: 60%;
       background-color: rgba(255, 255, 255, 0.7);
       padding: 20px;
       font-size: 30px;
       text-align: center;
       border-radius: 10px;
       color: #007acc;
       
    }
    .action-box{
        margin-top:40px;
        width: 80%;
        height: 300px;
       background-color: rgba(255, 255, 255, 0.7);
       padding: 20px;
       font-size: 30px;
       text-align: center;
       border-radius: 10px;
       background-image: url('image/action.gif');
       background-size:100% 100%;
    }
</style>

JS代碼

在線咨詢

上一篇：HTML 表格
下一篇：超好用 Vue.js 圖片裁切組件Vue-ImgCutter

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

中秋節網頁設計，傳統文化中秋節網頁，中秋節網頁設計作業

您的項目需求