html/css/js/jq能实现的一些效果（二）

本期实现以下6种效果：

• 实现对话框
• 移到图片上，图片变淡，下方形容图片的文字弹出
• 两列自适应
• 实现验证码表单
• 实现钱币和花形状
• 实现一条弧线

1.实现对话框

HTML代码
注意应该写<div><div></div></div>，而不是<div></div><div></div>。这样在设相对绝对关系的时候，会相对定位到<div id="rectangle">，而本该定位到第一个空的<div></div>。

 <!--接下来构造对话框-->
<div id="rectangle">
    <p>我像只虞儿在你的荷棠<br/>只为和你守候那皎白月光</p>
    <div><div></div></div>

CSS代码
注意：子元素选择器#rectangle p:first-child、 #rectangle div:nth-child(2)的用法，表示父元素下第几个元素。
如果用 #rectangle div:first-of-type，指的是所有兄弟div元素中第一个div元素。因为是从右到左解析，那么会定位到<div><div></div></div>，两个div里面的元素都会定位到，而即使后面重新定义了 #rectangle div div{}，运行出来不知道为什么还是没覆盖，所以不太可取。

	#page-left{
        position:relative;
    }
    #rectangle{
        /*设置多行文字的垂直居中*/
        display:table-cell;
        vertical-align: middle;
        /*设置父相对子绝对*/
        position:absolute;
        top:10%;
        left:50%;
        margin-left:-100px;
        width:200px;
        height:80px;
        font:"微软雅黑" 14px yellow;
        background-color: purple;
        border:1px solid yellow;
        border-radius:5px;
        text-align:center;
    }
    #rectangle p:first-child{
        color:yellow;
        display:inline-block;
        vertical-align: middle;
    }
    #rectangle div:nth-child(2){
        position:absolute;
        top:80px;
        left:50%;
        margin-left:-30px;
        width:0;
        height:0;
        border-width:30px;
        border-style: solid;
        border-color:yellow transparent transparent transparent;}

    #rectangle div div{
        position:absolute;
        top:-30px;
        left:-29px;
        width:0;
        height:0;
        border-width:29px;
        border-style: solid;
        border-color:purple transparent transparent transparent;
    }
    

效果：