@TOC
一、????網(wǎng)站題目
?? 寵物網(wǎng)頁設計 、??保護動物網(wǎng)頁、??鯨魚海豚主題、??保護大象、等網(wǎng)站的設計與制作。
二、??網(wǎng)站描述
???HTML寵物網(wǎng)頁設計，采用DIV+CSS布局，共有多個頁面，排版整潔，內(nèi)容豐富，主題鮮明，首頁使用CSS排版比較豐富，色彩鮮明有活力，導航與正文字體分別設置不同字號大小。導航區(qū)域設置了背景圖。子頁面有純文字頁面和圖文并茂頁面。
?? 一套優(yōu)質(zhì)的??網(wǎng)頁設計應該包含 (具體可根據(jù)個人要求而定)
- 頁面分為頁頭、菜單導航欄（最好可下拉）、中間內(nèi)容板塊、頁腳四大部分。
- 所有頁面相互超鏈接，可到三級頁面，有5-10個頁面組成。
- 頁面樣式風格統(tǒng)一布局顯示正常，不錯亂，使用Div+Css技術(shù)。
- 菜單美觀、醒目，二級菜單可正常彈出與跳轉(zhuǎn)。
- 要有JS特效，如定時切換和手動切換圖片輪播。
- 頁面中有多媒體元素，如gif、視頻、音樂，表單技術(shù)的使用。
- 頁面清爽、美觀、大方，不雷同。 。
- 不僅要能夠把用戶要求的內(nèi)容呈現(xiàn)出來，還要滿足布局良好、界面美觀、配色優(yōu)雅、表現(xiàn)形式多樣等要求。
三、??網(wǎng)站介紹
??網(wǎng)站布局方面：計劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩(wěn)定的浮動網(wǎng)頁布局結(jié)構(gòu)。
??網(wǎng)站程序方面：計劃采用最新的網(wǎng)頁編程語言HTML5+CSS3+JS程序語言完成網(wǎng)站的功能設計。并確保網(wǎng)站代碼兼容目前市面上所有的主流瀏覽器，已達到打開后就能即時看到網(wǎng)站的效果。
??網(wǎng)站素材方面：計劃收集各大平臺好看的圖片素材，并精挑細選適合網(wǎng)頁風格的圖片，然后使用PS做出適合網(wǎng)頁尺寸的圖片。
??網(wǎng)站文件方面：網(wǎng)站系統(tǒng)文件種類包含：html網(wǎng)頁結(jié)構(gòu)文件、css網(wǎng)頁樣式文件、js網(wǎng)頁特效文件、images網(wǎng)頁圖片文件；
??網(wǎng)頁編輯方面：網(wǎng)頁作品代碼簡單，可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進行運行及修改編輯等操作）。
其中：
（1）??html文件包含：其中index.html是首頁、其他html為二級頁面；
（2）?? css文件包含：css全部頁面樣式,文字滾動, 圖片放大等；
（3）?? js文件包含：js實現(xiàn)動態(tài)輪播特效, 表單提交, 點擊事件等等（個別網(wǎng)頁中運用到js代碼）。
四、??網(wǎng)站演示
image.png
image.png
image.png
五、?? 網(wǎng)站代碼
??HTML結(jié)構(gòu)代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>老虎</title>
<link href="css/style.css" type="text/css" rel="stylesheet" media="all">
</head>
<body>
<div class="head clearfix"> <b class="fl"><img src="images/logo.jpg"></b>
<nav class="fr"> <a href="index.html">主頁</a> <a href="about.html">老虎介紹</a> <a href="pic.html">老虎圖片</a> <a href="news.html">新聞資訊</a> <a href="reg.html">注冊</a> <a href="login.html">登錄</a></nav>
</div>
<div class="main clearfix">
<!-- Swiper -->
<div class="banner"><img src="images/timg.jpg" width="100%"></div>
<div class="div2 bg000 ">
<div class="bar">
<h3>在線留言</h3>
</div>
<form class="mui-input-group">
<div class="mui-input-row">
<label>姓名</label>
<input type="text" class="mui-input-clear">
</div>
<div class="mui-input-row">
<label>電話</label>
<input type="text" class="mui-input-clear">
</div>
<div class="mui-input-row">
<label>留言</label>
<textarea rows="" cols=""></textarea>
</div>
<div class="mui-input-row">
<label></label>
<input type="submit" class="mui-input-clear" value="提交">
</div>
</form>
</div>
<div class="div4 bg000 ">
<div class="bar">
<h3>新聞資訊</h3>
</div>
<div class="">
<ul>
<li><a href="info.html">保護漸行漸遠的森林之王</a></li>
<li><a href="info.html">老虎攻擊人后,為何一定得擊斃?不能關(guān)起來嗎?專家說的很有道理</a></li>
<li><a href="info.html">老虎咬了我家狗,打死它算“正當防衛(wèi)”嗎?</a></li>
<li><a href="info.html">野生老虎的雙面性格,你知道嗎?【虎王戰(zhàn)記16】</a></li>
<li><a href="info.html">萬獸之王為何落此地步?科學家用衛(wèi)星定位系統(tǒng),保護老虎遠離公路</a></li>
<li><a href="info.html">保護東北虎的經(jīng)濟賬怎么算?值不值得?</a></li>
<li><a href="info.html">為什么要保護老虎?保護老虎意味著什么,會不會再產(chǎn)生虎患?</a></li>
<li><a href="info.html">大搖大擺走在公路上,遇到老虎該如何保命?</a></li>
<li><a href="info.html">為何大熊貓一千多個了還在保護東北虎瀕臨滅絕了還無人問津?</a></li>
<li><a href="info.html">保護東北虎 保護這片森林3.0</a></li>
</ul>
</div>
</div>
<div class="clearfix"></div>
<div class="div7 bg000 clearfix">
<div class="bar">
<h3>老虎圖片</h3>
</div>
<div class="">
<ul id="jSearchHeroDiv" class="imgtextlist">
<li><img src="images/a1.jpg">
<p>老虎圖片</p>
</li>
<li><img src="images/a2.jpg">
<p>老虎圖片</p>
</li>
<li><img src="images/a3.jpg">
<p>老虎圖片</p>
</li>
<li><img src="images/a4.jpg">
<p>老虎圖片</p>
</li>
</ul>
</div>
</div>
</div>
<footer class="end">網(wǎng)頁底部</footer>
</body>
</html>
??CSS樣式代碼
/* CSS Document */
a {
font-size: 14px;
color: #333;
text-decoration:none
}
a:hover {
color:#FF9933
}
body {
margin: 0 auto;
padding: 0;
background-color: #f5f5f5;
width: 1000px;
background-size: cover;
color: #333;
line-height: 30px
}
.clearfix:after {
clear: both;
content: '';
display: block;
}
.head {
background: rgba(255, 255, 255, .8);
height: 104px;
overflow: hidden
}
.head a {
color: #3366CC;
background: #FFFFFF;
padding: 0 10px;
border-radius: 10px
}
h1,
h2,
h3 {
margin: 0;
padding: 0
}
.head a {
font-size: 19px;
color: #333;
margin: 35px 10px;
display: inline-block;
padding-left: 30px;
box-sizing: border-box;
background: url(../images/nav.png) no-repeat left;
background-size: 30px auto;
}
.head a:hover{ color:#FF9966}
.fl {
float: left
}
.fr {
float: right
}
.head .fl {
background: #fff;
}
.head .fl img {
width: 180px;
padding-top: 10px;
}
.bg000 {
background: rgba(255, 255, 255, .8)
}
.bar {
background:#FFCC33;
color: #000;
font-size:14px;
padding:10px
}
.w40 {
width: 40%;
}
.w60 {
width: 60%
}
#jSearchHeroDiv li {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
text-align: center;
width: 200px;
margin: 15px;
}
#jSearchHeroDiv img {
width: 200px;
height: 140px
}
.div2 .fr div {
margin: 5px 5px;
height: 332px
}
.div2 {
float: left;
margin-top: 20px;
width: 480px;
}
.div4 {
float: right;
margin-top: 20px;
width: 500px;
}
.swiper-container img{
height: 500px;
}
.end {
text-align: center;
padding:10px 0;
background:#FFCC33;
margin-top:20px;
}
.con {
padding: 20px
}
#latest_guide_list li:hover {
}
.title {
color: #FF0033;
text-align: center;
padding: 20px 0;
border-bottom: #333 dashed 1px;
margin-bottom: 20px
}
.div1 img {
float: left
}
.div7 {
margin-top: 20px
}
.form{ float:left}
form {
margin: 0;
padding: 35px 0 0 50px;
width: 488px;
}
.fr{ float:right; }
.rs{float:right;margin:40px 40px 0 50px}
.rs a{ display:inline-block; width:100px; font-size:24px; height:100px; background:#FFCC33; color:#000; padding:40px}
form label {
display: block;
margin: 0 0 20px;
overflow: hidden;
padding: 0;
}
form label span {
color: #7d7c7c;
display: block;
font-size: 13px;
float: left;
height: 31px;
margin: 0;
padding: 5px 14px 0 0;
text-align: right;
text-transform: uppercase;
width: 74px;
}
form label .inp {
border: 1px solid #d6d6d6;
background: #fff;
color: #7d7c7c;
display: block;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
height: 34px;
line-height: 34px;
margin: 0;
padding: 0 5px;
width: 388px;
}
form label textarea {
border: 1px solid #d6d6d6;
background: #fff;
color: #7d7c7c;
display: block;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
height: 205px;
margin: 0;
overflow: auto;
padding: 5px;
width: 388px;
}
form #submit2 {
border: 0;
background:#FFCC33;
color:#000;
display: block;
height: 37px;
margin: 0 0 0 88px;
padding: 0;
width: 101px;
}
.div2 form {
margin: 0 auto;
padding: 0 ;
width: 437px;
}
.div2 form label{
margin: 0;
padding: 0;
}
.div2 form input{
width: 100%;
height: 30px;
}
.div2 textarea{
width: 100%;
height: 100px;
}
.div2{
padding-bottom: 35px;
}
六、?? 如何讓學習不再盲目
21年程序員總結(jié)給編程菜鳥的16條忠告
- 入門期間不要盲目看太多書，找一本網(wǎng)上或身邊有經(jīng)驗程序員推薦的教材，先系統(tǒng)的學習。
- 多看幫助文檔，幫助文檔就像一個游戲的玩法說明通關(guān)秘籍，該看就看別太自信。
- 菜鳥容易被對象、屬性、方法等詞匯迷惑？那是你連最基礎(chǔ)知識都還沒掌握。
- 不要忽視沒一個看起來不起眼的問題，經(jīng)?？偨Y(jié)做到舉一反三。
- 沒積累足夠知識和經(jīng)驗前，你是開發(fā)不出一個完整項目的。
- 把最新技術(shù)掛在嘴邊，還不如把過時技術(shù)牢記心中。
- 活到老學到老，只有一招半式是闖不了江湖的。
- 看得懂的書，仔細看；看不懂的書，硬著頭皮也要看完。
- 書讀百遍其義自見，別指望讀一遍就能掌握。
- 請把教程里的例子親手實踐下，即使案例中有完整源碼。
- 把在教程中看到的有意義的例子擴充；并將其切實的運用到自己的工作中。
- 不要漏掉教程中任何一個習題——請全部做完并做好筆記。
- 水平是在不斷的實踐中完善和發(fā)展的，你與大牛差的只是經(jīng)驗的積累。
- 每學到一個難點的時候，嘗試對朋友或網(wǎng)上分享你的心得,讓別人都能看得懂說明你真的掌握。
- 做好保存源文件的習慣，這些都是你的知識積累。
- 遇到問題不要張口就問，要學會自己找答案，比如google、百度和w3cschool上都有很多編程相關(guān)資料，你只要輸入關(guān)鍵字就能找到你的答案。
七、??更多干貨
【干貨分享】自學編程的小伙伴可以前往我的 gitee 倉庫（持續(xù)更新中...）
??【web學習指南】從web基礎(chǔ)、計算機基礎(chǔ)到前端常用框架的教程，涵蓋前端大部分必備知識（學習指南 + 技術(shù)文章 + 資源分享）
