中山市原創(chuàng)動(dòng)力網(wǎng)絡(luò)科技有限公司
創(chuàng)您所想與您同在
免費(fèi)互聯(lián)網(wǎng)品牌營(yíng)銷(xiāo)咨詢(xún)服務(wù)
立刻咨詢(xún)
13450931319來(lái)源：轉(zhuǎn)載 發(fā)布時(shí)間：2018-11-22 14:40:54 閱讀量：1548
知識(shí)點(diǎn)：html/css布局思維, div盒子模型 , 音樂(lè)播放組件開(kāi)發(fā) , css3愛(ài)心繪制偽元素，愛(ài)心飄落插件 ,定位詳解，學(xué)習(xí)方法總結(jié)。
<!doctype html> <!-- 聲明網(wǎng)頁(yè)文檔類(lèi)型 為html-->
<html> <!--網(wǎng)頁(yè)從這里開(kāi)始-->
<head><!--與瀏覽器進(jìn)行通信 告訴瀏覽器本網(wǎng)頁(yè)的基本信息-->
<title>愛(ài)心飄落場(chǎng)景</title> <!-- 網(wǎng)頁(yè)標(biāo)題的聲明-->
<!--聲明網(wǎng)頁(yè)編碼格式 統(tǒng)一語(yǔ)言 utf-8 gb2312 GBK-->
<meta charset='utf-8'>
<!--聲明網(wǎng)頁(yè)關(guān)鍵字,便于搜索引擎搜索,seo優(yōu)化-->
<meta name='Keywords' content='女朋友,表白,程序猿,情人節(jié)'>
<!--網(wǎng)頁(yè)描述,用一句話(huà)描述本網(wǎng)頁(yè),有利于seo優(yōu)化-->
<meta name='description' content='海牙老師在這里教大家如何表白'>
<!-- css樣式 修飾我們的標(biāo)簽 比如高度 寬度 背景圖片 -->
<style> /*衣柜 用來(lái)存放css樣式 */
/**/
*{ /*通配符=>所有的元素 清除默認(rèn)外邊距*/
margin:0;
}
html,body{
width:100%;
height:100%;
}
body{ /*標(biāo)簽選擇器 屬性名稱(chēng) : 屬性值 ;*/
/*背景屬性 路徑 平鋪 圖片定位/ 圖片尺寸*/
background:url('images/bg.jpg') no-repeat top/cover;
overflow:hidden; /*隱藏超出的元素*/
}
.snowfall-flakes{ /* id選擇器 #id名稱(chēng)*/
position:relative; /*相對(duì)定位 定位父級(jí)*/
width:20px; /*寬度:100px*/
height:18px; /*高度:80px*/
}
.snowfall-flakes:after,.snowfall-flakes:before {
position:absolute;/*絕對(duì)定位 */
left:14px;
top:10px;
display:block;
content:''; /*啟動(dòng)盒子*/
width:10px;
height:16px;
background:#ff0000;
/* 圓角:左上角 右上角 右下角 左下角 */
border-radius:50px 50px 0 0;
transform:rotate(45deg);/*css3 變形 :旋轉(zhuǎn) */
}
.snowfall-flakes:before{
left:10px;
transform:rotate(-45deg);
}
</style>
</head>
<body> <!--網(wǎng)頁(yè)內(nèi)容展示主體部分-->
<!-- div標(biāo)簽 盒子模型 區(qū)域劃分 id標(biāo)簽的唯一標(biāo)識(shí)符-->
<!-- audio 標(biāo)簽 音頻播放標(biāo)簽 autoplay-->
<audio src='mp3/1.mp3' autoplay ></audio>
<script src='js/jquery-1.11.1.min.js'></script>
<script src='js/snowfall.jquery.js'></script>
<script> /*javascript 基于原型的動(dòng)態(tài)解釋性腳本語(yǔ)言*/
/* 誰(shuí) 在什么時(shí)候 做什么事情 */
/* 網(wǎng)頁(yè)文檔 馬上 下愛(ài)心 */
$(document).snowfall({
flakeCount:104
})
</script>
</body>
</html>
---------------------
在線(xiàn)
客服
服務(wù)時(shí)間：周一至周日 08:30-18:00
選擇下列產(chǎn)品馬上在線(xiàn)溝通：
客服
熱線(xiàn)
7*24小時(shí)客服服務(wù)熱線(xiàn)
關(guān)注
微信
關(guān)注官方微信
微信登錄
QQ登錄
微博登錄
售前咨詢(xún)