コード:PC CSS(作業中用)

11115 ワード


ページングコード:
.l{float:left;}
.dib{display:inline-block;}
.vm{vertical-align:middle;}

.page-box{margin-top:44px;text-align:center;}
.page-box .pbtn{display:inline-block;vertical-align:middle;width:40px;height:40px;line-height:40px;font-size:12px;color:#999;border:1px solid #ececec;box-sizing:border-box;text-align:center;margin-left:-1px;}
.page-box .pbtn:hover,.page-box .pbtn.active{background:#ea5404;color:#fff;border:1px solid #ea5404;}
.page-box .mr8{margin-right:8px;}
</style>
<div class="page-box">
    <a href="" class="pbtn mr8">&lt;</a>
    <div class="dib vm mr8">
        <a href="" class="pbtn l active">1</a>
        <a href="" class="pbtn l">2</a>
        <a href="" class="pbtn l">3</a>
        <a href="" class="pbtn l">4</a>
        <a href="" class="pbtn l">5</a>
        <a href="" class="pbtn l">6</a>
        <a href="" class="pbtn l">7</a>
        <a href="" class="pbtn l">8</a>
        <a href="" class="pbtn l">9</a>
        <a href="" class="pbtn l">10</a>
    </div>
    <a href="" class="pbtn mr8">&gt;</a>
    <a href="" class="pbtn mr8">&gt;&gt;</a>
</div>

テキストボックスデフォルトプロンプトテキスト(placeholderの代わりにすべて互換性のある方法:)2016-2-2
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var askDesign = {
        focusBlur: function(ele) {
            function trimCode(s) {
                s = $.trim(s);
                s = s.replace(/ /g, '');
                s = s.replace(/\t/g, '');
                s = s.replace(/\r/g, '');
                s = s.replace(/
/g, ''); return s; } console.log(ele.length); for(var i=0;i<ele.length;i++){ var _e = $(ele[i]); // , 、 , data-value 。 var _val = trimCode(_e.val()); if (_val == '') { _e.val(_e.attr('data-value')).addClass("gray");// } _e.focus(function() { var _val = $.trim($(this).val()); if ($(this).attr('data-value') == _val) { $(this).val('').removeClass("gray"); } }).blur(function() { var _val = $.trim($(this).val()); var _attrVal = $(this).attr('data-value'); if (_val == '') { $(this).val(_attrVal).addClass("gray"); } }); } }, log: function() { } }; askDesign.focusBlur($('.input'));//input askDesign.focusBlur($('.textarea'));//textarea }); </script> <style type="text/css"> input,textarea{outline: none;} .gray{color:#aaa!important;} .com-form .input{padding:0.8em 1em 0.6em 1em;border-radius:2px;background:#fafafa;color:#333;border:1px solid #ececec;} .com-form .textarea{padding:1rem 1em;line-height:1.666;border-radius:2px;background:#fafafa;color:#333;border:1px solid #ececec;} .com-form .input::-webkit-input-placeholder,.com-form .textarea::-webkit-input-placeholder{color:#aaa;} .com-form .input:focus,.com-form .textarea:focus{border:1px solid #ff7200;} </style> <form method="post" action="" class="com-form"> <input type="text" name="" class="input" data-value=" "><br> <input type="text" name="" placeholder=" " /><br> <textarea name="" rows="12" cols="50" class="textarea" data-value=" "></textarea><br> <textarea name="" rows="12" cols="50" placeholder=" "></textarea><br> </form>

 
 
 
,,,,
 
 
 
 
 
...