📂文章目錄
- 二、📚網站介紹
- 三、🔗網站效果
- ▶️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.視訊示範
N40JP-傳統文化藝術耍牙15頁
🧩 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>耍牙首頁</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="main">
<div class="top">
<div class="logo">
<img src="images/logo.jpg" />
</div>
<div class="nav">
<ul>
<li><a class="hot" href="index.html">網站首頁</a></li>
<li><a href="news.html">耍牙新聞</a></li>
<li><a href="mingduan.html">名段欣賞</a></li>
<li><a href="mingjia.html">耍牙名家</a></li>
<li><a href="baike.html">耍牙百科</a></li>
<li><a href="sousuo.html"><img src="images/sous.jpg" /></a></li>
<li><a href="rongyu.html"><img src="images/ry.jpg" /></a></li>
</ul>
</div>
</div>
<div class="banner">
<img src="images/banner1.jpg" />
</div>
<div class="foot">
<div class="bx1">
<div class="left">選擇您的地點</div>
<div class="center">
<img src="images/foot2.png" />
<h2>新聞刊物</h2>
<h3>探索耍牙最新資訊</h3>
<h4>訂閱</h4>
</div>
<div class="right">
<div class="tu">
<img src="images/foot3.png" />
<img src="images/foot4.png" />
</div>
<h4>關注我們</h4>
</div>
</div>
<div class="bx2">
<a href="#">400 885 6618</a>
<a href="#">聯系我們</a>
<a href="#">使用條款</a>
<a href="#">關于我們</a>
<a href="#">廣告聯系</a>
<a href="#">意見回報</a>
<a href="#">版權申明</a>
<a href="#">常見問題</a>
<a href="#">鳴謝</a>
<a href="#">滬ICP備14014303号-4 <span class="span1"><img src="images/foot5.png" /></span></a>
<a href="#"><span class="span2"><img src="images/foot6.png" /></span>滬公網安備31010602002427号</a>
</div>
</div>
</div>
</body>
</html> 🏠CSS樣式代碼
/*---耍牙百科-----*/
.bkbx1{ width:1259px; height:344px;background:url(../images/bk01.png) no-repeat; margin:0 auto;margin-bottom:40px; }
.bkbx1 a{color:#FFF;}
.bkbx1 a:hover{ color:#F00 ;}
.bkbx1 h2{ height:66px; line-height:60px; padding-top:30px; margin-bottom:30px; font-size:40px; font-weight:normal;text-align:center;}
.bkbx1 p{ line-height:35px; font-size:16px; text-align:center;}
.bkbx1 .duanx{ width:125px; height:25px; margin:0 auto; margin-top:40px;}
.bkbx2{ width:1259px; height:324px;background:url(../images/bk02.png) no-repeat; margin:0 auto;padding-top:24px;margin-bottom:40px; }
.bkbx2 a{color: #000;}
.bkbx2 a:hover{ color:#F00;}
.bkbx2 .neiw{ width:963px; height:285px; background:#FFF; margin-left:36px; }
.bkbx2 h2{ height:66px; line-height:60px; padding-top:30px; margin-bottom:30px; font-size:40px; font-weight:normal; text-align:center;}
.bkbx2 p{ line-height:35px; font-size:16px; text-align:center;}
.bkbx2 .duanx{ width:125px; height:25px; margin:0 auto; margin-top:40px;}
.bkbx3{ width:1259px; height:324px;background:url(../images/bk03.png) no-repeat; margin:0 auto;padding-top:24px;margin-bottom:40px; }
.bkbx3 .neiw{ width:963px; height:285px; margin-left:380px; }
.bkbx3 h2{ height:66px; line-height:60px; padding-top:30px; margin-bottom:30px; font-size:40px; font-weight:normal; text-align:center; }
.bkbx3 p{ line-height:35px; font-size:16px; text-align:center;}
.bkbx3 .duanx{ width:125px; height:25px; margin:0 auto; margin-top:40px;}
.bkbx3 a{color:#FFF;}
.bkbx3 a:hover{ color:#F00;}
/*---耍牙起源-----*/
.qy{ height:1802px; background:url(../images/qy.jpg) no-repeat; position:relative;}
.qy .bx1{ width:177px; height:108px; position:absolute; left:170px; top:30px;}
.qy .bx1 h2{ line-height:50px; height:50px; font-size:26px;font-weight:normal;}
.qy .bx1 h3{ line-height:45px; height:45px; font-size:20px; font-weight: lighter;}
.qy .bx2{ width:351px; height:94px; position:absolute; left:501px; top:466px;}
.qy h4{ height:53px; line-height:53px; font-size:26px; color:#c79813; font-weight:normal; border-bottom:#ececec 1px solid; font-weight:normal;}
.qy p{ height:43px; line-height:43px;font-weight:normal; font-size:14px; background:url(../images/qy01.jpg) no-repeat; padding-left:20px;}
.qy .bx3{ width:417px; height:96px; position:absolute; left:683px; top:992px;}
.qy .bx4{ width:575px; height:106px; position:absolute; left:332px; top:1511px;}
/*---步驟-----*/
.buz{ width:1400px; height:1195px; background:#dbe0e2;padding-top:19px;}
.buz .nerc{ width:1104px; height:1133px; background:url(../images/bz01.jpg) no-repeat; margin:0 auto; }
.buz .nerc .center{ width:910px; height:1035px; margin:0px; padding-top: 62px; margin:0 auto;}
.buz .nerc .center .tit{ height:52px; padding-bottom:19px; border-bottom:#787573 2px solid;line-height: 52px; margin-bottom:30px;
}
.buz .nerc .center .tit .left{ width:58px; height:52px; line-height:52px; background:url(../images/sanj.jpg) no-repeat 0px 20px; color:#787573; font-size:16px;float:left;}
.buz .nerc .center .tit .left a{color:#787573; padding-left:25px;}
.buz .nerc .center .tit .cent{ width:747px; height:52px; float:left; color:#070707; font-size:30px; text-align:center;}
.buz .nerc .center .tit .right{ width:105px; height:52px;float:left;}
.buz .nerc .center .tit .right img{ float:left;}
.buz .nerc .center .bx1{ width: 908px;
border-bottom:#787573 2px solid;
padding-bottom: 40px;}
.buz .nerc .center .bx1 img{ margin:0 auto; display:block;}
.buz .nerc .center .bx2{ width: 908px;
border-bottom:#787573 2px solid;padding: 20px 0px;}
.buz .nerc .center .bx2 p{ font-size:16px; line-height:40px; text-indent:2em;}
.buz .nerc .center .tit2{ height:52px; padding-bottom:19px; line-height: 52px; margin-bottom:30px;
}
.buz .nerc .center .tit2 .left{ width:58px; height:52px; line-height:52px; background:url(../images/sanj.jpg) no-repeat 0px 20px; color:#787573; font-size:16px;float:left;}
.buz .nerc .center .tit2 .left a{color:#787573; padding-left:25px;}
.buz .nerc .center .tit2 .right{ width:105px; height:52px;float:right;}
.buz .nerc .center .tit2 .right img{ float:left;}
/*---搜尋頁面-----*/
.sous{ height:987px; background:url(../images/sousuo.jpg) no-repeat;}
.sousbx1{ width:418px; height:190px; margin-top:163px; margin-left:527px;}
.sousbx1 h2{ height:60px; line-height:60px; text-align:center; font-size:30px; margin-bottom:25px; font-weight:normal;}
.inup{ width:415px; height:50px; border:#CCC 1px solid; line-height:50px; margin-bottom:17px;}
.inup .inut{ width:302px;padding-left:54px; height:48px; float:left; border:none;}
.inup .btn{ width:51px; height:44px; float:left; background:url(../images/sous02.jpg) no-repeat;}
.dingwei{ width:86px; height:36px; background:url(../images/sous03.jpg) no-repeat; padding-left:30px; color:#818181; font-size:16px; margin:0 auto;}
.fenxiang{ width:183px; height:56px; margin-left:644px; margin-top:313px; background:url(../images/sous04.jpg) no-repeat; text-align:center; font-size:16px; line-height:56px;}
.fenxiang a{ color:#FFF;}
/*---榮譽-----*/
.rongyu{ height:795px; background:#e5e6e9;}
.rongyu .left{ width:497px; height:794px; float:left; margin-left:62px; margin-right:105px;}
.rongyu .left h2{ height:60px; line-height:60px; font-size:30px; margin-top:20px;}
.rongyu .left p{ line-height:36px; font-size:16px; color:#3c3c3d;}
.rongyu .left h3{ height:65px; font-weight:normal; font-size:20px; line-height:65px; background:url(../images/ry01.jpg) no-repeat;}
.rongyu .right{ width:662px; height:794px; float:left;}
.rongyu .right .wenz{ height:265px;}
.rongyu .right .wenz ul{}
.rongyu .right .wenz ul li{ height:86px; line-height:86px; background:url(../images/ry04.jpg) no-repeat bottom; text-align:center;}
.rongyu .right .wenz ul li a{ font-size:16px; color:#333;} 五、🎁更多源碼
1.如果我的部落格對你有幫助
請 “👍點贊” “✍️評論” “💙收藏”
一鍵三連哦！