天天看點
傳回

HTML+CSS鮮花靜态網頁設計

🎉精彩專欄推薦 💭

✍️ 作者簡介: 一個熱愛把邏輯思維轉變為代碼的技術部落客

💂 作者首頁: ​​【首頁——🚀擷取更多優質源碼】​​ 🎓 web前端期末大作業： 【📚畢設項目精品實戰案例 (1000套) 】

🧡 程式員有趣的告白方式：【💌HTML七夕情人節表白網頁制作 (110套) 】

🌎超炫酷的Echarts大屏可視化源碼：【🔰 Echarts大屏展示大資料平台可視化(150套) 】

🔖 HTML+CSS+JS執行個體代碼： 【🗂️HTML+CSS+JS執行個體代碼 (炫酷特效網頁代碼) 繼續更新中…】

🎁 免費且實用的WEB前端學習指南： 【📂web前端零基礎到進階學習視訊教程 120G幹貨分享】

🥇 關于作者: 💬曆任研發工程師，技術組長，教學總監；曾于2016年、2020年兩度榮獲年度十大部落格之星。 十載寒冰，難涼熱血；多年過去，曆經變遷，物是人非。 然而，對于技術的探索和追求從未停歇。 💪堅持原創，熱衷分享，初心未改，繼往開來！

📂文章目錄

  • ​​一、👨‍🎓網站題目​​
  • ​​二、✍️網站描述​​
  • ​​三、📚網站介紹​​
  • ​​四、💠網站示範​​
  • ​​五、⚙️ 網站代碼​​
  • ​​🧱HTML結構代碼​​
  • ​​💒CSS樣式代碼​​
  • ​​六、🥇 如何讓學習不再盲目​​
  • ​​七、🎁更多幹貨​​

一、👨‍🎓網站題目

🌹 鮮花網頁設計 、🌷鮮花商城網頁制作、🌼線上花店網站、💐盆栽網、花卉網等網站的設計與制作。

二、✍️網站描述

🏷️HTML鮮花網頁設計，采用DIV+CSS布局，共有多個頁面，排版整潔，内容豐富，主題鮮明，首頁使用CSS排版比較豐富，色彩鮮明有活力。頂部導航及底部區域背景色為100%寬度，主體内容區域寬度

🏅 一套優質的💯網頁設計應該包含 (具體可根據個人要求而定)

  1. 頁面分為頁頭、菜單導航欄（最好可下拉）、中間内容闆塊、頁腳四大部分。
  2. 所有頁面互相超連結，可到三級頁面，有5-10個頁面組成。
  3. 頁面樣式風格統一布局顯示正常，不錯亂，使用Div+Css技術。
  4. 菜單美觀、醒目，二級菜單可正常彈出與跳轉。
  5. 要有JS特效，如定時切換和手動切換圖檔輪播。
  6. 頁面中有多媒體元素，如gif、視訊、音樂，表單技術的使用。
  7. 頁面清爽、美觀、大方，不雷同。 。
  8. 不僅要能夠把使用者要求的内容呈現出來，還要滿足布局良好、界面美觀、配色優雅、表現形式多樣等要求。

三、📚網站介紹

📔網站布局方面：計劃采用目前主流的、能相容各大主流浏覽器、顯示效果穩定的浮動網頁布局結構。

📓網站程式方面：計劃采用最新的網頁程式設計語言HTML5+CSS3+JS程式語言完成網站的功能設計。并確定網站代碼相容目前市面上所有的主流浏覽器，已達到打開後就能即時看到網站的效果。

📘網站素材方面：計劃收集各大平台好看的圖檔素材，并精挑細選适合網頁風格的圖檔，然後使用PS做出适合網頁尺寸的圖檔。

📒網站檔案方面：網站系統檔案種類包含：html網頁結構檔案、css網頁樣式檔案、js網頁特效檔案、images網頁圖檔檔案；

📙網頁編輯方面：網頁作品代碼簡單，可使用任意HTML編輯軟體（如：​

​Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++​

​​ 等任意html編輯軟體進行運作及修改編輯等操作）。

其中：

（1）📜html檔案包含：其中index.html是首頁、其他html為二級頁面；

（2）📑 css檔案包含：css全部頁面樣式,文字滾動, 圖檔放大等；

（3）📄 js檔案包含：js實作動态輪播特效, 表單送出, 點選事件等等（個别網頁中運用到js代碼）。

四、💠網站示範

HTML+CSS鮮花靜态網頁設計
HTML+CSS鮮花靜态網頁設計
HTML+CSS鮮花靜态網頁設計
HTML+CSS鮮花靜态網頁設計
HTML+CSS鮮花靜态網頁設計
HTML+CSS鮮花靜态網頁設計

五、⚙️ 網站代碼

🧱HTML結構代碼 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>素馨花卉</title>
    <link rel="stylesheet" href="css/suxin.css">
</head>
<body>
   <!--素馨首頁導航開始-->
   <div class="picture">
   <header class="hua-header">
      <div class="container">
          <div class="header-box">
              <div class="header-logo">
                  <div class="logo">
                      <img src="picture/sx.png" alt="">
                  </div>
              </div>
             <ul class="header-nav">
                <li class="one">
                   <a href="">網站首頁</a>
                </li>
                 <li class="header-item">
                   <a href="huayanhuayu.html">花言花語</a>
                </li>
                 <li class="header-item">
                   <a href="suxindongtai.html">素馨動态</a>
                </li>
                
                 <li class="header-item">
                   <a href="suxinhuayi.html">素馨花藝</a>
                </li>
                 <li class="header-item">
                   <a href="liuyan.html">留言建議</a>
                </li>
                 <li class="header-item">
                   <a href="about.html">關于素馨</a>
                </li>
             </ul>

          </div>

      </div>


   </header>
       <div class="left">
           <div class="btn-left"></div>
       </div>
       <div class="right">
           <div class="btn-right"></div>
       </div>
       <div class="dots">
           <div class="dot "></div>
           <div class="dot hover"></div>
       </div>
   </div>
   <!--素馨首頁導航結束-->
   <!-- 素馨花藝開始-->
   <div class="flower">
      <div class="flower-container">
          <div class="flower-left"><i class="iconfont icon-xiangzuo"></i></div>
          <div class="flower-right"><i class="iconfont icon-xiangyou3fill"></i></div>
         <h3 class="flower-content">
             素馨花藝
             <a href="" class="btn">More</a>
         </h3>
          <p class="desc">花藝師與您一同分享素馨花卉給您的生活帶去的花香世界。</p>
          <div class="tu">
              <div class="chahua">
              <a href="" class="tu1"><img src="picture/sx.jpg" alt=""></a>
              <a href="" class="tu1"><img src="picture/sx2.jpg" alt=""></a>
              <a href="" class="tu1"><img src="picture/sx3.jpg" alt=""></a>
                  <div class="tu-big">
                    <div class="tu-content">
                       <h4>桌花瓶插花</h4>
                        <p>這些争鮮鬥豔的花朵如冬日深夜火焰般溫暖，濃烈。火紅色多頭玫瑰、香橙色郁金香與紫羅蘭.</p>
                  <div class="btn-block">
                  <a href="" class="detail">
                      <i class="iconfont icon-shipin luyin"></i>
                      檢視詳情
                  </a>
                  </div>
                    </div>
                      <div class="tu-content">
                          <h4>迷你花束</h4>
                          <p>迷你花束，簡潔時尚，選擇一束鮮花表達自己的情感，小小花束，大大心意。</p>

                      <div class="btn-block">
                          <a href="" class="detail">
                              <i class="iconfont icon-shipin "></i>
                              檢視詳情
                          </a>
                      </div>
                      </div>
                      <div class="tu-content">
                          <h4>小彩瓷随心插</h4>
                          <p>小彩瓷随意搭配小菊、康乃馨，即便不需要專業的花藝師，也能做出清新脫俗的感覺。</p>

                          <div class="btn-block">
                              <a href="" class="detail">
                                  <i class="iconfont icon-shipin "></i>
                                  檢視詳情
                              </a>
                          </div>
                      </div>
                  </div>
              </div>
          </div>

      </div>
   </div>
   <!-- 素馨花藝結束-->
   <!--素馨花語開始-->
   <div class="language">
       <div class="flower-container">
           <h3 class="language-content">
               素馨花語
               <a href="" class="btn">More</a>
           </h3>
           <ul class="language-big">
               <li class="language-item">
                <div class="language-left">
                    <img src="picture/1.jpg" alt="">
                </div>
                   <div class="language-info">
                       <h4>
                           <a href="">
                               多肉入新家
                           </a>
                       </h4>
                       <p class="dec">多肉必須經過一段時間适應期，也就是安全度過緩苗期，就說明她入盆成功，真正進入新家了。首先我們需要晾根.....</p>
                       <p class="info">
                           <span>2022-07-15</span>
                           <span class="margin-left"></span>
                           <span class="margin-left"><i class="iconfont icon-yanjing"></i>900</span>
                       </p>
                   </div>
               </li>
               <li class="language-item">
                   <div class="language-left">
                       <img src="picture/2.jpg" alt="">
                   </div>
                   <div class="language-info">
                       <h4>
                           <a href="">
                               愛蓮說
                           </a>
                       </h4>
                       <p class="dec">六月份的尾巴，氣候似乎比往年又燥熱了些許。花卉市場的鮮切花生的愈發絢麗多姿，不過最奪目的當屬那“出淤.....</p>
                       <p class="info">
                           <span>2022-06-30</span>
                           <span class="margin-left"></span>
                           <span class="margin-left"><i class="iconfont icon-yanjing"></i>229</span>
                       </p>
                   </div>
               </li>
               <li class="language-item">
                   <div class="language-left">
                       <img src="picture/3.jpg" alt="">
                   </div>
                   <div class="language-info">
                       <h4>
                           <a href="">

                               花在冬日

                           </a>
                       </h4>
                       <p class="dec">初雪悄然而至，洋洋灑灑飄了數日，難得天空放晴，這些花兒最讓人心心念念了！冬日的花房比起其他季節并沒有.....</p>
                       <p class="info">
                           <span>2022-01-08</span>
                           <span class="margin-left"></span>
                           <span class="margin-left"><i class="iconfont icon-yanjing"></i>226</span>
                       </p>
                   </div>
               </li>
               <li class="language-item">
                   <div class="language-left">
                       <img src="picture/4.jpg" alt="">
                   </div>
                   <div class="language-info">
                       <h4>
                           <a href="">

                               最适合教師節的迷你花束

                           </a>
                       </h4>
                       <p class="dec">在諸多的傳統節日中，教師節是一個既令人肅然起敬又飽含慈愛深情的節日。自古以來就有“一日為師終身為父”.....</p>
                       <p class="info">
                           <span>2022-09-08</span>
                           <span class="margin-left"></span>
                           <span class="margin-left"><i class="iconfont icon-yanjing"></i>230</span>
                       </p>
                   </div>
               </li>
               <li class="language-item">
                   <div class="language-left">
                       <img src="picture/5.jpg" alt="">
                   </div>
                   <div class="language-info">
                       <h4>
                           <a href="">
                               秋如黑天鵝般優雅的到來
                           </a>
                       </h4>
                       <p class="dec">伴着街頭偶爾飄落的黃葉，和着蕭瑟的涼風劃過臉頰的不忍，秋正如鏡頭中低吟的黑天鵝般優雅的到來，不聲不響.....</p>
                       <p class="info">
                           <span>2022-09-06</span>
                           <span class="margin-left"></span>
                           <span class="margin-left"><i class="iconfont icon-yanjing"></i>101</span>
                       </p>
                   </div>
               </li>
               <li class="language-item">
                   <div class="language-left">
                       <img src="picture/6.jpg" alt="">
                   </div>
                   <div class="language-info">
                       <h4>
                           <a href="">
                               那些配材花的點睛之筆
                           </a>
                       </h4>
                       <p class="dec">在花藝作品的制作中一般都有三個闆塊融合穿插而成，她們分工明确而又密切合作，她們承認重點花材不可替代的.....</p>
                       <p class="info">
                           <span>2022-08-14</span>
                           <span class="margin-left"></span>
                           <span class="margin-left"><i class="iconfont icon-yanjing"></i>111</span>
                       </p>
                   </div>
               </li>
               <li class="language-item">
                   <div class="language-left">
                       <img src="picture/7.jpg" alt="">
                   </div>
                   <div class="language-info">
                       <h4>
                           <a href="">
                               适合家庭的擺台花
                           </a>
                       </h4>
                       <p class="dec">經常會有人來咨詢哪些花卉适宜家庭擺台花，既能彰顯花的婀娜多姿、楚楚動人，又便于養護，上班族回到家中看.....</p>
                       <p class="info">
                           <span>2022-07-16</span>
                           <span class="margin-left"></span>
                           <span class="margin-left"><i class="iconfont icon-yanjing"></i>204</span>
                       </p>
                   </div>
               </li>
               <li class="language-item">
                   <div class="language-left">
                       <img src="picture/6.jpg" alt="">
                   </div>
                   <div class="language-info">
                       <h4>
                           <a href="">
                               綠蘿的養護
                           </a>
                       </h4>
                       <p class="dec">對于花友而言，綠蘿可能是養在家中的第一盆綠植。她的新葉是夏日峰回路轉的一簇簇清涼，而且大家似乎都看到.....</p>
                       <p class="info">
                           <span>2022-07-13</span>
                           <span class="margin-left"></span>
                           <span class="margin-left"><i class="iconfont icon-yanjing"></i>92</span>
                       </p>
                   </div>
               </li>
           </ul>
       </div>
   </div>
   <!--素馨花語結束-->
   <!--花卉工作室開始-->
   <div class="work">
       <div class="work-content">
           <div class="work-title">
               <h3>素馨花卉工作室</h3>
           </div>
           <div class="work-item">
                   <p class="work-all">鄭州素馨花卉有限公司由優秀的花藝、花卉設計師于2022年成立。</p>
                   <p class="item1">經營範圍：花卉、工藝品、飾品的銷售；禮儀策劃；花卉、苗木種植技術咨詢。</p>
               <p class="item">前期以鮮花、花束的包裝及零售為主，逐漸過渡到花藝教育訓練、家庭園藝等花香生活的指導，以及與花卉相關的文學創作。</p>
               <p class="item">公司緻力于将多彩花藝帶入尋常人家，讓對生活有着更高追求的人們享受溫馨素雅的花香世界，力求将這種文化做到極緻。</p>
               <p class="item">公司位址：鄭州市 中牟縣 育才巷 縣直一國中家屬院 1單元201室</p>
               <p class="item">聯系電話：0371-62180519  15890062947</p>
               <p class="item">電子郵箱：[email protected]</p>
               <p class="item2"><img src="picture/sx4.png" alt=""> </p>
           </div>
       </div>
   </div>
   <!--花卉工作室結束-->
   <!--底部開始-->
   <div class="footer-box">
       <div class="footer-title"></div>
       <div class="footer-qq">
           <i class="iconfont icon-weixin wx"></i>
           <i class="iconfont icon-qq qq"></i>
           <i class="iconfont icon-xiaoxixinfengnews2 qq"></i>
       </div>
       <p class="footer-bottom"><a href="">豫ICP備17021305号</a>  <a href=""><img src="picture/aa.png" alt="">豫公網安備 41012202000160号</a></p>
       <p>聯系電話 0371-62180519  15890062947</p>
       <p>鄭州素馨花卉有限公司 版權所有 © 2022-2022</p>
   </div>

   <!--底部結束-->
</body>
</html>

💒CSS樣式代碼 

/*清除浏覽器預設樣式*/
* {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}
a{
    text-decoration: none;
}
/*sx首頁導航開始*/
.hua-header{
    width: 100%;
    height:79px;
    background:rgba(0,0,0,0.5);
    position: fixed;
    top:0;
    z-index: 999;
}
.container{
    width: 1170px;
    height: 79px;
   /* background: red;*/
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.header-box{
    width: 1170px;
    height: 79px;
  /*  background: pink;*/
    margin-right: -15px;
    margin-left: -15px;

}
.header-logo{
    width: 150px;
    height: 79px;
    float: left;
    /*background: #ff6700;*/
}
.logo{
    width: 150px;
    height: 50px;
    position: absolute;
    top:0;
    bottom: 0;
    margin: auto 0;
}
.logo img{
    width: 150px;
    height: 50px;
}
.logo img:hover{
   cursor: pointer;
}
.header-nav{
    width: 602px;
    height: 79px;
    float: right;
    overflow: visible!important;
 /*   background: green;*/
}
.header-item{
    padding-top: 0px;
    padding-bottom: 0px;
    height: 79px;
    line-height: 79px;
    float: left;
    padding-right: 22px;
}
.header-item a{
    color:#fff;
}
.header-item a:hover{
    cursor: pointer;
    color:#16B0DE;
}
.one{
    padding-top: 0px;
    padding-bottom: 0px;
    height: 79px;
    line-height: 79px;
    float: left;
    padding-right: 22px;

}
.one a{
    color:#16B0DE;
}
.one a:hover{
    cursor: pointer;
}
.picture{
    width: 100%;
    height: 758.81px;
    position: relative;
    background-image: url("../image/t1.jpg");
}
.picture1{
    width: 100%;
    height: 351.3px;
    position: relative;
    background-image: url("http://www.ylcp.shop/files/files/1654311962308/img/g1.jpg");
}
.dots{
    width:100px;
    height:10px;
    position:absolute;
    right:580px;
    bottom:20px;
}
.dot{
    width:10px;
    height:10px;
    background: rgba(255,255,255,0.3);
    border-radius:50%;
    margin: 0 5px;
    float:left;
}
.hover{
    background: rgba(0,0,0,0.3);
}
.left{
    width: 202px;
    height: 759px;
    float: left;
}
.left:hover{
    background: rgba(0, 0, 0, 0.06);
}
.btn-left{
    width: 41px;
    height: 69px;
    position:absolute;
    left:150px;
    top:345px;
    background-image: url(../image/icon-slides.png);
    background-position: 83px 0;
    display: none;
}
.right{
    width: 202px;
    height: 759px;
    float: right;
}
.right:hover{
    background: rgba(0, 0, 0, 0.06);
}
.btn-right{
    width: 41px;
    height: 69px;
    position:absolute;
    right:150px;
    top:345px;
    background-image: url(../image/icon-slides.png);
    background-position: 42px 0;
    display: none;
}
.left:hover .btn-left{
    display: initial;
}
.right:hover .btn-right{
    display: initial;
}
/*sx首頁導航結束*/
/*sx花藝開始*/
.flower{
    padding: 70px 0px;
   /* background: #fff;*/
    position: relative;
}
.flower-container{
    width: 1170px;
    height: 604px;
   /* background: pink;*/
    margin: 0 auto;
}
.flower-content{
    font-size: 36px;
    margin-top: 0px;
    text-align: center;
    font-weight: 300;
    margin-bottom: 20px;
}
.btn{
    background-color: #16b0dc;
    border-color: #16b0dc;
    padding: 5px 13px;
    margin-top: -6px;
    margin-left: 15px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 2px;
    color: #fff;
    position: relative;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
}
.desc{
    font-size: 16px;
    font-weight: 300;
    text-align: center;
    width: 80%;
    color: #5e7387;
    margin: 0px auto;
}
.tu{
    width: 1140px;
    height: 476px;
    /*background: red;*/
    margin-top: 40px;
}
.chahua{
    width: 1020px;
    height: 476px;
   /* background: #2196f3;*/
    margin: 0 auto;
}
.tu1{
    width: 320px;
    height: 320px;
    margin-left: 12px;
}
.tu1 img{
    width: 320px;
    height: 320px;
    border-radius: 50%;
}
.tu-big{
    width: 1020px;
    height: 76px;
    /* background: #2196f3;*/
    margin: 0 auto;
}

.tu-content{
    width: 320px;
    height: 76px;
    /*background: black;*/
    text-align: center;
    float: left;
    margin-right: 20px;
}
.tu-content h4{
    color: #37474f;
    font-size: 18px;
    margin-bottom: 10px;
}
.tu-content p{
    font-size: 14px;
    color: #757575;
    margin-left: 5px;
    text-align: left;
}
.btn-block{
    width: 300px;
    height: 36px;
    font-size: 14px;
    border-radius: 3px;
    margin-top: 22px;
    background: #f96868;
    border-color: #f96868;
    text-align: center;
    line-height: 36px;
    float: left;
}
.btn-block a{
    cursor: pointer;
    color: #fff;
}
.flower-left{
    float: left;
    position: absolute;
    left: 90px;
    top: 338px;

}
.btn-block:hover{
    cursor: pointer;
}
.btn-block i{
    color:#9c2115;
}
.flower-left i{
    color: #b0b0b0;
    font-size: 28px;
}
.flower-right{
    float: left;
    position: absolute;
    right: 90px;
    top: 338px;

}
.flower-right i{
    color: #b0b0b0;
    font-size: 28px;
}
/*sx花藝結束*/
/*素馨花語開始*/
.language{
    width: 100%;
    height: 707px;
    /*margin-top: -50px;*/
    background: #f5f5f5;
    position: relative;
}
.language-content{
   /* font-size: 36px;
    top:20px;
    left:550px;
    text-align: center;
    font-weight: 300;
    position: absolute;*/
    font-size: 36px;
    margin-top: 0px;
    text-align: center;
    font-weight: 300;
    margin-bottom: 20px;
}
.language-big{
    width: 1170px;
    height: 504px;
    position: absolute;
    top:70px;
   /* background: #ff6700;*/
}
.language-item{
    width: 555px;
    height: 96px;
    /*background: red;*/
    float: left;
    margin-right: 30px;
    margin-top: 30px;
}
.language-left{
    width: 180px;
    height: 96px;
}
.language-left img{
    width: 160px;
    height: 96px;
}
.language-info{
    width: 375px;
    height: 96px;
   /* background: black;*/
    float: right;
    margin-top: -96px;
    overflow: hidden;
}
.language-info a{
    color: #2a333c;
}
.language-info a:hover{
    color: #16b0dc;
    text-decoration:underline;
}
.dec{
    font-weight: 300;
    font-size: 14px;
    color: #76838f;
    margin: 10px 0 11px;
    margin-bottom: 5px;
}
.info{
    font-weight: 300;
    margin: 10px 0 11px;
    font-size: 14px;
    color: #76838f;
}
.margin-left{
    margin-left: 10px;
}
/*素馨花語結束*/
/*花卉工作室開始*/
.work{
    width: 100%;
    height: 905px;
    margin-top: 60px;
    /*background: #2196f3;*/
    border-bottom: 1px solid #b0b0b0;
}
.work-content{
    width: 1170px;
    height: 765px;
   /* background: #ff6700;*/
    margin: 0 auto;
}
.work-title{
    width: 1140px;
    height: 43px;
    margin: 0 auto;
    /*background: pink;*/
}
.work-title h3{
    font-size: 36px;
    font-weight: 300;
    margin-top: 0;
    text-align: center;
}
.work-item{
    width: 1140px;
    height: 672px;
    margin: 0 auto;
    /*background: green;*/
}
.work-all{
    margin-top: 70px;
    text-align: center;
    font-weight: 300;
    color: #222;
    font-size: 18px;
}
.item1{
    margin-top: 30px;
    text-align: center;
    font-weight: 300;
    font-size: 18px;
    color: #222;
}
.item{
    margin-top: 10px;
    text-align: center;
    font-weight: 300;
    font-size: 18px;
    color: #222;
}
.work-item img{
    width: 530px;
    height: 340px;
}
.item2{
    margin-top: 30px;
    text-align: center;
    font-weight: 300;
    font-size: 18px;
    color: #222;
    margin-bottom: 30px;
}
/*花卉工作室結束*/
/*底部開始*/
/*底部開始*/
.footer-box{
    width: 100%;
    height: 182px;
    padding-bottom: 20px;
    background: #f5f5f5;
    border-top: 1px solid #f0f2f5;
    color: #aaaaaa;
    text-align: center;
}
.footer-title{
    width: 100%;
    height: 20px;
    background: #fff;
    border-top: 1px solid #f0f2f5;
}
.footer-qq{
    width: 100%;
    height: 56px;
    text-align: center;
    padding-top:20px;
}
.footer-qq i{
    font-size: 30px;
    margin-right: 10px;
}
.wx{
    color: green;
}
.qq{
    color: #3cafff;
}
.footer-bottom{
    width: 100%;
    }
.footer-bottom a{
    color: #62a8ea;
    font-size: 15px;
    margin-right: 10px;
    cursor: pointer;
}
.footer-bottom a:hover{
    color: #89bceb;
    text-decoration: underline;
}
.footer-bottom img{
    font-size: 15px;
}
.footer-box p{
    color: #aaaaaa;
    font-size: 15px;
    margin-right: 10px;
    margin-top: 5px;
}
/*底部結束*/

六、🥇 如何讓學習不再盲目

21年程式員總結給程式設計菜鳥的16條忠告

  1. 入門期間不要盲目看太多書，找一本網上或身邊有經驗程式員推薦的教材，先系統的學習。
  2. 多看幫助文檔，幫助文檔就像一個遊戲的玩法說明通關秘籍，該看就看别太自信。
  3. 菜鳥容易被對象、屬性、方法等詞彙迷惑？那是你連最基礎知識都還沒掌握。
  4. 不要忽視沒一個看起來不起眼的問題，經常總結做到舉一反三。
  5. 沒積累足夠知識和經驗前，你是開發不出一個完整項目的。
  6. 把最新技術挂在嘴邊，還不如把過時技術牢記心中。
  7. 活到老學到老，隻有一招半式是闖不了江湖的。
  8. 看得懂的書，仔細看；看不懂的書，硬着頭皮也要看完。
  9. 書讀百遍其義自見，别指望讀一遍就能掌握。
  10. 請把教程裡的例子親手實踐下，即使案例中有完整源碼。
  11. 把在教程中看到的有意義的例子擴充；并将其切實的運用到自己的工作中。
  12. 不要漏掉教程中任何一個習題——請全部做完并做好筆記。
  13. 水準是在不斷的實踐中完善和發展的，你與大牛差的隻是經驗的積累。
  14. 每學到一個難點的時候，嘗試對朋友或網上分享你的心得,讓别人都能看得懂說明你真的掌握。
  15. 做好儲存源檔案的習慣，這些都是你的知識積累。
  16. 遇到問題不要張口就問，要學會自己找答案，比如google、百度和w3cschool上都有很多程式設計相關資料，你隻要輸入關鍵字就能找到你的答案。

七、🎁更多幹貨

1.如果我的部落格對你有幫助、如果你喜歡我的部落格内容，​

​請 “👍點贊” “✍️評論” “💙收藏” ​

​一鍵三連哦！

2.​

​💗【👇🏻👇🏻👇🏻關注我| 💬擷取更多源碼 | 優質文章】 ​

​帶您學習各種前端插件、3D炫酷效果、圖檔展示、文字效果、以及整站模闆 、大學生畢業HTML模闆 、期末大作業模闆 、等! 「在這裡有好多 前端 開發者，一起探讨 前端 Node 知識，互相學習」！

3.

以上内容技術相關問題💌歡迎一起交流學習👇🏻👇🏻👇🏻💬

html靜态網頁 web課程與設計 web前端期末大作業 學生網頁作業 html
上一篇: 在tomcat中部署web項目
下一篇: Tomcat部署關聯項目

繼續閱讀