📂文章目錄
- 二、📚網站介紹
- 三、🔗網站效果
- ▶️1.視訊示範
- 🧩 2.圖檔示範
- 四、💒 網站代碼
- 🧱HTML結構代碼
- 🏠CSS樣式代碼
- 五、🎁更多源碼
二、📚網站介紹
📔網站布局方面：計劃采用目前主流的、能相容各大主流浏覽器、顯示效果穩定的浮動網頁布局結構。
📓網站程式方面：計劃采用最新的網頁程式設計語言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代碼）。
三、🔗網站效果
▶️1.視訊示範
G21BG 環保頁面 15頁 帶輪播 帶jquery 帶留言表單 帶報告800字
🧩 2.圖檔示範
四、💒 網站代碼
🧱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>home</title>
<link rel="stylesheet" type="text/css" href="css/index.css" >
<script src="js/jquery-1.4a2.min.js" type="text/javascript"></script>
<script src="js/jquery.KinSlideshow-1.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">$(function(){
$("#KinSlideshow").KinSlideshow();
})</script>
<style type="text/css">.code{ height:auto; padding:20px; border:1px solid #9EC9FE; background:#ECF3FD;}
.code pre{font-size:14px;}
.info{ font-size:12px; color:#666666; font-family:Verdana; margin:20px 0 50px 0;}
.info p{ margin:0; padding:0; line-height:22px; text-indent:40px;}
h2.title{ margin:0; padding:0; margin-top:50px; font-size:18px; }
h3.title{ font-size:16px;}
.importInfo{ font-family:Verdana; font-size:14px;}</style>
</head>
<body background="images/bg.jpg" >
<!-- Copyright ?2005. Spidersoft Ltd -->
<style>A.applink:hover {border: 2px dotted #DCE6F4;padding:2px;background-color:#ffff00;color:green;text-decoration:none}
A.applink {border: 2px dotted #DCE6F4;padding:2px;color:#2F5BFF;background:transparent;text-decoration:none}
A.info {color:#2F5BFF;background:transparent;text-decoration:none}
A.info:hover {color:green;background:transparent;text-decoration:underline}</style>
<!-- /Copyright ?2005. Spidersoft Ltd -->
<center>
<div class="head"><img src="images/logo.jpg" /></div>
<div class="page">
<div class="nav">
<p><a href="index.htm" >首頁</a> <a href="files/changyi.html" >校園環保倡議書</a> <a href="files/biaozhun.html" >環境标準</a> <a href="files/tupian.html" >校園環保圖檔</a> <a href="files/liuyan.html" >環保留言</a></p>
</div>
<div class="content">
<div id="KinSlideshow" style="visibility:hidden;">
<a href="#"><img src="images/1.jpg" alt="保護環境就是保護我們自己。" width="990" height="450" /></a>
<a href="#"><img src="images/2.jpg" alt="保護環境就是保護我們自己。" width="990" height="450" /></a>
<a href="#"><img src="images/3.jpg" alt="保護環境就是保護我們自己。" width="990" height="450" /></a>
<a href="#"><img src="images/4.jpg" alt="保護環境就是保護我們自己。" width="990" height="450" /></a>
<a href="#"><img src="images/5.jpg" alt="保護環境就是保護我們自己。" width="990" height="450" /></a><a href="#"><img src="images/6.jpg" alt="保護環境就是保護我們自己。" width="990" height="450" /></a><a href="#"><img src="images/7.jpg" alt="保護環境就是保護我們自己。" width="990" height="450" /></a> </div>
</div>
</div><div class="foot"><p>版權所有</p></div>
</center>
</body>
</html> 🏠CSS樣式代碼
/* CSS Document */
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}
*{margin:0;padding:0;border:0; font-family:"Times New Roman", Times, serif;}
body {font-family:"Times New Roman", Times, serif;font-size: 12px;color:#000000;line-height: 20px;text-align:left}
ul,li{list-style-type:none;}
.head{width:950px; margin:0 auto; text-align:left; height:50px; padding:10px 20px;background:url("../images/head.jpg") no-repeat right; border-bottom:3px solid #1477be;}
.page{width:990px; margin:0 auto; background:#FFFFFF;padding-top:5px;}
.nav{width:990px; height:26px; background:url("../images/nav_bg.gif") repeat-x; line-height:26px; text-align:center; font-size:14px; font-weight:bold;}
.nav a{color:#FFFFFF;}
.foot{width:990px; margin:0 auto; padding:20px 0;}
.content{width:990px; padding:30px 0;}
.about{width:600px; margin:0 auto; text-align:left; padding:30px 0;overflow:hidden;}
.about h1{ font-size:16px; font-weight:bold; text-align:center;}
.about p{ text-align:left;line-height:26px; text-indent:2em;}
.pro{width:800px;margin:0 auto; text-align:left; padding:30px 0;overflow:hidden;}
.pro ul li{width:145px; height:180px; display:block; float:left; margin-left:30px; display:inline;}
.pro ul li img{width:135px; height:100px; display:block; padding:2px; border:1px solid #333333; text-align:center}
.pro ul li p{line-height:22px; text-align:center;}
.contact{width:600px; margin:0 auto; text-align:left; padding:30px 0;overflow:hidden;}
.contact ul li{line-height:24px; margin-top:16px; }
.contact ul li span{vertical-align:middle; padding-right:12px;}
.contact ul li .message_in{width:300px; height:22px; border:1px solid #999999;vertical-align:middle;line-height:22px;}
.contact ul li .message_te{width:500px; height:90px; border:1px solid #999999;vertical-align:middle;line-height:18px;}
.contact ul li .message_btn{width:64px; height:20px; line-height:20px; background:url("../images/btn.gif") no-repeat; color:#FFFFFF; font-weight:bold; cursor:hand;}
.new{padding:0 30px;}
.new ul li {text-align:left; line-height:34px;}
.new ul li a{color:#000000; text-align:left;}