版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
實(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è)無js地banner動畫展板800Px寬，如圖4-49與圖
4-50所示，默認(rèn)每個(gè)圖片占用160px展示圖片，鼠標(biāo)滑過圖片時(shí)，當(dāng)前圖片展示640px,
其余圖片縮減為40px。
圖4-49默認(rèn)展示效果
圖4-50鼠標(biāo)滑過某個(gè)圖片時(shí)
(a)
(b)
(c)
(d)
(e)
圖4-51素材圖片
參考代碼：
<!DOCTYPEHTML>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;
charset=utf-8">
<title>CSS3無js動畫〈/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);
/*過渡*/
-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玩具總動員2</a>
</div>
<ahref="#"ximgsrc="images/40Ly3VB.jpg"/></a>
</li>
<li>
<divclass="image_title">
<ahref="#">機(jī)器人總動員</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è)菱形布局頁面，默認(rèn)效果如圖4-52所示，鼠標(biāo)滑過切換板塊展示地內(nèi)
容效果如圖4?53所示。
累示第六個(gè)板提■七個(gè)板快
圖4-52默認(rèn)布局
?示伍三個(gè)板3
■示融四個(gè)極陵■玉集6個(gè)依境M示版六個(gè)微續(xù)■七個(gè)快陵
圖4-53鼠標(biāo)滑過板塊
參考代碼：
<!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. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 利益分配合同范例
- 出海合同范例
- 《健身器械常識》課件
- 居室裝潢施工合同范例
- 山林用地出租合同范例
- 智能洗滌：未來之選
- 關(guān)于夏令營活動方案
- 中交一公局土方合同范例
- 小學(xué)教師思想工作總結(jié)
- 婚戀簽合同范例
- 網(wǎng)球活動策劃推廣方案
- 全國食品安全風(fēng)險(xiǎn)監(jiān)測參考值 2024年版
- 人工智能生涯發(fā)展展示
- 2023年福建省考評員考試題
- 開源軟件供應(yīng)鏈安全研究
- 三年級上冊數(shù)學(xué)教案-第7單元 分?jǐn)?shù)的初步認(rèn)識（一） 單元概述和課時(shí)安排 蘇教版
- 中國釔-90行業(yè)市場現(xiàn)狀分析及競爭格局與投資發(fā)展研究報(bào)告2024-2029版
- 腫瘤血小板低的護(hù)理措施
- 文物修復(fù)保護(hù)方案
- 課桌舞表演總結(jié)語
- 中國石油天然氣集團(tuán)公司安全監(jiān)督管理辦法
評論
0/150
提交評論