测试时间(2016年9月18日上午9:00-11:30),满分共100分(每题20分)
- 布局出该效果
#one{ 0px; height:0px; border-top:100px solid #33C; border-right:100px solid transparent; border-bottom:100px solid transparent; border-left:100px solid transparent}
<div id="one"></div>
提示:使用DIV的border样式,调整边框粗细出现该效果,保留上边框,其它三个方向的边框需设置:border-left:100px solid transparent;来透明掉。
- 布局出该效果
提示:DIV旋转使用的样式:transform:rotate(45deg);旋转45度
第一种方法:
#two{ 100px; height:100px; border-left:6px solid #63C; border-bottom:6px solid #63C;transform:rotate(45deg)}
<div id="two"></div>
第二种方法:
#two1{ 100px; height:100px; transform:rotate(45deg)}
#two2{ 100px; height:100px; position:relative; left:6px; top:-6px}
<div id="two1">
<div id="two2"></div>
</div>
- 简述以下代码实现的效果:
第一种方法:
#menu{ 600px; height:40px; border:1px solid #e9e9e9;}
.aa{ 100px; height:40px; float:left; text-align:center; vertical-align:middle; line-height:40px; font-weight:bold}
.aa:hover{ cursor:pointer; color:white; border-top:2px solid #F39; height:38px; line-height:36px}
<div id="menu">
<div class="aa">春节</div>
<div class="aa">元宵节</div>
<div class="aa">端午节</div>
<div class="aa">中秋节</div>
<div class="aa">国庆节</div>
</div>
第二方法:#menu1{600px; height:40px; border:1px solid #e9e9e9;}
.aa1{100px; height:38px; float:left; text-align:center; vertical-align:middle; line-height:38px; font-weight:bold; border-top:2px solid white;}
.aa1:hover{cursor:pointer; color:white; border-top:2px solid #F39;}
div id="menu1">
<div class="aa1">春节</div>
<div class="aa1">元宵节</div>
<div class="aa1">端午节</div>
<div class="aa1">中秋节</div>
<div class="aa1">国庆节</div>
- 布局出该效果
鼠标放上:
要求:鼠标放上的过程中文字位置不移动。
提示:字体微软雅黑,文字颜色#333,外边框颜色#e9e9e9,鼠标放上背景色#b3b6bb,鼠标放上边框颜色#F39
- 括号内可以写加或减,要使等式成立,括号里面应该填什么值。
123()45()56()78 ()90 = 100
提示:使用for循环嵌套,+1可代表加号(正1乘以一个数是整数),-1可代表减号(负1乘以一个数是负数,负数在加法运算中相当于减)
<script type="text/javascript">
var s = "";
for(var i=-1;i<2;i=i+2)
{
for(var j=-1;j<2;j=j+2)
{
for(var k=-1;k<2;k=k+2)
{
for(var l=-1;l<2;l=l+2)
{
var leftzhi = 123+i*45+j*56+k*78+l*90;
if(leftzhi == 100)
{
s = "("+i+")("+j+")("+k+")("+l+")";
}
}
}
}
}
alert(s);
</script>