style.html 4.1 KB
<html>
<head>
    <meta charset="utf-8">
    <title></title>
        <style>
        * {
              margin: 5,0,5,5;
              padding: 0;
              list-style: none;
              font-family: '微软雅黑'
          }
        ::-webkit-scrollbar-button{/*...*/}
        ::-webkit-scrollbar-track-piece{/*...*/}
        ::-webkit-scrollbar-corner{/*...*/}
        ::-webkit-resizer{/*...*/}
        ::-webkit-scrollbar {
            width: 12px;
        }
        ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
            border-radius: 7px;
        }
        ::-webkit-scrollbar-thumb {
            border-radius: 7px;
            background:rgba(0,0,0,0.2);
        }

        .triangle-left{float:left;max-width:100px;border:1px solid #b6b6b7; border-radius:10px;padding:10px;background:#e1e3e6;margin:20px 0px 0px 10px; position:relative; display:inline-block;/*box-shadow:0 4px 8px #888888;*/word-wrap: break-word;}
        .triangle-left:before{position:absolute; content:"";display:block;}
        .triangle-left.left:before{border-color:rgba(0, 0, 0, 0) #B6B6B7 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);border-width:6px 19px 10px 40px;border-style:solid;bottom:auto;left:-50px;top:8px;}
        .triangle-left:after{position:absolute; content:"";display:block;}
        .triangle-left.left:after{border-color:rgba(0, 0, 0, 0) #e1e3e6 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);border-width:6px 19px 10px 40px;border-style:solid;bottom:auto;left:-50px;top:8px;}

        .triangle-right{float:right;max-width:100px;border:1px solid #b6b6b7;border-radius:10px;padding:10px;background:#9feb6a;position:relative;display:inline-block;/*padding-top:20px;*/margin:20px 10px 0px 0;/*box-shadow:0 4px 8px #888888;*/word-wrap: break-word;}
        .triangle-right:before{position:absolute; content:"";display:block;}
        .triangle-right.right:before{border-color:rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #B6B6B7;border-width:6px 40px 10px 19px;border-style:solid;bottom:auto;right:-50px;top:8px;}
        .triangle-right:after{position:absolute; content:"";display:block;}
        .triangle-right.right:after{border-color:rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #9feb6a;border-width:6px 40px 10px 19px;border-style:solid;bottom:auto;right:-50px;top:8px;}

        .sendType{float: right;padding:25px;color:rgb(0, 120, 0);}
        .triangle-time{text-align:center;color:#999;font-size:12px; font-family:'微软雅黑';clear:both;margin:5px 0;}
        </style>
    <script type="text/JavaScript">

                function clickimg(opg){
                        if(opg.width == opg.attributes['default_width'].value && opg.height == opg.attributes['default_height'].value){
                                opg.width *=1;
                                opg.height *= 1;
                        }else{
                                opg.width = opg.attributes['default_width'].value ;
                                opg.height = opg.attributes['default_height'].value;
                        }
        };
                function addFile()
                {
                                var str = '<INPUT type="file" size="50" NAME="File">'
                                document.getElementById("MyFile").insertAdjacentHTML("beforeEnd", str)
                                alert("hello word!")
                }
                function getAll(){
                                content = document.body.innerHTML
                }
                function append(){
                                var obj = document.getElementById("content");
                                obj.insertAdjacentHTML("beforeEnd","<div style='overflow:hidden;'><p class='triangle-right right'>nice</p></div>");

                                var de=document.documentElement;
                                de&&(de.scrollTop=de.scrollHeight);
                                        obj.scrollTop = obj.scrollHeight;
                }
                function clear(){
                                document.body.innerHTML=''
                }
    </script>
</head>
<body>
        <body id="content" style='font-size: 12px;'>
</body>
</html>