<!DOCTYPE html>
<html>
<head>
<title>我的设置</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/mySet.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<div class="wrapper">
<div class="header">
<a href=""><img src="images/return.png"></a>
我的设置
</div>
<div class="space"></div>
<div class="detail">
<form>
<ul>
<li>头像<span><img src="images/pic.jpg" id="headpic"/></span></li>
<li>昵称<span>啦啦啦</span></li>
<div class="space"></div>
<li>生日<span>2012-02-23</span></li>
<li>性别<span>男</span></li>
<li>身高<span>180CM</span></li>
<div class="space"></div>
<li>体重<span>60KG</span></li>
<li>运动爱好<span>篮球</span></li>
<li onclick="show_signatureEditor();">签名<span id="sig">君不见黄河之水天上来</span></li>
</ul>
</form>
</div>
<!-- <div id="bottom">
<button>保存修改</button>
</div> -->
</div>
<!-- 编辑签名 -->
<div class="wrapper" id="signature_wrap">
<div class="header">
<a href="javascript:cancel(‘signature_wrap‘);"><img src="images/return.png"></a>
个性签名
<!-- <input type="button" name="" class="save" value="保存"> -->
<!-- <button class="save">保存</button> -->
</div>
<div class="ebox">
<!-- <input type="text" name=""> -->
<textarea id="signature" onpaste="ps()" placeholder="请输入个性签名"></textarea>
<span class="sigCount">30</span>
</div>
<div id="bottom">
<button onclick="save_signature();">保存修改</button>
</div>
</div>
</body>
<script type="text/javascript">
function show_signatureEditor(){
var h=$(document.body).height();
$("#signature").val(‘‘);
$("#signature_wrap").css({‘height‘:h+‘px‘,‘display‘:‘block‘});
}
function cancel(id){
$("#"+id).css({‘display‘:‘none‘});
}
// document.getElementById(‘signature‘).onpaste=function(){
// if(this.value.length>20){
// this.value=this.value.substr(0,20);
// }
// }
function ps(){
event.returnValue=false;
}
// 借助输入法输入中文无效
// document.getElementById(‘signature‘).onkeydown=function(){
// if(this.value.length>=20){
// if(event.keyCode==8){
// }else{
// event.returnValue=false;
// }
// }
// }
var sig=document.getElementById(‘signature‘);
// sig.addEventListener(‘keydown‘,function(e){
// if(this.value.length>=20){
// if(event.keyCode==8){
// }else{
// event.returnValue=false;
// }
// }
// });
function save_signature(){
$("#sig").html(sig.value);
$("#signature_wrap").css({‘display‘:‘none‘});
}
$(function(){
/*字数限制*/
$("#signature").on("input propertychange", function() {
var $this = $(this),
_val = $this.val(),
count = "";
if (_val.length > 30) {
$this.val(_val.substring(0, 30));
}
count = 30 - $this.val().length;
$(".sigCount").html(count);
});
});
</script>
</html>
CSS
/* 覆盖 user agent stylesheet */
body {
margin: 0;
}
/* 去掉ul li 前面圆点 */
/*ul {padding: 0;}*/
ul {
/*去掉圆点*/
list-style: none;
/*去掉内边距*/
padding: 0;
margin-top: 0;
}
.wrapper {
display: block;
background-color: #fff;
width:100%;
max-width: 640px;
width:expression_r(document.body.clientWidth > 640 ? "640px": "auto" );
font-family:‘微软雅黑‘;
color: #6c6c6c;
}
.header {
background: #555;
height: 50px;
padding: 0 10px;
border-bottom: #c6c6c6 solid 1px;
text-align: center;
line-height: 45px;
vertical-align: middle;
color: #fff;
}
.header a {
float: left;
display: inline-block;
line-height: 50px;
}
.header a img{
vertical-align: middle;
}
.detail li{
padding: 0 10px;
height: 45px;
line-height: 45px;
border-bottom: #c6c6c6 solid 1px;
color: #333;
display: list-item;
text-align: -webkit-match-parent;
vertical-align: middle;
}
.detail li span {
float: right;
line-height: 45px;
}
.detail li img#headpic {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
vertical-align: middle;
}
.space {
width: 100%;
height: 15px;
background: #f5f5f5;
}
#bottom {
margin-top: 20px;
text-align: center;
}
#bottom button {
display: inline-block;
width: 50%;
height: 50px;
background-color: #fac240;
border: #f5f5f5 1px solid;
border-radius: 5px;
color: #fff;
outline: none;
}
#signature_wrap {
position: absolute;
top: 0;
left: 0;
display: none;
}
#signature_wrap input[type="button"] {
height: 30px;
width: 8%;
background: #fac240;
line-height: 50px;
display: inline-block;
vertical-align: middle;
border: 0px;
border-radius: 4px;
}
.ebox {
margin: 50px 10px 0px 10px;
border-bottom: #fac240 solid 1px;
}
.ebox textarea {
width: 100%;
height: 100px;
border:none;
outline: none;
margin-bottom: 0px;
font-family: "微软雅黑"
font-size: 26px;
text-decoration: none;
}
.ebox span {
float: right;
}
头部标题中如果在左边或右边添加按钮，会影响文字居中，如何使文字固定在中间，不受其他部分影响？
<span>30</span>为什么会在包裹它的div外部显示。
时间： 2024-08-13 21:59:28