一、布局出下列图片中的效果
方法1：先做一个图片显示的颜色的矩形，再用两个旋转的白色的矩形把两边覆盖。
<div style="200px; height:100px; margin-left:100px; margin-top:20px; border-10px"></div> <div style="180px; height:180px; -webkit-transform:rotate(45deg); margin-top:-80px"></div> <div style="180px; height:180px; -webkit-transform:rotate(-45deg); margin-left:200px; margin-top:-180px; position:relative"><div>
方法2：做一个0*0的<div>，设置四个边界的，上边界设置为border-top:100px solid #00F，其它三个边界设置为border-right:100px solid white，结果会只显示上面的 border。这种方法最为简单，只需要1个<div>。
<div style="0px; height:0px; border-top:100px solid #00F; border-right:100px solid white; border-bottom:100px solid white; border-left:100px solid white"></div>
二、布局下列图片效果
方法1：布置2个大小一样的div，都旋转45度，前面一个背景颜色设置为目标颜色，后面一个背景颜色设为white，向左移动后面一个把前一个覆盖住，达到目标效果。
<div style="100px; height:100px; -webkit-transform:rotate(45deg); margin-top:20px; margin-left:10px"></div> <div style="100px; height:100px; -webkit-transform:rotate(45deg); margin-top:-100px; margin-left:20px"></div>
方法2：布置1个div，背景色为white，设置下边框和左边框都为8px solid #00F（目标颜色），最后再旋转45度。
<div style="100px; height:100px; margin-left:100px; border-bottom:8px solid #00F; border-left:8px solid #00F; -webkit-transform:rotate(45deg)"></div>
三、简述以下代码实现的效果
<div id=content>代码实现的效果为
<div id="waiceng"><div>加上后的效果为（红色区域是为了能够看出区域加上的，实际上是白色）
<div id="sanjiao"></div>加上最后的<div>后
四、布局出下列效果
要求：鼠标放上的过程中文字位置不移动。
提示：字体微软雅黑，文字颜色#333，外边框颜色#e9e9e9，鼠标放上背景色#b3b6bb，鼠标放上边框颜色#F39
<style type="text/css"> *{ margin:0px auto; padding:0px; font-family:微软雅黑} #menu1{ width:440px; height:40px; list-style:none; color:#333; border-style:solid; border:1px solid #FFF} .text{ width:80px; height:40px; float:left; text-align:center; line-height:40px; vertical-align:middle; border-top-width:2px} .text:hover{ cursor:pointer; background-color:#b3b6bb; border-top:2px solid #F39; height:38px; line-height:36px} </style> </head> <body> <div style="440px; height:40px; margin-top:10px"> <ul id="menu1"> <li class="text">春节</li> <li class="text">元宵节</li> <li class="text">端午节</li> <li class="text">中秋节</li> <li class="text">国庆节</li> </ul> </div> </body>
鼠标放上去文字位置不动，文字动的原因是当鼠标放上去以后会出现上边距，有了上边距以后，单元框的中心线在鼠标放上去以后会下降，才导致了文字变动。所以要在鼠标放上去以后设置行高，使鼠标放上去以后和放上之前的中心线不变，行高的高度再减去上边距的高度。
height:38px; line-height:36px 38px表示行高减去上边距的距离， line-height:36px 表示鼠标放上去以后再减去一个和上边距相等的下边距的距离。
五、括号内可以写加或减，要使等式成立，括号里面应该填什么值。
123（）45（）56（）78 （）90= 100
提示：使用for循环嵌套，+1可代表加号（正1乘以一个数是整数），-1可代表减号（负1乘以一个数是负数，负数在加法运算中相当于减）
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 o=-1;o<2;o=o+2) { if(123+i*45+j*56+k*78+o*90 == 100) { s = "("+i+")("+j+")("+k+")("+o+")"; } } } } } alert(s);
+1表示“+”，-1表示“-”。i（j、k、o）只有2个值，1或者-1。for(var j=-1;j<2;j=j+2)或者for(var j=1;j>-2;j=j-2)都可以，表示的i（j、k、o）的值都只有1和-1。