- ??1.視頻演示
- ?? 2.圖片演示
- ??HTML結(jié)構(gòu)代碼
- ??CSS樣式代碼
二、??網(wǎng)站介紹
??網(wǎng)站布局方面：計(jì)劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩(wěn)定的浮動(dòng)網(wǎng)頁(yè)布局結(jié)構(gòu)。
??網(wǎng)站程序方面：計(jì)劃采用最新的網(wǎng)頁(yè)編程語(yǔ)言HTML5+CSS3+JS程序語(yǔ)言完成網(wǎng)站的功能設(shè)計(jì)法牲。并確保網(wǎng)站代碼兼容目前市面上所有的主流瀏覽器，已達(dá)到打開(kāi)后就能即時(shí)看到網(wǎng)站的效果琼掠。
??網(wǎng)站素材方面：計(jì)劃收集各大平臺(tái)好看的圖片素材拒垃，并精挑細(xì)選適合網(wǎng)頁(yè)風(fēng)格的圖片，然后使用PS做出適合網(wǎng)頁(yè)尺寸的圖片瓷蛙。
??網(wǎng)站文件方面：網(wǎng)站系統(tǒng)文件種類包含：html網(wǎng)頁(yè)結(jié)構(gòu)文件悼瓮、css網(wǎng)頁(yè)樣式文件、js網(wǎng)頁(yè)特效文件艰猬、images網(wǎng)頁(yè)圖片文件横堡；
??網(wǎng)頁(yè)編輯方面：網(wǎng)頁(yè)作品代碼簡(jiǎn)單，可使用任意HTML編輯軟件（如：Dreamweaver冠桃、HBuilder命贴、Vscode 、Sublime 、Webstorm胸蛛、Text 培己、Notepad++ 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作）。 其中： （1）??html文件包含：其中index.html是首頁(yè)胚泌、其他html為二級(jí)頁(yè)面； （2）?? css文件包含：css全部頁(yè)面樣式,文字滾動(dòng), 圖片放大等肃弟； （3）?? js文件包含：js實(shí)現(xiàn)動(dòng)態(tài)輪播特效, 表單提交, 點(diǎn)擊事件等等（個(gè)別網(wǎng)頁(yè)中運(yùn)用到j(luò)s代碼）玷室。
三、??網(wǎng)站效果
??1.視頻演示
https://live.csdn.net/v/embed/240775
(W05JP- 音樂(lè)9頁(yè) html+css+js)
?? 2.圖片演示
四笤受、?? 網(wǎng)站代碼
??HTML結(jié)構(gòu)代碼
<pre class="custom" data-tool="mdnice編輯器" style="margin-top: 10px; margin-bottom: 10px; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;"> <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>音樂(lè)</title> <link rel="stylesheet" href="css/css.css"> </head> <body> <div id="toubu"> <div class="div_01">音樂(lè)閣</div> <div class="div_02"> <ul> <li><a href="index.html">首頁(yè)</a></li> <li><a href="yueqi.html">樂(lè)器</a></li> <li><a href="mingxing.html">明星</a></li> <li><a href="gequ.html">歌曲</a></li> <li><a href="liuyan.html">留言</a></li> </ul> </div> </div> <div class="inbanner"> <h2>金典歌曲</h2> </div> <div class="list-1"> <ul> <li> <div class="pic"> <img src="img/hh1.jpg" > </div> <p>海闊天空</p> <a href="info1.html">在線試聽(tīng)</a> </li> <li> <div class="pic"> <img src="img/hh2.jpg" > </div> <p>千里之外</p> <a href="info2.html">在線試聽(tīng)</a> </li> <li> <div class="pic"> <img src="img/hh3.jpg" > </div> <p>手心的薔薇</p> <a href="info3.html">在線試聽(tīng)</a> </li> <li> <div class="pic"> <img src="img/hh4.jpg" > </div> <p>曖昧</p> <a href="info4.html">在線試聽(tīng)</a> </li> </ul> </div> <div id="jiaobu"> <p>網(wǎng)頁(yè)底部</p> </div> </body> </html> </pre>
??CSS樣式代碼
<pre class="custom" data-tool="mdnice編輯器" style="margin-top: 10px; margin-bottom: 10px; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;"> `p {
margin: 0;
padding: 0;
}
body {
background-color: #f4f4f4;
font-family: "Microsoft YaHei";
font-size: 12px;
}
ul,
ol {
list-style: outside none none;
}
a {
text-decoration: none;
}
toubu {
width: 1000px;
height: 60px;
overflow: hidden;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
toubu .div_01 {
line-height: 60px;
font-size: 20px;
font-weight: bold;
}
toubu .div_02 ul li {
display: inline-block;
line-height: 60px;
}
toubu .div_02 ul li a {
display: block;
width: 80px;
line-height: 60px;
color: #000;
font-size: 16px;
text-align: center;
}
toubu .div_02 ul li a:hover {
background: #cfcfcf;
}
toubu .div_03 {
line-height: 60px;
}
toubu .div_03 a {
display: inline-block;
font-size: 16px;
width: 50px;
line-height: 60px;
text-align: center;
color: #000;
}
tupian {
width: 1000px;
height: 500px;
overflow: hidden;
margin: 0 auto 40px;
}
tupian img {
width: 100%;
height: 500px;
}
section {
width: 1000px;
height: auto;
overflow: hidden;
margin: 0 auto;
}
section .div_left {
width: 100%;
height: auto;
float: left;
}
section .div_left h2 {
width: 100%;
height: 40px;
border-bottom: 1px solid #ccc;
margin-bottom: 30px;
color: rgba(0, 0, 0, .8);
}
section .div_left .item {
border-radius: 12px;
float:left;
width:31.3%;
margin:1%;
background: #fff;
margin-bottom: 25px;
overflow: hidden;
}
section .div_left .item div.pic {
width: 100%;
height: 385px;
overflow: hidden;
}
section .div_left .item div.pic img {
width: 100%;
height: 385px;
transition: all 0.4s linear;
}` </pre>
五穷缤、??更多源碼
1.如果我的博客對(duì)你有幫助 請(qǐng) “??點(diǎn)贊” “??評(píng)論” “??收藏” 一鍵三連哦！
2.??【??????????????關(guān)注我| 獲取更多源碼】 帶您學(xué)習(xí)各種前端插件箩兽、3D炫酷效果津肛、圖片展示、文字效果汗贫、以及整站模板 身坐、大學(xué)生畢業(yè)HTML模板 、等!
??以上內(nèi)容技術(shù)相關(guān)問(wèn)題??歡迎一起交流學(xué)習(xí)????????????
