代码：PC CSS（工作中用）

2022-11-09 18:59:51

常规内容区域的：标题和文字　　2016-5-23

.p16{font-size:16px;color:#333;}/* 16号#333的标题 */

.p12-gray{font-size:16px;color:#333;line-height:22px;}/* 12号#999的内容 */

这种可以设置链接颜色：

.p16{font-size:16px;color:#333;}

.p16 > a{color:#333;}

.p16 > a:hover{color:#f83760;}

.p12{font-size:12px;color:#999;line-height:22px;}

再一种方式：（这种不指定字号了。<p class="p-a333 f16"><a href="##">aaaa</a></p> ）

.p-a333, .p-a333 > a{color:#333;}

.p-a333 > a:hover{color:#f83760;}

2016-6-8

.p-a333, .p-a333 > a{color:#333;}    .p-a333 > a:hover{color:#ff7200;}

.p-a666, .p-a666 > a{color:#666;}    .p-a666 > a:hover{color:#ff7200;}

https://www.renrenche.com/　　ABCDEFG～Z的下拉菜单参考。可以做成省市下拉菜单　　2016-4-18

分页代码：　　2016-2-24

<style>

.l{float:left;}

.dib{display:inline-block;}

.vm{vertical-align:middle;}

.page-box{margin-top:44px;margin-bottom:24px;text-align:center;overflow:auto;}

.page-box .pbtn{display:block;float:left;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 .ml8{margin-left:8px;}

.page-box .mr8{margin-left:0;margin-right:8px;}

</style>

<div class="page-box">

    <div class="dib tc">

        <a href="" class="pbtn mr8">&lt;</a>

        <a href="" class="pbtn active">1</a>

        <a href="" class="pbtn">2</a>

        <a href="" class="pbtn">3</a>

        <a href="" class="pbtn">4</a>

        <a href="" class="pbtn">5</a>

        <a href="" class="pbtn">6</a>

        <a href="" class="pbtn">7</a>

        <a href="" class="pbtn">8</a>

        <a href="" class="pbtn">9</a>

        <a href="" class="pbtn">10</a>

        <a href="" class="pbtn ml8">&gt;</a>

        <a href="" class="pbtn ml8">&gt;&gt;</a>

    </div>

</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(/\n/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>

图片列表，效果（鼠标浮上去时，显示带阴影外框）： 　　2016-2-3

这个方法很好，可以在里面只加一个额外元素即可，不会导致列表容器在页面中的重排问题

<style type="text/css">

ul,li{list-style:none;margin:0;padding:0;}

.xgt-body{margin-right:-22px;}

.xgt-body .iwrap{position:relative;float:left;width:280px;height:330px;margin-right:22px;}

.xgt-body .iwrap:hover .hvr{position:absolute;width:280px;height:330px;margin:-5px;box-shadow:0px 1px 5px #999;padding:4px;border:1px solid #ececec;z-index:0;}

.xgt-body .img{width:280px;height:280px;}

</style>

<ul class="xgt-body clearfix">

    <li class="iwrap">

        <div class="hvr"></div>

        <img src="data:images/_x_280x280.jpg" class="img">

    </li>

    <li class="iwrap">

        <div class="hvr"></div>

        <img src="data:images/_x_280x280.jpg" class="img">

    </li>

</ul>

标签切换： active或者鼠标移上去时，标签是橙色。移出后是正常状态。　　2016-2-14

<style>

.linggan-nav{margin-top:20px;background:#fafafa;border:1px solid #ececec;width:100%;height:48px;box-sizing:border-box;font-family:'Microsoft YaHei';}

.linggan-nav .li1{display:block;float:left;border-right:1px solid #ececec;margin:10px 0;}

.linggan-nav .li1.active, .linggan-nav .li1:hover{margin:0;padding:8px 0 10px 0;background:#fff;color:#ff7200;border-top:2px solid #ff7200;border-left:1px solid #ececec;margin-left:-1px;cursor:pointer;}

.linggan-nav .txt{padding:0 30px;line-height:28px;font-size:20px;}

</style>

<div class="linggan-nav">

<a class="li1" href="##"><span class="txt">推荐</span></a>

<a class="li1 active" href="##"><span class="txt">80后</span></a>

<a class="li1" href="##"><span class="txt">色彩控</span></a>

<a class="li1" href="##"><span class="txt">小清新</span></a>

<a class="li1" href="##"><span class="txt">创意家</span></a>

<a class="li1" href="##"><span class="txt">超炫搭</span></a>

</div>

,,,,

...

码农公寓

相关文章