中秋节后测试题

1   布局出该效果

提示：使用DIV的border样式，调整边框粗细出现该效果，保留上边框，其它三个方向的边框需设置：border-left:100px solid transparent;来透明掉。

答案：

*{ margin:0px auto; padding:0px}
#sjx{width:0px; height:0px;border-top:100px solid #00F; border-left:100px solid #FFF; border-right:100px solid #FFF; border-bottom:100px solid #FFF; opacity:0.1; -moz-opacity:0.1; filter:alpha(opacity=10)}

<div id="sjx"></div>

正确答案：#sjx{width:0px; height:0px; border-top:100px solid #33C; border-right:100px solid transparent; border-bottom:100px solid transparent; border-left:100px solid transparent}

 

2  布局出该效果

提示：DIV旋转使用的样式：transform:rotate(45deg)；旋转45度

答案：此处共提供两种方法:

(1)  *{ margin:0px auto; padding:0px}
      #zwc{ width:100px; height:100px; background-color:#00F; transform:rotate(45deg); margin-top:30px }
      #zj{width:100px; height:100px; background-color:#FFF; left:10px; bottom:10px; position:relative}

      <div id="zwc">
      <div id="zj"></div>
      </div>
      </div>

(2)#dez{ width:100px; height:100px;border-left:10px solid #00F; border-bottom:10px solid #00F; transform:rotate(45deg)}

　　<div id="dez">
      </div>

3  简述以下代码实现的效果：

 

<style type="text/css">

*{ margin:0px auto; padding:0px; font-family:微软雅黑; font-size:14px;}

#content{margin:20px 0px 0px 300px;width:350px; height:100px; border:2px solid #60F; overflow:hidden; padding:10px 10px 10px 10px}

#waiceng{width:100px; height:50px;margin-left:320px; overflow:hidden; margin-top:-2px}

#sanjiao{width:50px; height:50px; border:2px solid #60F;transform:rotate(45deg); position:relative;top:-27px; border-left:0px; border-top:0px; background-color:white;}

</style>

 

<div id="content">

    CSS3中添加的transform是对元素进行变化操作的，包括位移，旋转，放大，变形等操作。这里我的代码均是采用标准的css3规范书写，大家使用的时候为了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等前缀以适应不同的浏览器。

</div>

<div id="waiceng">

         <div id="sanjiao"></div>

</div>

 

4     布局出该效果

   鼠标放上：

 

要求：鼠标放上的过程中文字位置不移动。

 

提示：字体微软雅黑，文字颜色#333，外边框颜色#e9e9e9，鼠标放上背景色#b3b6bb，鼠标放上边框颜色#F39

答案：此处仅提供两种答案，可通过设置正常情况下存在一个白色的上边框来实现，也可设置成将鼠标移上时出现上边框：

 

#menu{ width:600px; height:40px; border:1px solid #e9e9e9;}
.aa{ width:100px; height:40px; float:left; text-align:center; vertical-align:middle; line-height:40px; font-weight:bold}
.aa:hover{ cursor:pointer; background-color:#b3b6bb; color:white; border-top:2px solid #F39; height:38px; line-height:36px}
#menu1{width:600px; height:40px; border:1px solid #e9e9e9;}
.aa1{width: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; background-color:#b3b6bb; color:white; border-top:2px solid #F39;}

<div id="menu">
 <div class="aa">春节</div>
    <div class="aa">元宵节</div>
    <div class="aa">端午节</div>
    <div class="aa">中秋节</div>
    <div class="aa">国庆节</div>
</div>

<br />
<div id="menu1">
 <div class="aa1">春节</div>
    <div class="aa1">元宵节</div>
    <div class="aa1">端午节</div>
    <div class="aa1">中秋节</div>
    <div class="aa1">国庆节</div>
</div>

 

5       括号内可以写加或减，要使等式成立，括号里面应该填什么值。

123（）45（）56（）78 （）90 = 100

 

提示：使用for循环嵌套，+1可代表加号（正1乘以一个数是整数），-1可代表减号（负1乘以一个数是负数，负数在加法运算中相当于减）

答案：

for(i=-1;i<2;i+2)
{ for(j=-1;j<2;j+2)
 { for(k=-1;k<2;k+2)
  { for(l=-1;l<2;l+2)
      {    a=123+i*45+j*56+k*78+l*90;
     if(a==100)
     {
      s="运算符分列如下：("+i+")("+j+")("+k+")("+l+")";
      }
    }
   }
  }
 }
 alert(s);