天天看點
傳回

抗疫專題網頁設計 緻敬最美逆行者網頁制作 疫情感動人物靜态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結構代碼 

<!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>x抗xxxx表彰</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="index_list">
  <ul>
    <li> <a href="">首頁</a> </li>
    <li> <a href="huojiang.html">xx人物</a></li>
    <li> <a href="zhuce.html">注冊</a> </li>
    <li> <a href="login.html">登陸</a> </li>
  </ul>
</div>
<div class="cleaner"></div>
<div id="container">
  <div class="dm"> 
    <!-- 代碼 開始 -->
    <div id="yc-mod-slider"><img class="cubeRandom" src="picture/dm1.jpg"></div>
    <!-- 代碼 結束 --> 
  </div>
  <div class=" clear"></div>
  <div class="index_main">
    <p>同志們，朋友們：
<br>
<br>在過去8個多月時間裡xxx國各族人民，進行了一xx戰，經受了一場艱苦卓絕的曆xx努力，取得抗擊xx，創造了人類同疾病鬥争史上又一xx壯舉！
<br>
<br>今天，我們xxx，向作出傑出貢獻的xxx人物頒授xxx獎章，表彰抗疫先進個人和xx偉大xx神，為決勝全面建成小康x、奪取新時xx主義偉大勝xx！</p>
    <p><br>
      <br>
    </p>
    <p>
        <img src="picture/1.jpg">
      
      
      </p>
      
  </div>
  <div class="share">
   
    <div class="cleaner"></div>
  </div>
  <div id="footer"> Copyright ©全國xxxx表彰</div>
</div>
<!-- End Of Container -->
</body>
</html>

💒CSS樣式代碼 

html {
  background: #000;;
}

body {
  margin: 0;
  padding:0;
  font-family: Tahoma, "Trebuchet MS", Verdana;
  font-size: 12px;
  line-height: 1.5em;
  width: 100%;
  height:600px;
  display: table;
  background: url(../image/bj.jpg) center top no-repeat fixed #000;
}

a:link, a:visited { color: #87430c; text-decoration: none; }
a:active, a:hover { color: #FFFF00;}

p {
  font-family: Tahoma, "Trebuchet MS", Verdana;
  font-size: 14px;
  color: #222; line-height:24px;
  text-align: justify;
}

h1 {
  font-family: Tahoma, "Trebuchet MS", Verdana;
  font-size: 25px;
  color: #333;
  font-weight: normal;
  margin: 0 0 15px 0;
}

h2 {
  font-family: "Times New Roman", Times, serif;
  font-size: 14px;
  color: #111;
  margin: 0 0 10px 0;
}

h3 {
  font-family: Tahoma;
  font-size: 13px;
  color: #111;
  font-weight: normal;
  margin: 0 0 3px 0;
}



.title_left {
  float: left;  
  width: 333px;
  height: 46px;
}

.title_right {
  float: right; 
  width: 165px;
  height: 40px;
  color: #d89300;
  font-family: Tahoma;
  font-size:28px;
  margin: 0;
  padding: 6px 0 0 0;
}

.title_left  h1 {
  float: left;
  display: block;
  font-family: Tahoma;
  font-size: 25px;
  color: #e17638;
  font-weight: normal;
  margin: 0 0 2px 0;
}

.title_left  h3 {
  font-family: Tahoma;
  font-size: 20px;
  color: #fff;
  font-weight: normal;
  display: block;
  float: right;
}

.gallery ul{ margin-left:-40px;}
.gallery li{ float:left; margin:5px; list-style-type:none;}
.gallery li img{ width:75px; height:75px;}



li{ list-style-type:none;}

#container {  width: 950px; padding:30px; margin:10px auto; background-color:rgba(255,255,255,0.7);-moz-border-radius:20px;border-radius:20px; min-height:600px; margin-bottom:50px;
}

.index_main{ width:700px; height:auto; margin:auto; padding:50px 0px;text-align:center;}
.index_main h1{
  color:#000;
  font-size:111px;
  text-align:center;
  line-height:136px;
  font-weight:normal;
}
.index_list{ width:960px; margin:auto; min-height:80px; padding-top:20px;}
.index_list ul{
}
.index_list li{ height:50px; margin:15px; float:left; }
.index_list li a{ color:#fff;font-size:22px; text-align:center; line-height:36px;}
.index_list li a:hover{
  color:#F00;
}


.share{ width:220px; height:50px; margin:auto;}
.share li{ float:left; margin:2px;}
.share li img{ width:30px; height:30px;}


.Language{ width:860px; margin:auto;}
.Language ul{
  width: 700px;
}
.Language li{ width:380px; height:100px; margin:15px;  }
.Language img{ width:90px;height:66px; float:left; }
.Language li p{
  font-size:22px;
  text-align:left;
  line-height:66px;
  width: 600px;
}



.Contact_input{width:500px; float:left; margin:5px;font-size:20px; color:#444; line-height:26px; }
.Contact_input p{font-size:20px; color:#444; line-height:26px; text-indent:0em; }
.c_input{ width:300px; height:25px;}
.c_text{ width:300px; height:100px;}
.SUB{ width:120px; height:35px; text-align:center; background-color:#333; -moz-border-radius:5px;border-radius:5px; margin-top:10px; }
.SUB a{ color:#FFF; line-height:35px; font-size:18px; }
.SUB:hover{ width:120px; height:35px; text-align:center; background-color:#800; -moz-border-radius:5px;border-radius:5px; }


.xinshang{
  width:960px;
  line-height: 55px;
}
.xinshang ul{ margin-left:-40px;}
.xinshang li{ width:280px; height:180px;-moz-border-radius:40px;border-radius:40px; overflow:hidden; float:left; margin:5px; list-style-type:none; border:5px solid #ccc;}
.xinshang li:hover{ border:5px solid #fff;}
.xinshang li img{ width:280px; height:180px;}


.Restaurant{ width:960px;}
.Restaurant ul{ margin-left:-40px;}
.Restaurant li{ width:170px; height:100px;-moz-border-radius:10px;border-radius:10px; overflow:hidden; float:left; margin:5px; list-style-type:none; border:2px solid #ccc;}
.Restaurant li:hover{ border:2px solid #fff;}
.Restaurant li img{ width:180px; height:100px;}

.Hotel{ width:960px; border-top:1px dashed #ddd;}
.Hotel ul{ margin-left:-40px;}
.Hotel li{ width:220px; height:140px;-moz-border-radius:10px;border-radius:10px; overflow:hidden; float:left; margin:5px; list-style-type:none; border:2px solid #ccc;}
.Hotel li:hover{ border:2px solid #4b75dd;}
.Hotel li img{ width:220px; height:140px;}


.left_main{
  width:800px;
  padding:10px;
  height:auto;
  float:left;
}
.left_main p{ font-size:14px; line-height:22px; color:#333; text-indent:2em;}

.youji_main{ width:920px; padding:10px; height:auto; float:left;}
.youji_main p{ font-size:14px; line-height:22px; color:#333; text-indent:2em;}

.fl{ float:left;}
.fr{ float:right;}

.3_col_middle img {
  float: left;
  border: none;
}

.3_col_middle img.img_middle {
  margin: 0 8px;
}

.more{
  float: right;
  color: #777;
  font-size: 11px;
  margin: 0 10px 0px 0;
}

.more a{
  text-decoration: none;
  color: #777;
}

.more a:hover{
  text-decoration: underline;
}


.more_2{
  float: left;
  color: #b0b0b0;
  font-size: 10px;
  margin: 0 10px 10px 0;
  background: url(../image/more.png) no-repeat ;
  padding: 0 0 0 10px ;
  background-position: 0 7px;
}

.more_2 a{
  text-decoration: none;
  color: #777;
}

.more_2 a:hover, .more_2:hover{
  text-decoration: underline;
}

#footer {
  width: 100%;
  color: #555;
  margin: 0;
  padding: 10px 0;
  text-align: center;
}


.cleaner {
  clear: both;
  height: 0;
  margin: 0;
  padding: 0;
}


/* -------------------zhuce login css -------------------------------*/
.zhuce{width:300px; height:auto; float:left; padding:10px; font-size:16px; border-top:2px solid #963; }
.zhuce_info{width:280px; height:30px; margin:5px auto;}
.zhuce_info input{width:180px; height:20px; float:right;}
.subout{width:220px; height:30px; margin:5px auto}
.sub{ width:60px; height:20px;margin:5px; margin-left:30px; color:#111; padding:2px; float:left; text-align:center; border:2px solid #555; background-color:#ddd;}
.sub:hover{background-color:#fff; }
.sub a{font-size:16px; line-height:20px;  color:#111; }
.sub a:hover{color:#800; text-decoration:none;}




/* -------------------index lunbo css -------------------------------*/
.dm{ width:950px; height:373px; margin:auto;-moz-border-radius:30px;border-radius:30px; overflow:hidden; margin-bottom:20px;}
.fn-clear { zoom: 1; }
.box_skitter { position: relative; background: none; }
.box_skitter ul { display: none; }
.box_skitter .container_skitter { overflow: hidden; position: relative; }
.box_skitter .image { overflow: hidden; }
.box_skitter .image img {width: 950px; height:380px; display: none; }
.box_skitter .box_clone { position: absolute; top: 0; left: 0; width: 100px; overflow: hidden; display: none; z-index: 20; }
.box_skitter .box_clone img { position: absolute; top: 0; left: 0; z-index: 20; }
.box_skitter .prev_button { position: absolute; top:30%; left:30px; z-index: 100; width:69px; height:124px; overflow: hidden; text-indent: -9999em; margin-top: -5px; background: url(../image/prev.png) no-repeat left top !important; }
.box_skitter .next_button { position: absolute; top:30%; right:50px; z-index: 100; width:69px; height:124px;  overflow: hidden; text-indent: -9999em; margin-top: -5px; background: url(../image/next.png) no-repeat left top !important; }
.box_skitter .label_skitter { z-index: 150; position: absolute; display: none; }
.loading { position: absolute; top: 50%; right: 50%; z-index: 10000; margin: -16px -16px; color: #fff; text-indent: -9999em; overflow: hidden; background: url(../image/ajax-loader.gif) no-repeat left top; width: 31px; height: 31px; }
#slideshow { width: 950px; height:373px; }
#slideshow ul { display: none; }












#content_area #zp {
  width: 900px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}
#content_area #zp p {
  text-align: center;
}
.tab1{border-collapse:collapse;}/*ȥ��˫���߿�*/
.tab1 td{ border:1px solid #ccc;}
.tab1 img{ width:860px; height:auto;}

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

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

繼續閱讀