首页运维零件 › 先做一个图片显示的颜色的矩形,CSS实现带有三角小箭头的矩形效果

先做一个图片显示的颜色的矩形,CSS实现带有三角小箭头的矩形效果

鼠标放上去1

<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="width: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>

CSS实现带有三角小箭头的矩形效果,css三角箭头矩形

CSS实现带有三角小箭头的矩形效果:
现在比较流行带有小箭头的矩形效果,比如鼠标放上去弹出的提示效果,还有微信类似的对话内容等,从视觉上较为美观,也比较人性化,如果是CSS3的话比较容易实现,但是当前还存在着很大的浏览器兼容性,下面介绍一种能够兼容所有的浏览器的代码。
代码如下:

 

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
.w 
{
  width:200px;
  position:absolute;
  background:#999;
  left:400px;
  top:200px;
  font-size:12px;
  text-align:left
}
.x 
{
  width:180px;
  position:relative;
  background:#ff9;
  border:1px solid #F96;
  padding:10px;
  left:-4px;
  top:-4px;
}
.y, .z 
{
  position:absolute;
  left:130px;
}
.y 
{
  color:#ff9;
  top:-6px;
}
.z 
{
  color:#f96;
  top:-7px;
}
</style>
</head>
<body>
<div class="w">
  <div class="x">
    <p>蚂蚁部落欢迎您</p>
    <div class="z">&#9670</div>
    <div class="y">&#9670</div>
  </div>
</div>
</body>
</html>

 

原文地址是:

更多内容可以参阅:

 

CSS实现带有三角小箭头的矩形效果:
现在比较流行带有小箭头的矩形效果,比如鼠标放...

图片 1

复制代码 代码如下:

方法1:布置2个大小一样的div,都旋转45度,前面一个背景颜色设置为目标颜色,后面一个背景颜色设为white,向左移动后面一个把前一个覆盖住,达到目标效果。

图片 2

提示2效果

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

从这两个报错就能发现是单词拼写错误
CHAT_TO_INT换成CHAR_TO_INT就好了
而且这两个单词相同时,将鼠标焦点放上去ide会将其变色,如下图所示。以后注意就不会发现不了这个问题了。

提示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);

运行结果是这样的

鼠标放上去2

<div style="width:100px; height:100px; margin-left:100px; border-bottom:8px solid #00F; border-left:8px solid #00F; -webkit-transform:rotate(45deg)"></div>

图片 3

   图片 4

ide变色提示.png

要求:鼠标放上的过程中文字位置不移动。

错误结果.png

二、布局下列图片效果

错误代码.png

方法2:布置1个div,背景色为white,设置下边框和左边框都为8px solid
#00F(目标颜色),最后再旋转45度。

女票发过来的代码,让我给查查错
pc打开之后效果是这样的

转载本站文章请注明出处:vns威尼斯城官网登入 http://www.tiec-ccpittj.com/?p=4299

上一篇:

下一篇:

相关文章