html练习

bilibiliganbei 2021-08-28 原文

border-left:100px solid transparent; 左边框隐藏

transform:rotate(45deg); 　　　　　　div旋转45度

用css做一个三角形

<style type="text/css">

#a{
    width:0px;
    height:0px;
    border-top:100px solid #00C;
    border-left:100px solid transparent;
    border-right:100px solid transparent;}
</style>
<body>
<div id="a"></div>
</body>

View Code

用css做一个破折号

<style type="text/css">
#b{
    width:100px;
    height:100px;
    border-left:10px solid #00C;
    border-bottom:10px solid #00C;
    transform:rotate(45deg);
    }
</style>

<div id="b"></div>

View Code

用div+css做一个提示框

<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>

View Code

效果图：

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

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

<script type="text/javascript">
var s="";
for(var i=-1;i<2;i=i+2)
{
    for(var x=-1;x<2;x=x+2)
    {
        for(var y=-1;y<2;y=y+2)
        {
            for(var z=-1;z<2;z=z+2)
            {
                var zhi=123+i*45+x*56+y*78+z*90;
                if(zhi==100)
                {
                    s="("+i+")("+x+")("+y+")("+z+")";    
                }
            }
        }
    }
}
alert(s);
</script>