📂文章目錄
- 一、👨🎓網站題目
- 二、✍️網站描述
- 三、📚網站介紹
- 四、🌐網站示範
- 五、⚙️ 網站代碼
- 🧱HTML結構代碼
- 💒CSS樣式代碼
- 六、🥇 如何讓學習不再盲目
- 七、🎁更多幹貨
一、👨🎓網站題目
🍵茶文化網站、🏳️🌈中華傳統文化題材、平劇文化🔏水墨風書畫、中國民間年畫文化藝術網站 、等網站的設計與制作。
二、✍️網站描述
🏷️ 這個首頁代碼運用了DIV盒子的使用方法，如盒子的嵌套、浮動、margin、border、background等屬性的使用，外部大盒子設定居中，内部左中右布局，下方橫向浮動排列，大學學習的前端知識點和布局方式都有運用，CSS的代碼量也很足、很細緻，使用hover來完成過渡效果、滑鼠滑過效果等，使用表格、表單補充子產品，為友善新手學習, 個别源碼頁面中沒有使用js有需要的可以自行添加。
🏅 一套優質的💯網頁設計應該包含 (具體可根據個人要求而定)
- 頁面分為頁頭、菜單導航欄（最好可下拉）、中間内容闆塊、頁腳四大部分。
- 所有頁面互相超連結，可到三級頁面，有5-10個頁面組成。
- 頁面樣式風格統一布局顯示正常，不錯亂，使用Div+Css技術。
- 菜單美觀、醒目，二級菜單可正常彈出與跳轉。
- 要有JS特效，如定時切換和手動切換圖檔輪播。
- 頁面中有多媒體元素，如gif、視訊、音樂，表單技術的使用。
- 頁面清爽、美觀、大方，不雷同。 。
- 不僅要能夠把使用者要求的内容呈現出來，還要滿足布局良好、界面美觀、配色優雅、表現形式多樣等要求。
三、📚網站介紹
📔網站布局方面：計劃采用目前主流的、能相容各大主流浏覽器、顯示效果穩定的浮動網頁布局結構。
📓網站程式方面：計劃采用最新的網頁程式設計語言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>
<html>
<head>
<meta charset="utf-8">
<link href="css/style.css" rel="stylesheet" media="all" type="text/css" />
<title>唐代詩人</title>
</head>
<body>
<header class="head">
<div class="main"><span class="fl"><img src="images/logo.png" width="100"/></span>
<p class="clear"></p>
</div>
</header>
<nav class="menu">
<div class="main">
<ul class="center">
<li><a href="index.html">網站首頁</a></li>
<li><a href="shiren.html">主要詩人</a></li>
<li><a href="shici.html">詩詞大全</a></li>
<li><a href="shipin.html">視訊介紹</a></li>
</ul>
</div>
</nav>
<div class="main">
<div class="banner "> <img src="images/banner1.jpg" width="100%" /> </div>
<div class="content">
<div class="about"> <img src="images/tu.jpg" width="300" class="fr" style="margin-left:11px" />
<p>唐朝最令人矚目的文學成就可謂是唐詩，唐朝著名的詩人層出不窮。他們的詩作風格各異，既有對神話世界的豐富想象，又有對現實生活的生動描寫，既有激昂雄渾的邊塞詩，亦有沉郁厚重的“詩史”，還有清新脫俗的田園詩。這些詩作共同構成了中國古代文學的傑出代表，使得唐詩成為了中國古詩不可逾越的巅峰。 <br>
唐代是我國文化繁榮的朝代之一，比較聞名的詩人有李白、杜甫、白居易、張九齡、王維、孟浩然、王昌齡、杜牧、岑參、韓愈、柳宗元等等。比較著名的詩有《春曉》《望廬山瀑布》《登高》《使至塞上》《長恨歌》等。 </p>
</div>
<div class="clear"></div>
<div class="bar">
<h3>主要詩人</h3>
</div>
<div class="scrollleft">
<ul>
<li> <a href="shiren.html"><img src="images/0.jpg" width="100%" height="240"/> </a>
<h3>李白</h3>
</li>
<li> <a href="shiren.html"><img src="images/1.jpg" width="100%" height="240"/></a>
<h3>陸遊</h3>
</li>
<li> <a href="shiren.html"><img src="images/2.jpg" width="100%" height="240"/></a>
<h3>李清照</h3>
</li>
<li> <a href="shiren.html"><img src="images/3.jpg" width="100%" height="240"/> </a>
<h3>杜甫</h3>
</li>
<li> <a href="shiren.html"><img src="images/4.jpg" width="100%" height="240"/> </a>
<h3>白居易</h3>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<footer class="end">
<p>唐代詩人 </p>
</footer>
</body>
</html> 💒CSS樣式代碼
@charset "utf-8";
/* CSS Document */
ul,li,h1,h2,h3,p{ padding:0; margin:0; list-style:none}
h2{ padding-bottom:15px}
a{ text-decoration:none; color:#000}
html{ background:#cabcb9}
img{ max-width:100%; display:block}
body{ line-height:24px; margin:0}
.main{width:1000px; margin:0 auto;}
.clear{ clear:both}
.menu li{ list-style:none}
.banner{margin-bottom:10px; position:relative; clear:both}
.menu{ width:100%; text-align:center; background:#998d86; margin-bottom:20px; position:relative; z-index:55; float:left}
.menu li a{ display:block; padding:10px 0; color:#fff}
.menu li { float:left;font-size:14px; padding:0px 0px ; width:250px}
.menu li a:hover{ background:#996633}
.content{ padding-bottom:20px;font-size:14px; display:inline-block ; width:100%}
.end{ background:#998d86; color:#fff; clear:both;padding:20px 0; text-align:center;}
.pad{ padding:20px; display:block}
.scrollleft li{ width:190px; text-align:center; margin:5px; float:left}
.bar{ border:#735f53 solid 1px; border-left:#735f53 solid 3px; padding:5px 10px; margin:20px 0}
.fl{ float:left}
.fr{ float:right}
.title{ padding:30px 0}
.head{ color:#efefef; background:#efefef; font-size:36px; padding:20px 0}
.ass{ margin:10px}
.ass li{ width:31.3%; margin:1%; float:left; text-align:center}
.ass li img{ display:inline-block; border:#fff solid 1px; padding:5px}
.about{ font-size:16px; line-height:24px}
.news li a{ color:#993333}
.news li{ font-size:18px; height:30px; border-bottom:#999966 solid 1px; padding:20px; background:#DED7D1; margin:10px 0;}
.info .r{ font-size:22px; padding-top:50px; line-height:45px; letter-spacing:10px;} 六、🥇 如何讓學習不再盲目
第一、帶着目标去學習，無論看書報課還是各種線下活動。
首先要明确自己的學習目标是什麼，是想解決什麼問題，實作怎樣的目标。
第二、學習要建立個人知識體系
知識是學不完的，書籍是浩如煙海的。我們盡情徜徉其中的時候，千萬不要被海水淹死，沒有自我了。在學習過程中，我們會發現每一個知識點都是有她的邊界和背景的，我們要善于歸納整理知識