來源：轉(zhuǎn)載 發(fā)布時間：2018-11-22 14:40:54 閱讀量：1177
知識點：html/css布局思維, div盒子模型 , 音樂播放組件開發(fā) , css3愛心繪制偽元素，愛心飄落插件 ,定位詳解，學習方法總結(jié)。
<!doctype html> <!-- 聲明網(wǎng)頁文檔類型 為html-->
<html> <!--網(wǎng)頁從這里開始-->
<head><!--與瀏覽器進行通信 告訴瀏覽器本網(wǎng)頁的基本信息-->
<title>愛心飄落場景</title> <!-- 網(wǎng)頁標題的聲明-->
<!--聲明網(wǎng)頁編碼格式 統(tǒng)一語言 utf-8 gb2312 GBK-->
<meta charset='utf-8'>
<!--聲明網(wǎng)頁關(guān)鍵字,便于搜索引擎搜索,seo優(yōu)化-->
<meta name='Keywords' content='女朋友,表白,程序猿,情人節(jié)'>
<!--網(wǎng)頁描述,用一句話描述本網(wǎng)頁,有利于seo優(yōu)化-->
<meta name='description' content='海牙老師在這里教大家如何表白'>
<!-- css樣式 修飾我們的標簽 比如高度 寬度 背景圖片 -->
<style> /*衣柜 用來存放css樣式 */
/**/
*{ /*通配符=>所有的元素 清除默認外邊距*/
margin:0;
}
html,body{
width:100%;
height:100%;
}
body{ /*標簽選擇器 屬性名稱 : 屬性值 ;*/
/*背景屬性 路徑 平鋪 圖片定位/ 圖片尺寸*/
background:url('images/bg.jpg') no-repeat top/cover;
overflow:hidden; /*隱藏超出的元素*/
}
.snowfall-flakes{ /* id選擇器 #id名稱*/
position:relative; /*相對定位 定位父級*/
width:20px; /*寬度:100px*/
height:18px; /*高度:80px*/
}
.snowfall-flakes:after,.snowfall-flakes:before {
position:absolute;/*絕對定位 */
left:14px;
top:10px;
display:block;
content:''; /*啟動盒子*/
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)頁內(nèi)容展示主體部分-->
<!-- div標簽 盒子模型 區(qū)域劃分 id標簽的唯一標識符-->
<!-- audio 標簽 音頻播放標簽 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 基于原型的動態(tài)解釋性腳本語言*/
/* 誰 在什么時候 做什么事情 */
/* 網(wǎng)頁文檔 馬上 下愛心 */
$(document).snowfall({
flakeCount:104
})
</script>
</body>
</html>
---------------------
13450931319
微信登錄
QQ登錄
微博登錄
售前咨詢
