版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
實(shí)操題：
1.設(shè)計(jì)制作照片墻，效果如圖4-48所示，要求使用CSS3背景設(shè)置,陰影與旋轉(zhuǎn)以及定位綜合實(shí)
現(xiàn)。
圖4-48素材圖片
參考代碼：
<!DOCTYPEhtml>
<html>
<head>
〈title)陰影效果〈/title)
<styletype="text/css">
html:root{
padding:50px;
}
.container{
height:600px;
position:relative;
}
div{
width:900px;
border:lpxsolid#888;
box-shadow:#99910px10px30px5px;
border-radius:10px;
background-repeat:no-repeat;
background-position:15px;
padding:15px15px35px15px;
background-color:#FFF;
}
div:hover{
box-shadow:#9990px0px10px2px;
z-index:10;
?
.imgl{
width:350px;
height:200px;
background-image:url(img/sanya2.png);
background-size:cover;
background-position:center;
position:absolute;
left:120px;
top:20px;
transform:rotate(Sdeg);
)
.imgl:hover(
left:122px;
top:18px;
transform:rotate(Odeg);
}
.img2{
width:400px;
height:250px;
background-image:url(img/sanya3.png);
background-size:cover;
background-position:center;
position:absolute;
left:30px;
top:230px;
transform:rotate(-5deg);
}
.img2:hover{
left:33px;
top:228px;
transform:rotate(Odeg);
)
-img3{
background-image:url(img/sanya4.png);
background-size:cover;
background-position:center;
width:300px;
height:200px;
position:absolute;
left:500px;
top:150px;
transform:rotate(2deg);
)
.img3:hover{
left:498px;
top:148px;
transform:rotate(Odeg);
)
</style>
</head>
<body>
<divclass="containern>
<divclass="imgl"x/div>
<divclass="img2"x/div>
<divclass="img3',x/div>
</div>
</body>
</html>
2.用CSS3漸變結(jié)合定位設(shè)計(jì)一個(gè)無(wú)js地banner動(dòng)畫展板800Px寬，如圖4-49與圖
4-50所示，默認(rèn)每個(gè)圖片占用160px展示圖片，鼠標(biāo)滑過(guò)圖片時(shí)，當(dāng)前圖片展示640px,
其余圖片縮減為40px。
圖4-49默認(rèn)展示效果
圖4-50鼠標(biāo)滑過(guò)某個(gè)圖片時(shí)
(a)
(b)
(c)
(d)
(e)
圖4-51素材圖片
參考代碼：
<!DOCTYPEHTML>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;
charset=utf-8">
<title>CSS3無(wú)js動(dòng)畫〈/title)
<style>
*{
margin:0;
padding:0;
}
body{
background:#ccc;
font-family:arial,verdana,tahoma;
}
.accordian{
width:805px;
height:320px;
overflow:hidden;
margin:100pxauto;
-webkit-box-shadow:0010pxIpxrgba(0,0,0,0.35);
-moz-box-shadow:0010pxlpxrgba(0,0,0,0.35);
box-shadow:0px0px10pxlpxrgba(0?0,0,0.35);
)
.accordianul{
width:2000px;
}
.accordianli{
position:relative;
display:block;
width:160px;
float:left;
border-left:lpxsolid#888;
/*投影*/
box-shadow:0025px10pxrgba(0,0,0,0.5);
-webkit-box-shadow:0025px10pxrgba(0,0,0,0.5);
-moz-box-shadow:0025px10pxrgba(0,0,0,0.5);
/*過(guò)渡*/
-webkit-transition:all0.5s;
-moz-transition:all0.5s;
transition:all0.5s;
}
.accordianul:hoverli{
width:40px;
}
.accordianulli:hover{
width:640px;
)
.image_title{
background:rgba(0,0,0,0.5);
position:absolute;
left:0px;
background:0px;
width:640px;
}
.image_titlea{
display:block;
color:#ddd;
text-decoration:none;
font-family:"微軟雅黑"Verdana,Geneva,sans-serif;
padding:10px;
font-size:16px;
text-shadow:5px2px6px#000;
font-weight:bolder;
}
</style>
</head>
<body>
<divclass="accordian">
<ul>
<li>
<divclass="image_title">
<ahref="#”>房熊貓</a>
</div>
<ahref="#"ximgsrc="images/3yiC6Yq.jpg"/></a>
</li>
<li>
<divclass="image_title">
<a玩具總動(dòng)員2</a>
</div>
<ahref="#"ximgsrc="images/40Ly3VB.jpg"/></a>
</li>
<li>
<divclass="image_title">
<ahref="#">機(jī)器人總動(dòng)員</a>
</div>
<ahref="#"><imgsrc="images/00kih8g.jpg"/></a>
</li>
<li>
<divclass="image_title">
<ahref="#">Up</a>
</div>
<ahref="#"ximgsrc="images/2rT2vdx.jpg"/></a>
</li>
<li>
<divclass="image_title">
<ahref="#">卡通賽車<%>
</div>
<ahref="#"ximgsrc="images/8k3N3EL.jpg"/></a>
</li>
</ul>
</div>
</body>
</html>
3.要求設(shè)計(jì)一個(gè)菱形布局頁(yè)面，默認(rèn)效果如圖4-52所示，鼠標(biāo)滑過(guò)切換板塊展示地內(nèi)
容效果如圖4?53所示。
累示第六個(gè)板提■七個(gè)板快
圖4-52默認(rèn)布局
?示伍三個(gè)板3
■示融四個(gè)極陵■玉集6個(gè)依境M示版六個(gè)微續(xù)■七個(gè)快陵
圖4-53鼠標(biāo)滑過(guò)板塊
參考代碼：
<!DOCTYPEhtml>
<html>
<hcad>
<metacharset=",UTF-8">
<titlex/title>
<styletype="text/css">
@charset"utf-8";
/*CSSDocument*/
*{
margin:0;
padding:?;
)
body{
font-family:'MicrosoftYaHei,;
font-size:12px;
)
body,div,dl,dt,dd,hl,h2,h3,h4,h5,h6,pre,form,fieldset,input
,textarea,blockquote{
padding:0;
margin:0;
)
table,td,tr^th{
font-size:12px;
)
li(
list-style-type:none;
)
table{
margin:?auto;
)
img{
vertical-align:top;
border:?;
)
ol,ul{
list-style:none;
)
caption,th{
text-align:left;
)
a(
text-decoration:none;
color:#000;
)
a:hover{
color:#0005
textdecoration:none;
)
.mainll40{
width:1140px;
margin:0auto;
overflow:hidden;
)
.process-box{
width:1140px;
height:450px;
}
.process-boxul{
width:1140px;
)
.process-boxulli{
width:196px;
height:196px;
float:left;
cursor:pointer;
position:relative;
)
.process-boxulli.kuang{
position:absolute;
width:196px;
height:196px;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
border:lpxsolid#ddd;
margin-top:42px;
margin-left:42px;
)
.process-boxulli.kuangl{
top:0;
left:0;
z-index:l;
)
.process-boxulli.kuang2{
left:5px;
top:0px;
z-index:2;
}
.process-boxulli.textl{
width:276px;
height:276px;
text-alignreenter;
z-index:3;
position:absolute;
left:7px;
top:2px;
)
.process-boxulli.textl.bg{
width:276px;
height:276px;
)
.process-boxulli.textl.num{
padding-top:50px;
font-size:86px;
color:#dacdc2;
font-weight:700;
)
.process-boxulli.textl.title{
font-size:15px;
color:#422710;
)
.process-boxulli.textl.eng{
font-size:12px;
color:#b4a078;
)
.process-boxulli.text2{
width:276px;
height:276px;
z-index:4;
position:absolute;
left:5px;
top:0px;
display:none;
)
.process-boxulli.text2.mengban{
border:lpxsolid#533b26;
position:absolute;
z-index:l;
width:196px;
height:196px;
moztransform:rotate(45dcg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
background:#533b26;
margin-top:42px;
margin-left:42px;
)
.process-boxulli.text2.desc{
position:absolute;
z-index:2;
width:140px;
height:110px;
top:88px;
left:70px;
font-size:12px;
color
text-align:center;
line-height:24px;
)
.process-boxulli{
margin-right:89px;
)
.process-boxul.twoli{
margin-top:-40px;
)
.process-boxulli:hover.text2{
display:block;
)
</style>
</head>
<body>
<divclass="mainll40">
<divclass="process-box">
<ulclass="one">
<li>
<divclass="kuangkuangl">
</div>
<divclass="kuangkuang2">
</div>
</li>
<listyle="margin-left:-145px;">
<divclass="kuangkuangl">
</div>
<divclass="kuangkuang2">
</div>
<divclass="textl">
<divclass="bgbgl">
<pclass="num">l</p>
<pclass="title")展示第一個(gè)板塊〃p>
<pclass="eng">first</p>
</div>
</div>
<divclass=',text2',>
<divclass="mengban"x/div>
<pclass="desc”>第一個(gè)板塊詳細(xì)內(nèi)容</p>
</div>
</li>
<li>
<divclass="kuangkuangl">
</div>
<divclass="kuangkuang2">
</div>
<divclass="textl">
<divclass="bgbg2">
<pclass="num">2</p>
<P<：1355=氣設(shè)16”>展示第二個(gè)板塊《川>
<pclass="eng">second</p>
</div>
</div>
<divclass="text2">
<divclass="mengban"x/div>
<pclass="desc”>第二個(gè)板塊詳細(xì)內(nèi)容</p>
</div>
</li>
<li>
<divclass="kuangkuangl">
</div>
<divclass="kuangkuang2">
</div>
<divclass="textl">
<divclass="bgbg3">
<pclass="num">3</p>
<pclass-title”）展示第三個(gè)板塊〃p>
<pclass-"cng">third</p>
</div>
</div>
<divclass="text2">
<divclass="mengban"x/div>
<pclass="desc”>第三個(gè)板塊詳細(xì)內(nèi)容</p>
</div>
</li>
<listyle="margin-left:-145px;">
<divclass="kuangkuangl">
</div>
<divclass="kuangkuang2">
</div>
</li>
</ul>
<ulclass="two">
<li>
<divclass="kuangkuangl">
</div>
<divclass="kuangkuang2">
</div>
<divclass="textl">
<divclass="bgbg4">
<pclass="num">4</p>
<pclass="title”>展示第四個(gè)板塊</p>
<pclass="eng">fourth</p>
</div>
</div>
<divclass="text2">
<divclass="mengban"></div>
<pclass="desc”>第四個(gè)板塊詳細(xì)內(nèi)容
</div>
</li>
<li>
<divclass="kuangkuangl">
</div>
<divclass="kuangkuang2">
</div>
<divclass="textl">
<divclass="bgbg5">
<pclass="num">5</p>
<pclass="title"〉展示第五個(gè)板塊</p>
<pclass="engH>fifth</p>
</div>
</div>
<divclass="text2">
divclass="mengban"x
溫馨提示
- 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ù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 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ì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 交通圍欄銷售合同范本
- 農(nóng)業(yè)營(yíng)銷合作合同范本
- 保溫鋼結(jié)構(gòu)合同范本
- Sara's Medicine（說(shuō)課稿）-2023-2024學(xué)年麗聲北極星分級(jí)繪本四年級(jí)上（江蘇版）
- Unit3 What would you like(說(shuō)課稿)-2024-2025學(xué)年人教PEP版英語(yǔ)五年級(jí)上冊(cè)課例研修說(shuō)課稿
- 買菜采購(gòu)合同范例
- 供熱改造維修合同范例
- 關(guān)于led合同范例
- 網(wǎng)絡(luò)信息安全監(jiān)測(cè)響應(yīng)機(jī)制
- 太赫茲波段介質(zhì)材料的電磁特性
- 全過(guò)程造價(jià)咨詢服務(wù)的質(zhì)量、進(jìn)度、保密等保證措施
- 縣城屠宰場(chǎng)建設(shè)可行性研究報(bào)告
- 25學(xué)年六年級(jí)數(shù)學(xué)寒假作業(yè)《每日一練》
- 2025高考數(shù)學(xué)一輪復(fù)習(xí)-第8章-第3節(jié) 圓的方程【課件】
- 人文關(guān)懷在護(hù)理工作中的體現(xiàn)
- 2025年1月八省聯(lián)考高考綜合改革適應(yīng)性測(cè)試-高三生物（陜西、山西、寧夏、青海卷） 含解析
- 環(huán)保行業(yè)深度研究報(bào)告
- 開工第一課安全培訓(xùn)內(nèi)容
- 社會(huì)主義核心價(jià)值觀課件
- 《公路養(yǎng)護(hù)安全培訓(xùn)》課件
- 公益捐助活動(dòng)影響力評(píng)估方法
評(píng)論
0/150
提交評(píng)論