博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
0918练习题
阅读量:4312 次
发布时间:2019-06-06

本文共 2543 字,大约阅读时间需要 8 分钟。

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>

 

转载于:https://www.cnblogs.com/zxl89/p/5882184.html

你可能感兴趣的文章
程序猿是如何解决SQLServer占CPU100%的--马非码
查看>>
Shell之sed用法 转滴
查看>>
百度ueditor 拖文件或world 里面复制粘贴图片到编辑中 上传到第三方问题
查看>>
python基础之函数参数、嵌套、返回值、对象、命名空间和作用域
查看>>
公式推导【ASRCF//CVPR2019】
查看>>
Python(4)_Python中的数据类型
查看>>
HTTP 响应头信息
查看>>
cocos2dx中的层CCLayer
查看>>
Windows XP硬盘安装Ubuntu 12.04双系统图文详解
查看>>
【资料】哈代&拉马努金相关,悼文,哈佛演讲,及各种杂七杂八资料整理
查看>>
Use weechat (IRC client) on OS X. MacBook Pro
查看>>
Luogu P3616 富金森林公园
查看>>
[Nowcoder] 六一儿童节(拼多多)
查看>>
centos6.7用yum安装redis解决办法及IP限制配置
查看>>
用DataReader 分页与几种传统的分页方法的比较
查看>>
看起来像是PS的照片,实际上却令人难以置信!
查看>>
随笔一则
查看>>
WEB 小案例 -- 网上书城(一)
查看>>
加入博客园八个月了
查看>>
怎样实现前端裁剪上传图片功能
查看>>