宇智波佐助
2.网站的CSS定位属性的使用
body,ul,li,h1,h2,h3,h4,p,a,img,dl,dt,dd{margin:0;padding:0}
body{font:12px/1.5
Tahoma,"Arial","sans-serif";color:#5F2B21;text-align:left;min-width:1 000px;padding-top:42px;background-color:#000;-webkit-text-size-adjust :none}
a
{color:#5F2B21;vertical-align:baseline;text-decoration:none;cursor:po inter;outline:none}
a:hover {text-decoration:underline}
ul,li{list-style-type:none}
.hid{display:block;height:0;overflow:hidden}
.tn{text-indent:-9999em;overflow:hidden;display:block}
.fl{float:left}.fr{float:right}
img,a img{border:none}
.w1000{width:1000px;margin:0 auto}
.logo{display:block;width:254px;height:136px;position:absolute;left:3 1px;top:0}
.nav{padding-left:322px;height:84px;width:678px;overflow:hidden}
.nav li{width:112px;height:84px;float:left;margin-right:1px}
.nav a{display:block;width:112px;height:84px;float:left}
.nav a:hover{background-color:#404040}
.navon{background-color:#404040}
.nav a:hover .ic,.nav a:hover .ft,.ia,.fs{background-image:url(https://www.wendangku.net/doc/db6625467.html,/ima ges/huoying/web201303/nav_top.png);background-repeat:no-repeat}
.ic,.ft,.ia,.fs{display:block}.ft,.ia,.fs{width:35px;height:20px}
.ic1{background-position:0 -1px;width:35px;height:32px;margin:13px 0 0 38px}
.ft1{background-position:0 -42px;margin:5px 0 0 38px}
.ic2{background-position:-35px
-3px;width:35px;height:27px;margin:15px 0 0 42px}
.ft2{background-position:-35px -42px;margin:7px 0 0 41px}
.ic3{background-position:-69px -1px;width:35px;height:37px;margin:8px 0 0 45px}
.ft3{background-position:-70px -42px;margin:4px 0 0 46px}
.ic4{background-position:-105px
-1px;width:35px;height:34px;margin:11px 0 0 42px}
.ft4{background-position:-105px -42px;margin:5px 0 0 42px}
.ic5{background-position:-144px
-3px;width:30px;height:30px;margin:15px 0 0 45px}
.ft5{background-position:-141px -42px;margin:5px 0 0 40px}
.ic6{background-position:-177px
-2px;width:34px;height:34px;margin:11px 0 0 42px}
.ft6{background-position:-178px -42px;margin:5px 0 0 42px}
/*webkit*/
.nav a:hover .ic{-webkit-animation: rotate 400ms ease}
@-webkit-keyframes rotate{
from{-webkit-transform:rotate(0deg);opacity:0}
to{-webkit-transform:rotate(360deg);opacity:1}
}
.nav a:hover .ft{-webkit-animation: moveFromRight 300ms ease}
@-webkit-keyframes moveFromRight{
from{-webkit-transform:translateY(70%);opacity:0}
to{-webkit-transform:translateY(0%);opacity:1}
}
/*moz*/
.nav a:hover .ic{-moz-animation: rotate 400ms ease}
@-moz-keyframes rotate{
from{-moz-transform:rotate(0deg);opacity:0}
to{-moz-transform:rotate(360deg);opacity:1}
}
.nav a:hover .ft{-moz-animation: moveFromRight 300ms ease}
@-moz-keyframes moveFromRight{
from{-moz-transform:translateY(80%);opacity:0}
to{-moz-transform:translateY(0%);opacity:1}
}
/*footer*/
.footer{padding:20px
0;clear:both;width:1000px;text-align:center;overflow:hidden;margin:0 auto;line-height:20px;color:#434343}
.foot_logo{width:428px;height:40px;border-right:1px solid #434343;margin-right:10px;float:left}
.foot_logo
a,.footer .e{float:left;);display:block;background-repeat:no-repeat;} .tg1{width:107px;height:38px;background-position:0
-53px}.tg2{margin-left:31px;width:107px;height:38px;cursor:default;ba ckground-position:-115px
-49px}.tg3{margin-left:27px;width:39px;height:35px;background-positio
n:-228px
-49px}.tg4{margin-left:30px;width:63px;height:35px;background-positio n:-269px -49px}
.footer a{color:#434343}
.footer span{display:inline-block;margin:0 9px 0;*margin-bottom:7px;margin-bottom:0\0;width:1px;height:6px;overflow: hidden;background-color:#434343}
.footer .e{text-align:left;background-position:0 16px;width:390px;height:65px;font-size:11px;font-size:10px\9;font-fam ily:sans-serif;line-height:19px}
.pal{padding-left:5px}
.footer em{font-style:normal;font-size:12px;font-family:Tahoma}
.footer .r{float:right}
3.Javascript特效的应用
onClick="playV('ctab1','vbox1','g0112bygnry', 'js1','0',this)" href="javascript:void(0)" class="hover" title="影分身术">影分身术
4.验证表单输入正确与否的方法
这次实验我没有做表单。
五、实验结果
注:可用贴图的方式
1.二个二级页面的设计效果图
2.任选两个二级页面,给出其核心html的源代码、核心的CSS代码
李洛克
- 表莲花
- 斗志
onClick="playV('ctab3','vbox3','s01125oikyb', 9;js3','8',this)" href="javascript:void(0)" title="里莲华">里莲华
当敌人处于大浮空状态时,李用绷带将其包裹后由空中高速落下,对敌人造成体术伤害并将其击倒。
- 表莲华帅呆了!
- 体术DPS
- 小李会吸血啊
- 粗眉毛
- 全身肌肉粉碎还能满血复活的瘦版猛
男