html5 发短信 ios,HTML5 iOS 消息应用模拟

CSS

语言：

CSSSCSS

确定

html,

body {

height: 98%;

position: relative;

margin: 0;

}

body {

font-family: Helvetica, Arial, serif;

font-size: 16px;

padding: 1%;

}

.wrapper {

width: 612px;

height: 100%;

margin: 0 auto;

}

.phone-containter {

width: 340px;

height: 100%;

}

.phone {

height: 60%;

border: 1px solid #dcdcdc;

overflow-y: auto;

overflow-x: hidden;

}

.button {

background-color: none;

border: 1px solid #36a9fc;

text-decoration: none;

border-radius: 10px;

padding: 5px 10px;

color: #36a9fc;

display: block;

width: 80px;

text-align: center;

overflow: hidden;

text-oveflow: ellipsis;

margin: 20px auto;

}

.build-container {

width: 230px;

height: 100%;

margin-left: 20px;

float: right;

}

#buildInput {

width: 100%;

height: 60%;

/* Messages baloon */

}

.message {

margin: 10px 0;

overflow: hidden;

}

.message-text {

padding: 10px 20px;

float: right;

clear: both;

border-radius: 25px;

position: relative;

margin-bottom: 1px;

}

.message.left .message-text {

margin-right: 70px;

margin-left: 20px;

background-color: #e5e5ea;

float: left;

}

.message.right .message-text {

margin-left: 70px;

margin-right: 20px;

background-color: #36a9fc;

color: #fff;

float: right;

}

.message-text:last-child:before,

.message-text:last-child:after {

content: '';

position: absolute;

bottom: 0;

width: 35px;

height: 25px;

z-index: -1;

}

.message.right .message-text:before,

.message.right .message-text:after {

border-radius: 0 0 0 50%;

}

.message.right .message-text:before {

height: 20px;

right: -23px;

background-color: #36a9fc;

}

.message.right .message-text:after {

right: -35px;

bottom: -3px;

background-color: #fff;

}

.message.left .message-text:before,

.message.left .message-text:after {

border-radius: 0 0 50% 0;

}

.message.left .message-text:before {

height: 20px;

left: -23px;

background-color: #e5e5ea;

}

.message.left .message-text:after {

left: -35px;

bottom: -3px;

background-color: #fff;

}

.send-container {

background-color: #f6f6f6;

border: 1px solid #dcdcdc;

margin-top: -1px;

padding: 10px;

}

.send-input {

border-radius: 5px;

border: 1px solid #dbdbdb;

background-color: #fff;

padding: 5px 5px;

font-size: 1em;

width: 76%;

}

.send-btn {

text-decoration: none;

color: #939297;

font-weight: bold;

background-color: transparent;

border: none;

font-size: 1em;

cursor: pointer;

}