📂文章目錄
- 一、👨🎓網站題目
- 二、✍️網站描述
- 三、📚網站介紹
- 四、💠網站示範
- 五、⚙️ 網站代碼
- 🧱HTML結構代碼
- 💒CSS樣式代碼
- 六、🥇 如何讓學習不再盲目
- 七、🎁更多幹貨
一、👨🎓網站題目
👨⚕️ 抗擊疫情緻敬逆行者感人類題材、緻敬逆行者網頁設計作品、大學生抗疫感動專題網頁設計作業模闆、等網站的設計與制作。
二、✍️網站描述
🏷️抗擊疫情緻敬逆行者感人類題材網頁設計作品采用DIV CSS布局制作，共多個頁面：網站首頁、感動人物、動人瞬間、感人視訊、感動圖集、感動新聞頁面。，使用CSS設定了網頁背景顔色，制作了導航區域滑鼠經過熒光效果。個别頁面插入了感人MP4視訊。作品代碼采用學生簡單水準制作，DIV命名合理。
🏅 一套優質的💯網頁設計應該包含 (具體可根據個人要求而定)
- 頁面分為頁頭、菜單導航欄（最好可下拉）、中間内容闆塊、頁腳四大部分。
- 所有頁面互相超連結，可到三級頁面，有5-10個頁面組成。
- 頁面樣式風格統一布局顯示正常，不錯亂，使用Div+Css技術。
- 菜單美觀、醒目，二級菜單可正常彈出與跳轉。
- 要有JS特效，如定時切換和手動切換圖檔輪播。
- 頁面中有多媒體元素，如gif、視訊、音樂，表單技術的使用。
- 頁面清爽、美觀、大方，不雷同。 。
- 不僅要能夠把使用者要求的内容呈現出來，還要滿足布局良好、界面美觀、配色優雅、表現形式多樣等要求。
三、📚網站介紹
📔網站布局方面：計劃采用目前主流的、能相容各大主流浏覽器、顯示效果穩定的浮動網頁布局結構。
📓網站程式方面：計劃采用最新的網頁程式設計語言HTML5+CSS3+JS程式語言完成網站的功能設計。并確定網站代碼相容目前市面上所有的主流浏覽器，已達到打開後就能即時看到網站的效果。
📘網站素材方面：計劃收集各大平台好看的圖檔素材，并精挑細選适合網頁風格的圖檔，然後使用PS做出适合網頁尺寸的圖檔。
📒網站檔案方面：網站系統檔案種類包含：html網頁結構檔案、css網頁樣式檔案、js網頁特效檔案、images網頁圖檔檔案；
四、💠網站示範
五、⚙️ 網站代碼
🧱HTML結構代碼
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>全球xx</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div class="page">
<div class="banner"><img src="images/banner.jpg" width="1000" height="417"></div>
<div class="daohang">
<ul>
<li><a href="index.html">網站首頁</a></li>
<li><a href="page1.html">臨床表現</a></li>
<li><a href="page2.html">診療方案</a></li>
<li><a href="page3.html">保障通知</a></li>
<li><a href="page4.html">最新動态</a></li>
<li><a href="page5.html">相關圖檔</a></li>
</ul>
</div>
<div class="zhong">
<div class="zuo"><div class="zuo1"><img src="images/2.jpg" width="700" height="380">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
2020年2月8日，xxxx釋出會，會上xx布xxxxxxx</div></div>
<div class="you">
<div class="you1">
<p>最新動态</p>
</div>
<div class="you2">
<p>2020今日中國xx最新消息：今日本土4例...</p>
<p>全國多省區出現手足口xx</p>
<p>xxx過35萬丨全xxx...</p>
<p>美xx成xxx“震中”丨全xxx...</p>
<p>世界xx分布最新：xxx！</p>
</div>
<div style="margin-top:10px;" class="you1">
<p>圖檔欣賞</p>
</div>
<div class="you2"><img src="images/1.jpg" width="280" height="320"></div>
</div>
</div>
<div class="clearit"></div>
<div class="foot"><p>全球xx</p></div>
</div>
</body>
</html> 💒CSS樣式代碼
@charset "utf-8";
/* CSS Document */
body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,
li, dl, dt, dd, form, a, fieldset, input, th, td
{margin: 0; padding: 0; border: 1; outline: none;}
body { font-family: "微軟雅黑";font-size: 14px;color:#000000; line-height:30px;text-align:left; }
td,th {font-family: "宋體";font-size: 14px;color: #000000;}
.clearit{clear:both;}
A:link {TEXT-DECORATION: none;}
A:visited {TEXT-DECORATION: none;}
a{ color:#fff;}
ul,li{list-style-type:none; color:#000;}
p{ line-height:35px;}
.page{width:1000px; margin:0 auto;}
.daohang{height:40px; background-color:#31334c;}
.daohang ul li{float:left; font-size:16px; line-height:40px; text-align:center; width:166px; color:#FFFFFF;}
.zuo{float:left; width:700px;}
.you{float:right; width:280px;}
.you1{height:30px;background-color:#31334c;}
.you1 p{ margin-left:5px; color:#FFF; line-height:30px;}
.you2 p{border-bottom:1px solid #31334c;}
.zhong{margin-top:10px;}
.foot{height:40px; margin-top:20px;background-color:#31334c;}
.foot p{text-align:center; line-height:40px; color:#FFF;}
.yi{margin-top:20px;}
.tu{float:left; width:323px; margin-left:5px; margin-right:5px;}
.left{width:400px; float:left;}
.right{width:580px; float:right;}
.new p{border-bottom:1px solid #31334c;} 六、🥇 如何讓學習不再盲目
- 入門期間不要盲目看太多書，找一本網上或身邊有經驗程式員推薦的教材，先系統的學習。
- 多看幫助文檔，幫助文檔就像一個遊戲的玩法說明通關秘籍，該看就看别太自信。
- 菜鳥容易被對象、屬性、方法等詞彙迷惑？那是你連最基礎知識都還沒掌握。
- 不要忽視沒一個看起來不起眼的問題，經常總結做到舉一反三。
- 沒積累足夠知識和經驗前，你是開發不出一個完整項目的。
- 把最新技術挂在嘴邊，還不如把過時技術牢記心中。
- 活到老學到老，隻有一招半式是闖不了江湖的。
- 看得懂的書，仔細看；看不懂的書，硬着頭皮也要看完。
- 書讀百遍其義自見，别指望讀一遍就能掌握。
- 請把教程裡的例子親手實踐下，即使案例中有完整源碼。
- 把在教程中看到的有意義的例子擴充；并将其切實的運用到自己的工作中。
- 不要漏掉教程中任何一個習題——請全部做完并做好筆記。
- 水準是在不斷的實踐中完善和發展的，你與大牛差的隻是經驗的積累。
- 每學到一個難點的時候，嘗試對朋友或網上分享你的心得,讓别人都能看得懂說明你真的掌握。
- 做好儲存源檔案的習慣，這些都是你的知識積累。
- 遇到問題不要張口就問，要學會自己找答案，比如google、百度和w3cschool上都有很多程式設計相關資料，你隻要輸入關鍵字就能找到你的答案。
![英偉達帶來“壞消息”！中國人工智能優勢或不再，新能源遭暴擊！[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)