天天看點
傳回

緻敬最美逆行者網頁設計作品 大學生抗疫感動專題網頁設計作業模闆 疫情感動人物靜态HTML網頁模闆下載下傳

📂文章目錄

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

一、👨‍🎓網站題目

👨‍⚕️ 抗擊疫情緻敬逆行者感人類題材、緻敬逆行者網頁設計作品、大學生抗疫感動專題網頁設計作業模闆、等網站的設計與制作。

二、✍️網站描述

🏷️抗擊疫情緻敬逆行者感人類題材網頁設計作品采用DIV CSS布局制作，共多個頁面：網站首頁、感動人物、動人瞬間、感人視訊、感動圖集、感動新聞頁面。，使用CSS設定了網頁背景顔色，制作了導航區域滑鼠經過熒光效果。個别頁面插入了感人MP4視訊。作品代碼采用學生簡單水準制作，DIV命名合理。

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

  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結構代碼 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>最美逆行</title>
        <link rel="stylesheet" href="css/style.css">
    </head>

     <body>
        <!--top-------> 
        <div class="top"> 
             <a href="index.html"><img style="float:left" src="images/logo.jpg" /></a> 
         </div> 
        <!--nav----> 
        <div class="daohang"> 
            <div id="nav"> 
                <ul> 
                     <li><a class="host" href="index.html"> 網站首頁</a></li> 
                     <li><a href="about.html">簡介</a></li> 
                     <li><a href="zuimei.html">最美逆行</a></li> 
                     <li><a href="zhiyuan.html">八方支援</a></li> 
                     <li><a href="news.html">新聞</a></li> 
                     <li><a href="liuyan.html">線上留言</a></li> 
                </ul> 
            </div> 
        </div> 
         <!--nav----> 
         <!--banner-------> 
         <div class="ban"> 
             <img src="images/banner1.jpg" /> 
        </div> 
         <!--main-------> 
        <div class="main"> 
            <div class="box1"> 
                <div class="shang-left"> 
                    <div class="gk-title">
                         <a href="about.html"><h1>新冠簡介</h1></a>
                    </div> 
                    <div class="gk"> 
                         <img src="images/gktu.jpg" /> 
                         <p>  xxxxxxx</p> 
                         <p>   xxxxxxxxx。</p> 
                    </div> 
                </div> 
            <div class="xz"> 
               <a href="#"><h1>最美逆行<span><i>                                更多">>">></i></span></h1></a> 
               <a href="#"><img src="images/xz01.jpg" /></a> 
               <a href="#"><img src="images/xz02.jpg" /></a> 
               <a href="#"><img src="images/xz03.jpg" /></a> 
               <a href="#"><img src="images/xz04.jpg" /></a> 
           </div> 
             <div class="shang-right"> 
                 <div class="count-title">
                     <a href="#"><h1>疫情經過</h1></a>
                 </div> 
                 <div class="count"> 
                     <p>  xxxxxxxx<p> 
                      <p>  xxxxxxxxxxx。<p> 
                 </div> 
             </div> 
             </div> 
            <div class="meishi"> 
                 <div class="yy-title">
                     <a href="#"><h1>防護方法</h1></a>
                 </div> 
                <div class="ms"> 
                     <ul> 
                         <a href="#"> <li><img src="images/meishi1.jpg" /> <p>戴口罩</p> </li> </a> 
                         <a href="#"> <li><img src="images/meishi2.jpg" /> <p>不聚集</p> </li> </a> 
                         <a href="#"> <li><img src="images/meishi3.jpg" /> <p>講衛生</p> </li> </a> 
                         <a href="#"> <li><img src="images/meishi4.jpg" /> <p>勤洗手</p> </li> </a> 
                         <a href="#"> <li><img src="images/meishi5.jpg" /> <p>多鍛煉</p> </li> </a> 
                     </ul> 
               </div> 
            </div> 
            <!--bottom-------> 
             <div class="bottom"> 
                 <div class="bottom-box"> 
                        <p>2020-2028@版權所有 武漢加油  中國加油</p> 
                 </div> 
             </div> 
            <!--bottom------->   
         </div>

     </body>
</html>

💒CSS樣式代碼 

@charset "utf-8";

body {
    margin: 0 auto;
    font-size: 12px;
    font-family: "宋體",arial;
    line-height: 22px;
}

div,p,input,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd {
    height: auto;
    margin: 0;
    ; padding: 0;
    vertical-align: middle;
}

li {
    list-style: none;
}


img {
    border: 0;
    margin: 0;
    padding: 0;
}

a {
    color: #333;
    text-decoration: none;
}

a:link {
    color: #333;
}

a:hover {
    color: #629705;
    text-decoration: none;
    overflow: hidden;
}

/*---top-----*/
.top {
    height: 200px;
    width: 1000px;
    margin: 0 auto;
}

.ban {
    height: 335px;
    width: 1000px;
    margin: 0 auto;
}


/*---top-----*/
/*---nav----*/
.daohang {
    width: 1000px;
    height: 47px;
    background: url(../images/nav-bj.jpg);
    margin: 0 auto;
}

#nav {
    width: 1000px;
    height: 47px;
    line-height: 47px;
    font-family: "宋體";
    font-weight: bolder;
    font-size: 14px;
    margin: 0 auto;
}

#nav ul {
    margin: 0 auto;
}

#nav li {
    float: left;
    width: 166px;
    text-align: center;
    color: #FFF;
}

#nav a {
    width: 166px;
    height: 47px;
    display: block;
    font-family: "宋體";
    font-size: 14px;
    font-weight: bold;
    float: left;
}

#nav a:link {
    color: #FFF;
}

#nav a:visited {
    color: #FFF;
    text-decoration: none;
    overflow: hidden;
}

#nav a:hover {
    color: #FFF;
    text-decoration: none;
    overflow: hidden;
    background: #450405;
}

#nav a:active {
    color: #FFF;
    text-decoration: none;
    overflow: hidden;
    background: #450405;
}
.host {
    color: #FFF;
    text-decoration: none;
    overflow: hidden;
    background: #450405;
}
/*---------main開始-----------------*/

.main {
    width: 1000px;
    margin: 0 auto;
    margin-top: 0px;
    margin-top: 10px;
}
.box1 {
    width: 1000px;
    height: 311px;
    margin: 0 auto;
}

.shang-left {
    float: left;
}

.gk-title {
    width: 308px;
    height: 40px;
    background: #711b1c;
}


    background: url(../images/fenge.jpg) bottom repeat-x;
    color: #3d2915;
}

.news ul li a {
    float: left;
    display: block;
    line-height: 30px;
    height: 30px;
    background: url(../images/lvdian.jpg) left center no-repeat;
    color: #3d2915;
    padding-left: 20px;
}

.news ul li a:hover {
    color: #000;
}

.news ul li span {
    float: right;
    color: #666;
    line-height: 30px;
}

.danye {
    color: #666;
    font-size: 14px;
    line-height: 25px;
}

.danye b {
    font-size: 18px;
    display: block;
    text-align: center;
}

.danye img {
    margin: 0 auto;
    display: block;
}

.biaoti {
    color: #3d2915;
    font-weight: bold;
    font-size: 16px;
    line-height: 40px;
    background: url(../images/fenge.jpg) bottom repeat-x;
    text-align: center;
    margin-bottom: 10px;
    _margin-bottom: 10px;
}

.neirong {
    padding: 0px 15px 15px 15px;
}

.neirong img {
    margin: 0 auto;
    display: block;
}

/*---bottom-----*/
.bottom {
    width: 1000px;
    margin: 0 auto;
    margin-top: 20px;
}

.bottom img {
    float: left;
}

.bottom p {
    width: 100%;
    height: 30px;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    margin-left: 20px;
    float: left;
}
/*---bottom-----*/

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

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

繼續閱讀