Author：Mr.柳上原
- 付出不亞于任何的努力
- 愿我們所有的努力晃琳，都不會被生活辜負
- 不忘初心，方得始終
深刻的感覺到一個強大的文案就是一家公司的營銷精髓
比如：
《衛(wèi)龍》
《閱后即瞎》
《網(wǎng)易論壇》
《vivo商城客服》
......
<!DOCTYPE html> <!-- 文檔類型：標準html文檔 -->
<html lang='en'> <!-- html根標簽 翻譯文字：英文 -->
<head> <!-- 網(wǎng)頁頭部 -->
<meta charset='UTF-8'/> <!-- 網(wǎng)頁字符編碼 -->
<meta name='Keywords' content='關(guān)鍵詞1,關(guān)鍵詞2'/>
<meta name='Description' content='網(wǎng)站說明'/>
<meta name='Author' content='作者'/>
<title>前端59期學員作業(yè)</title> <!-- 網(wǎng)頁標題 -->
<link rel='stylesheet' type='text/css' href='css/css1.css'/> <!-- 外鏈樣式表 -->
<style type='text/css'> /*內(nèi)部樣式表*/
/* 新增背景屬性 */
div{
width:100px;
height:100px;
background:url(./images/img.jpg) no-repeat;
background-origin:padding-box; /* 背景圖片顯示的起始位置 */
padding-box 從padding區(qū)域開始顯示背景圖片（默認）
content-box 從內(nèi)容區(qū)域開始顯示背景圖片
border-box 從邊框線開始顯示背景圖片
background-clip:padding-box; /* 背景剪裁 */
padding-box 把padding區(qū)域以外的背景圖片裁剪掉
content-box 把內(nèi)容以外的背景圖片裁剪掉
border-box 把邊框線以外的背景圖片裁剪掉
}
/* 新增顏色屬性 */
div{
width:100px;
heigth:100px;
background-color:hsl();
hue 色調(diào)（0朗兵，360 紅色 120 綠色 240 藍色）
saturation 飽和度（0%~100%）
lightness 亮度（0%~100%）
a 透明度（0~1）
}
/* 新增漸變屬性 */
div{
width:100px;
height:100px;
background-image:linear-gradient(to left,red,green); /* 線性漸變 */
漸變方向：
to （left right top bottom） 關(guān)鍵詞
30deg 度數(shù)值
}
div{
width:100px;
height:100px;
background-image:radial-gradient(at left,red,green); /* 徑向漸變 */
漸變方向：
at（left right center top bottom） 關(guān)鍵詞
漸變形狀：
ellipse 橢圓（默認）
circle 正圓
漸變半徑：
px 半徑值（橢圓兩個半徑值膳音，正圓一個半徑值）
farthest-corner 半徑為圓心到最遠角度的距離（默認）
closest-corner 半徑為圓心到最近角度的距離
farthest-side 半徑問圓心到最遠邊的距離
closest-side 半徑問圓心到最近邊的距離
｝
div{
width:100px;
height:100px;
background-image:repeating-radial-gradient(at left,red,red 20%,green 20%,green 40%); /* 重復(fù)徑向漸變 */
background-image:repeating-linear-gradient(to left,red,red 20%,green 20%,green 40%); /* 重復(fù)線性漸變 */
｝
/* 倒影 */
div{
width:100px;
height:100px;
background:url('./images/1.jpg') no-repeat center/cover;
-webkit-box-reflect:right 0px url('倒影遮罩：必須為png透明圖片'); /* 倒影：不占位置 */
direction 倒影位置（left right above below）
affset 倒影和實像之間的距離 可以為負值
-webkit-mask-image:url(' '); /* 遮罩 */
-webkit-mask-position:center; /* 遮罩位置 */
-webkit-mask-size:cover; /* 遮罩大小 */
-webkit-mask-repeat:no-repeat; /* 遮罩平鋪 */
-webkit-mask:url(' ') no-repeat center/cover; /* 復(fù)合寫法 */
}
</style>
</head>
<body> <!-- 網(wǎng)頁主干：可視化區(qū)域 -->
<div> </div> <!-- 塊標簽-->
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
