首页 > 代码库 > 0918练习题
0918练习题
1. 布局出该效果
倒三角
提示：使用DIV的border样式，调整边框粗细出现该效果，保留上边框，其它三个方向的边框需设置：border-left:100px solid transparent;来透明掉。
<html>
<head>
<style type="text/css">
#name1{
width:0px;
height:0px;
border:100px solid #00F;
border-right:100px solid transparent;
border-left:100px solid transparent;
border-bottom:100px solid transparent;
}
</style>
</head>
<body>
<div id="name1"></div>
</body>
</html>
2.布局出"<"效果. 提示：DIV旋转使用的样式：transform:rotate(45deg)；旋转45度
<html>
<head>
<style type="text/css">
#text2 {
height: 100px;
width: 100px;
transform: rotate(45deg);
border-left: 10px solid #653298;
border-bottom: 10px solid #653298;
}
</style>
</head>
<body>
<div id="text2"></div>
</body>
</html>
3.这是一个小对话框样式是左下角出来一个倒三角。
<html><head>
<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>
</head>
<body>
<div id="content">
CSS3中添加的transform是对元素进行变化操作的，包括位移，旋转，放大，变形等操作。这里我的代码均是采用标准的css3规范书写，大家使用的时候为了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等前缀以适应不同的浏览器。
</div>
<div id="waiceng">
<div id="sanjiao"></div>
</body>
</html>
4.布局出该效果 春节 元宵节 端午节 中秋节 国庆节
提示：字体微软雅黑，文字颜色#333，外边框颜色#e9e9e9，鼠标放上背景色#b3b6bb，鼠标放上边框颜色#F39
要求：鼠标放上的过程中文字位置不移动。
<html>
<head>
<style type="content">
#name4 {
width: 500px;
height: 35px;
border: 1px solid #e9e9e9;
}
.wenzi {
font-weight:bold;
float: left;
width: 90px;
height: 34px;
color: #333;
font-family: "微软雅黑";
text-align: center;
vertical-align: middle;
line-height: 34px;
border-top: 1px solid #FFF;
}
.wenzi:hover {
cursor:pointer;
border-top-color:#F39;
background-color: #b3b6bb;
color: #FFF;
</style>
</head>
<body>
<div id="name4">
<div class="wenzi">春节</div>
<div class="wenzi">元宵节</div>
<div class="wenzi">端午节</div>
<div class="wenzi">中秋节</div>
<div class="wenzi">国庆节</div>
</div>
</body>
</html>
5.括号内可以写加或减，要使等式成立，括号里面应该填什么值。
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>
0918练习题