Web前端開(kāi)發(fā)任務(wù)驅(qū)動(dòng)式教程(HTML5+CSS3+JavaScript)任務(wù)13-陰影與漸變屬性課件_第1頁(yè)
Web前端開(kāi)發(fā)任務(wù)驅(qū)動(dòng)式教程(HTML5+CSS3+JavaScript)任務(wù)13-陰影與漸變屬性課件_第2頁(yè)
Web前端開(kāi)發(fā)任務(wù)驅(qū)動(dòng)式教程(HTML5+CSS3+JavaScript)任務(wù)13-陰影與漸變屬性課件_第3頁(yè)
Web前端開(kāi)發(fā)任務(wù)驅(qū)動(dòng)式教程(HTML5+CSS3+JavaScript)任務(wù)13-陰影與漸變屬性課件_第4頁(yè)
Web前端開(kāi)發(fā)任務(wù)驅(qū)動(dòng)式教程(HTML5+CSS3+JavaScript)任務(wù)13-陰影與漸變屬性課件_第5頁(yè)
已閱讀5頁(yè)，還剩45頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

任務(wù)13陰影與漸變屬性第五單元盒子模型任務(wù)13陰影與漸變屬性第五單元盒子模型1學(xué)習(xí)目標(biāo)徑向漸變box-shadow屬性box-sizing屬性線性漸變掌握Web字體圖標(biāo)學(xué)習(xí)目標(biāo)徑向漸變box-shadow屬性box-sizing2重復(fù)漸變了解:學(xué)習(xí)目標(biāo)重復(fù)漸變了解:學(xué)習(xí)目標(biāo)3任務(wù)目標(biāo)實(shí)戰(zhàn)演練——制作網(wǎng)站廣告欄任務(wù)目標(biāo)實(shí)戰(zhàn)演練——制作網(wǎng)站廣告欄4任務(wù)目標(biāo)實(shí)戰(zhàn)演練——制作旅游攻略網(wǎng)任務(wù)目標(biāo)實(shí)戰(zhàn)演練——制作旅游攻略網(wǎng)5知識(shí)準(zhǔn)備1.box-shadow屬性box-shadow屬性：為盒子模型添加陰影效果語(yǔ)法規(guī)則：box-shadow：像素值1像素值2像素值3像素值4顏色值陰影類型；參數(shù)值說(shuō)明像素值1必需。陰影的水平偏移量。正值陰影在右，負(fù)值陰影在左。像素值2必需。陰影的垂直偏移量。正值陰影在下，負(fù)值陰影在上。像素值3可選。陰影的模糊半徑。只能為正值。值越大，陰影越模糊。像素值4可選。陰影的擴(kuò)展半徑。正值陰影擴(kuò)大，負(fù)值陰影縮小。顏色值可選。陰影的顏色。陰影類型可選。外陰影(outset)或內(nèi)陰影(inset)。知識(shí)準(zhǔn)備1.box-shadow屬性box-shadow屬6知識(shí)準(zhǔn)備示例：box-shadow屬性<styletype="text/css">div{width:200px;height:200px;margin:10pxauto;border:1pxsolid#000;}#box{

box-shadow:5px5px10px2px#999;/*水平陰影位置，垂直陰影位置，陰影模糊半徑，陰影擴(kuò)展半徑，陰影的顏色;*/}</style><body><divid="box"></div></body>box-shadow:5px5px10px2px#999,5px5px10px2px#999inset;知識(shí)準(zhǔn)備示例：box-shadow屬性<styletype7知識(shí)準(zhǔn)備2.box-sizing屬性box-sizing屬性：定義盒子的寬度值（width）或高度值（height）是否包含元素的邊框和內(nèi)邊距。content-box：定義盒子的寬度值（width）或高度值（height）時(shí)，不包含元素的邊框和內(nèi)邊距。border-box：定義盒子的寬度值（width）或高度值（height）時(shí)，包含元素的邊框和內(nèi)邊距。知識(shí)準(zhǔn)備2.box-sizing屬性box-sizing屬8知識(shí)準(zhǔn)備示例：box-sizing屬性<styletype="text/css">div{width:230px;height:80px;margin:10pxauto;border:4pxsolid#000;padding:10px;}#box1{box-sizing:content-box;}#box2{

box-sizing:border-box;}</style><body><divid="box1">box1:content-box</div><divid="box2">box2:border-box</div></body>知識(shí)準(zhǔn)備示例：box-sizing屬性<styletype9知識(shí)準(zhǔn)備3.線性漸變線性漸變：起始顏色會(huì)沿著一條直線按順序過(guò)渡到結(jié)束顏色語(yǔ)法規(guī)則：background-image:linear-gradient(漸變角度,顏色值1起始位置,顏色值2起始位置,……,顏色值n起始位置);漸變角度：取值范圍是0~360deg，totop（從下到上，0deg），toleft（從右到左，270deg）,toright（從左到右，90deg）,tobottom（從上到下，180deg）。起始位置：用于設(shè)置顏色邊界，起始位置的值為像素?cái)?shù)值或百分比數(shù)值。知識(shí)準(zhǔn)備3.線性漸變線性漸變：起始顏色會(huì)沿著一條直線按順序10知識(shí)準(zhǔn)備示例：線性漸變<styletype="text/css">div{width:200px;height:200px;margin:10pxauto;border:1pxsolid#000;background-image:linear-gradient(toright,#F00,#0F0);}</style><body><div></div></body>background-image:linear-gradient(90deg,#F00,#0F050%,#00F80%);知識(shí)準(zhǔn)備示例：線性漸變<styletype="text/c11知識(shí)準(zhǔn)備4.徑向漸變徑向漸變：起始顏色會(huì)從一個(gè)中心點(diǎn)開(kāi)始，依據(jù)橢圓或圓形形狀進(jìn)行擴(kuò)張漸變。語(yǔ)法規(guī)則：background-image:radial-gradient(漸變形狀圓心位置,顏色值1起始位置,顏色值2起始位置,……,顏色值n起始位置);漸變形狀：水平和垂直半徑的像素值或百分比，circle或ellipse。圓心位置：定義元素漸變的中心位置，atcenter、atleft/right、attop/bottom、at像素值/百分比。起始位置：用于設(shè)置顏色邊界，起始位置的值為像素?cái)?shù)值或百分比數(shù)值。知識(shí)準(zhǔn)備4.徑向漸變徑向漸變：起始顏色會(huì)從一個(gè)中心點(diǎn)開(kāi)始，12知識(shí)準(zhǔn)備示例：徑向漸變<styletype="text/css">div{width:200px;height:200px;margin:10pxauto;border:1pxsolid#000;background-image:radial-gradient(circleatcenter,#F0020%,#0F060%,#00F80%);}</style><body><div></div></body>知識(shí)準(zhǔn)備示例：徑向漸變<styletype="text/c13知識(shí)準(zhǔn)備5.重復(fù)漸變重復(fù)漸變：讓線性漸變或者徑向漸變重復(fù)執(zhí)行。注意：只有當(dāng)首尾兩顏色位置不在0%或100%時(shí)，重復(fù)漸變才生效。（1）重復(fù)線性漸變background-image:repeating-linear-gradient(漸變角度,顏色值1起始位置,顏色值2起始位置,……,顏色值n起始位置);（2）重復(fù)徑向漸變

background-image:repeating-radial-gradient

(漸變形狀圓心位置,顏色

值1起始位置,顏色值2起始位置,……,顏色值n起始位置);知識(shí)準(zhǔn)備5.重復(fù)漸變重復(fù)漸變：讓線性漸變或者徑向漸變重復(fù)執(zhí)14知識(shí)準(zhǔn)備示例：重復(fù)線性漸變<styletype="text/css">div{width:200px;height:200px;margin:10pxauto;border:1pxsolid#000;

background-image:repeating-linear-gradient(90deg,#F00,#0F020%,#00F35%);}</style><body><div></div></body>知識(shí)準(zhǔn)備示例：重復(fù)線性漸變<styletype="text15<styletype="text/css">div{width:200px;height:200px;margin:10pxauto;border:1pxsolid#000;

background-image:repeating-radial-gradient(circleat50%50%,#F00,#0F015%,#00F25%);}</style>知識(shí)準(zhǔn)備示例：重復(fù)徑向漸變<body><div></div></body><styletype="text/css">知識(shí)準(zhǔn)備示例：16知識(shí)準(zhǔn)備6.Web字體圖標(biāo)Web字體圖標(biāo)：替代圖片圖標(biāo)，矢量。字體圖標(biāo)小，下載速度快。圖標(biāo)工具：font-awesome，開(kāi)源免費(fèi)使用方法：第一步：在“/FortAwesome/Font-Awesome”地址下載，解壓。只需用到“css”文件夾（樣式文件）和“fonts”文件夾（字體文件）。知識(shí)準(zhǔn)備6.Web字體圖標(biāo)Web字體圖標(biāo)：替代圖片圖標(biāo)，矢17知識(shí)準(zhǔn)備6.Web字體圖標(biāo)使用方法：第二步：將字體文件夾“fonts”和css文件“font-awesome.min.css”拷貝到站點(diǎn)目錄下。注意：“font-awesome.min.css

”文件必須要放在css文件夾中。第三步：使用web字體圖標(biāo)。在網(wǎng)頁(yè)中鏈接引入font-awesome.min.css文件，使用<i>標(biāo)簽定義字體圖標(biāo)，并通過(guò)class屬性定義不同的字體，例如“<iclass=’fafa-apple’></i>”。（每個(gè)圖標(biāo)都有相應(yīng)的class，可以在http://fontawesome.io/icons/網(wǎng)頁(yè)上查看。）知識(shí)準(zhǔn)備6.Web字體圖標(biāo)使用方法：第二步：將字體文件夾“18<head><metacharset="utf-8"><title>web字體圖標(biāo)</title>

<linkhref="css/font-awesome.min.css"rel="stylesheet"type="text/css"><styletype="text/css">.fa-apple{font-size:3em;color:#F00;}</style></head>知識(shí)準(zhǔn)備示例：web字體圖標(biāo)<body>

<iclass="fafa-apple"></i></body><head>知識(shí)準(zhǔn)備示例：web字體圖標(biāo)<body>19實(shí)戰(zhàn)演練案例描述：設(shè)計(jì)并制作網(wǎng)站廣告欄，網(wǎng)頁(yè)效果和布局圖如下。制作網(wǎng)站廣告欄實(shí)戰(zhàn)演練案例描述：設(shè)計(jì)并制作網(wǎng)站廣告欄，網(wǎng)頁(yè)效果和布局圖如下20強(qiáng)化訓(xùn)練案例描述：設(shè)計(jì)并制作旅游攻略網(wǎng)，網(wǎng)頁(yè)效果和布局圖如下。制作旅游攻略網(wǎng)強(qiáng)化訓(xùn)練案例描述：設(shè)計(jì)并制作旅游攻略網(wǎng)，網(wǎng)頁(yè)效果和布局圖如下21強(qiáng)化訓(xùn)練當(dāng)光標(biāo)移到導(dǎo)航上時(shí)，效果如圖上所示。當(dāng)光標(biāo)移到內(nèi)容塊上時(shí)出現(xiàn)陰影效果，如圖下所示。制作旅游攻略網(wǎng)強(qiáng)化訓(xùn)練當(dāng)光標(biāo)移到導(dǎo)航上時(shí)，效果如圖上所示。22任務(wù)小結(jié)01box-shadow屬性02box-sizing屬性03線性漸變04徑向漸變05重復(fù)漸變06Web字體圖標(biāo)任務(wù)小結(jié)01box-shadow屬性02box-sizing23課后實(shí)訓(xùn)設(shè)計(jì)商城首頁(yè)通道，如圖1所示。當(dāng)鼠標(biāo)移動(dòng)到列表項(xiàng)時(shí)，圖標(biāo)和文字變成白色，出現(xiàn)如圖2所示的效果。（提示：用Web字體圖標(biāo)完成。）圖1圖2課后實(shí)訓(xùn)設(shè)計(jì)商城首頁(yè)通道，如圖1所示。當(dāng)鼠標(biāo)24謝謝觀看謝謝觀看25任務(wù)13陰影與漸變屬性第五單元盒子模型任務(wù)13陰影與漸變屬性第五單元盒子模型26學(xué)習(xí)目標(biāo)徑向漸變box-shadow屬性box-sizing屬性線性漸變掌握Web字體圖標(biāo)學(xué)習(xí)目標(biāo)徑向漸變box-shadow屬性box-sizing27重復(fù)漸變了解:學(xué)習(xí)目標(biāo)重復(fù)漸變了解:學(xué)習(xí)目標(biāo)28任務(wù)目標(biāo)實(shí)戰(zhàn)演練——制作網(wǎng)站廣告欄任務(wù)目標(biāo)實(shí)戰(zhàn)演練——制作網(wǎng)站廣告欄29任務(wù)目標(biāo)實(shí)戰(zhàn)演練——制作旅游攻略網(wǎng)任務(wù)目標(biāo)實(shí)戰(zhàn)演練——制作旅游攻略網(wǎng)30知識(shí)準(zhǔn)備1.box-shadow屬性box-shadow屬性：為盒子模型添加陰影效果語(yǔ)法規(guī)則：box-shadow：像素值1像素值2像素值3像素值4顏色值陰影類型；參數(shù)值說(shuō)明像素值1必需。陰影的水平偏移量。正值陰影在右，負(fù)值陰影在左。像素值2必需。陰影的垂直偏移量。正值陰影在下，負(fù)值陰影在上。像素值3可選。陰影的模糊半徑。只能為正值。值越大，陰影越模糊。像素值4可選。陰影的擴(kuò)展半徑。正值陰影擴(kuò)大，負(fù)值陰影縮小。顏色值可選。陰影的顏色。陰影類型可選。外陰影(outset)或內(nèi)陰影(inset)。知識(shí)準(zhǔn)備1.box-shadow屬性box-shadow屬31知識(shí)準(zhǔn)備示例：box-shadow屬性<styletype="text/css">div{width:200px;height:200px;margin:10pxauto;border:1pxsolid#000;}#box{

box-shadow:5px5px10px2px#999;/*水平陰影位置，垂直陰影位置，陰影模糊半徑，陰影擴(kuò)展半徑，陰影的顏色;*/}</style><body><divid="box"></div></body>box-shadow:5px5px10px2px#999,5px5px10px2px#999inset;知識(shí)準(zhǔn)備示例：box-shadow屬性<styletype32知識(shí)準(zhǔn)備2.box-sizing屬性box-sizing屬性：定義盒子的寬度值（width）或高度值（height）是否包含元素的邊框和內(nèi)邊距。content-box：定義盒子的寬度值（width）或高度值（height）時(shí)，不包含元素的邊框和內(nèi)邊距。border-box：定義盒子的寬度值（width）或高度值（height）時(shí)，包含元素的邊框和內(nèi)邊距。知識(shí)準(zhǔn)備2.box-sizing屬性box-sizing屬33知識(shí)準(zhǔn)備示例：box-sizing屬性<styletype="text/css">div{width:230px;height:80px;margin:10pxauto;border:4pxsolid#000;padding:10px;}#box1{box-sizing:content-box;}#box2{

box-sizing:border-box;}</style><body><divid="box1">box1:content-box</div><divid="box2">box2:border-box</div></body>知識(shí)準(zhǔn)備示例：box-sizing屬性<styletype34知識(shí)準(zhǔn)備3.線性漸變線性漸變：起始顏色會(huì)沿著一條直線按順序過(guò)渡到結(jié)束顏色語(yǔ)法規(guī)則：background-image:linear-gradient(漸變角度,顏色值1起始位置,顏色值2起始位置,……,顏色值n起始位置);漸變角度：取值范圍是0~360deg，totop（從下到上，0deg），toleft（從右到左，270deg）,toright（從左到右，90deg）,tobottom（從上到下，180deg）。起始位置：用于設(shè)置顏色邊界，起始位置的值為像素?cái)?shù)值或百分比數(shù)值。知識(shí)準(zhǔn)備3.線性漸變線性漸變：起始顏色會(huì)沿著一條直線按順序35知識(shí)準(zhǔn)備示例：線性漸變<styletype="text/css">div{width:200px;height:200px;margin:10pxauto;border:1pxsolid#000;background-image:linear-gradient(toright,#F00,#0F0);}</style><body><div></div></body>background-image:linear-gradient(90deg,#F00,#0F050%,#00F80%);知識(shí)準(zhǔn)備示例：線性漸變<styletype="text/c36知識(shí)準(zhǔn)備4.徑向漸變徑向漸變：起始顏色會(huì)從一個(gè)中心點(diǎn)開(kāi)始，依據(jù)橢圓或圓形形狀進(jìn)行擴(kuò)張漸變。語(yǔ)法規(guī)則：background-image:radial-gradient(漸變形狀圓心位置,顏色值1起始位置,顏色值2起始位置,……,顏色值n起始位置);漸變形狀：水平和垂直半徑的像素值或百分比，circle或ellipse。圓心位置：定義元素漸變的中心位置，atcenter、atleft/right、attop/bottom、at像素值/百分比。起始位置：用于設(shè)置顏色邊界，起始位置的值為像素?cái)?shù)值或百分比數(shù)值。知識(shí)準(zhǔn)備4.徑向漸變徑向漸變：起始顏色會(huì)從一個(gè)中心點(diǎn)開(kāi)始，37知識(shí)準(zhǔn)備示例：徑向漸變<styletype="text/css">div{width:200px;height:200px;margin:10pxauto;border:1pxsolid#000;background-image:radial-gradient(circleatcenter,#F0020%,#0F060%,#00F80%);}</style><body><div></div></body>知識(shí)準(zhǔn)備示例：徑向漸變<styletype="text/c38知識(shí)準(zhǔn)備5.重復(fù)漸變重復(fù)漸變：讓線性漸變或者徑向漸變重復(fù)執(zhí)行。注意：只有當(dāng)首尾兩顏色位置不在0%或100%時(shí)，重復(fù)漸變才生效。（1）重復(fù)線性漸變background-image:repeating-linear-gradient(漸變角度,顏色值1起始位置,顏色值2起始位置,……,顏色值n起始位置);（2）重復(fù)徑向漸變

background-image:repeating-radial-gradient

(漸變形狀圓心位置,顏色

值1起始位置,顏色值2起始位置,……,顏色值n起始位置);知識(shí)準(zhǔn)備5.重復(fù)漸變重復(fù)漸變：讓線性漸變或者徑向漸變重復(fù)執(zhí)39知識(shí)準(zhǔn)備示例：重復(fù)線性漸變<styletype="text/css">div{width:200px;height:200px;margin:10pxauto;border:1pxsolid#000;

background-image:repeating-linear-gradient(90deg,#F00,#0F020%,#00F35%);}</style><body><div></div></body>知識(shí)準(zhǔn)備示例：重復(fù)線性漸變<styletype="text40<styletype="text/css">div{width:200px;height:200px;margin:10pxauto;border:1pxsolid#000;

background-image:repeating-radial-gradient(circleat50%50%,#F00,#0F015%,#00F25%);}</style>知識(shí)準(zhǔn)備示例：重復(fù)徑向漸變<body><div></div></body><styletype="text/css">知識(shí)準(zhǔn)備示例：41知識(shí)準(zhǔn)備6.Web字體圖標(biāo)Web字體圖標(biāo)：替代圖片圖標(biāo)，矢量。字體圖標(biāo)小，下載速度快。圖標(biāo)工具：font-awesome，開(kāi)源免費(fèi)使用方法：第一步：在“/FortAwesome/Font-Awesome”地址下載，解壓。只需用到“css”文件夾（樣式文件）和“fonts”文件夾（字體文件）。知識(shí)準(zhǔn)備6.Web字體圖標(biāo)Web字體圖標(biāo)：替代圖片圖標(biāo)，矢42知識(shí)準(zhǔn)備6.Web字體圖標(biāo)使用方法：第二步：將字體文件夾“fonts”和css文件“font-awesome.min.css

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論