首页 > 代码库 > CSS练习我的设置页面

CSS练习我的设置页面

2024-09-30 07:39:01   217人阅读

<!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="http://www.mamicode.com/保存"> -->
            <!-- <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=http://www.mamicode.com/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=http://www.mamicode.com/false;
    //         }
    //     }
    // }
    var sig=document.getElementById(‘signature‘);
    // sig.addEventListener(‘keydown‘,function(e){
    //     if(this.value.length>=20){
    //         if(event.keyCode==8){

    //         }else{
    //             event.returnValue=http://www.mamicode.com/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外部显示。

CSS练习我的设置页面


联系
我们