zoukankan      html  css  js  c++  java
  • 0918练习题

    1. 布局出该效果倒三角

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

    <html>

    <head>

    <style type="text/css">

    #name1{
     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;
      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;350px; height:100px; border:2px solid #60F; overflow:hidden; padding:10px 10px 10px 10px}

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

    #sanjiao{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 {
      500px;
     height: 35px;
     border: 1px solid #e9e9e9;
    }

    .wenzi {

    font-weight:bold;
     float: left;
      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>

  • 相关阅读:
    Unix下5种I/O模型
    UDP/TCP拾遗
    智能指针
    YUV的数据格式
    OpenCV中RGB和HSV转换的问题
    RGB、YUV和HSV颜色空间模型
    const成员函数和mutable关键字
    设计模式--观察者模式Observer(对象行为型)
    linux备忘簿
    ctags使用详解(转载)
  • 原文地址:https://www.cnblogs.com/zxl89/p/5882184.html
Copyright © 2011-2022 走看看