CSS：手机页面，常用字号和布局（工作中用）

 

{literal}  

{/literal}

 

公用css

.cOrange,.cOrange:visited,.cOrange > a {color: #ff7200;}
.border1-top{border-top:1px solid #ececec;}
.border1-right{border-right:1px solid #ececec;}
.border1-bottom{border-bottom:1px solid #ececec;}
.border1-left{border-left:1px solid #ececec;}
.border0-top{border-top:none;}

.pd2{padding:2%;}.pd2-top{padding-top:2%;}.pd2-right{padding-right:2%;}.pd2-bottom{padding-bottom:2%;}.pd2-left{padding-left:2%;}
.pd4{padding:4%;}.pd4-top{padding-top:4%;}.pd4-right{padding-right:4%;}.pd4-bottom{padding-bottom:4%;}.pd4-left{padding-left:4%;}

.box-m2{margin-left:2%;margin-right:2%;}    .vbox-m2{margin-top:2%;margin-bottom:2%;}/* 布局间距 */
.box-m4{margin-left:2%;margin-right:4%;}    .vbox-m4{margin-top:4%;margin-bottom:4%;}

.box-pd2{padding-left:2%;padding-right:2%;}    .vbox-pd2{padding-top:2%;padding-bottom:2%;}
.box-pd3{padding-left:3%;padding-right:3%;}    .vbox-pd3{padding-top:3%;padding-bottom:3%;}
.box-pd4{padding-left:4%;padding-right:4%;}    .vbox-pd4{padding-top:4%;padding-bottom:4%;}

.lh100{line-height:1;}.lh110{line-height:1.1;}.lh120{line-height:1.2;}.lh130{line-height:1.3;}.lh140{line-height:1.4;}
.lh150{line-height:1.5;}.lh160{line-height:1.6;}.lh170{line-height:1.7;}.lh180{line-height:1.8;}.lh190{line-height:1.9;}.lh200{line-height:2;}/*行高*/

.com-hr{background:#f2f2f2;width:100%;height:10px;border-top:1px solid #e9e9e9;}
.img100{width:100%;}
.v-middle{vertical-align:middle;}
.linear80{background: linear-gradient(0deg,rgba(0,0,0,.33),rgba(255,255,255,.0));}/*上下渐变（手机图片的渐变蒙板，高度80px）*/

 

 

字体图标：

<i class="iconfont icone61b"></i>
<i class="iconfont icone60d"></i>
{literal}
<style type="text/css">
.icone60d:before{content:'\e60d';}
.icone61b:before{content:'\e61b';}
</style>
{/literal}

 

 

 

普通的正文详情页：（参考页：m站/news/190946.html）2015-12-28

<h1 class="cMdGray f20">详情页大标题</h1>
<p class="cFGray f12">作者、时间，颜色#ababab</p>
<div class="cMdGray f18">正文内容</div>

 

小标题（左侧是橙色小方块）：

<style>
.border1-bottom{border-bottom:1px solid #ececec;}
.title-box{padding:14px 0 10px 0;background:#fff;}/*标题盒子（左侧橙色条）*/
.title-name{border-left:3px solid #ff7200;padding-left:4%;font-size:1.6rem;color:#666;font-weight:normal;}
</style>
<div class="title-box border1-bottom"><div class="title-name">XXXX效果图</div></div>

 

两列图片：

1、所有间距都是4%（废弃）

<style>
.xgt-box{padding:4% 0;}
.xgt-box .img-box{display:block;float:left;width:44%;margin-left:4%;margin-bottom:4%;}
.xgt-box .img-box > img{width:100%;box-sizing:border-box;border:1px solid #ececec;}
</style>
<div class="xgt-box clearfix">
    <a class="img-box" href="#"><img src="images/_housetype1.png"><p class="p1">蓝色阳光海风</p></a>
    <a class="img-box" href="#"><img src="images/_housetype2.png"><p class="p1">优雅华尔兹</p></a>
    <a class="img-box" href="#"><img src="images/_housetype1.png"><p class="p1">蓝色阳光海风</p></a>
    <a class="img-box" href="#"><img src="images/_housetype2.png"><p class="p1">优雅华尔兹</p></a>
</div>

 2、左边距4%、右边距4%，中间间距2%的：（正在使用）

<style>
.clearfix:after{content:'';display:block;height:0;overflow:hidden;clear:both;}
.img100{width:100%;}

.xgt-box2{padding:4% 2% 0 4%;}
.xgt-box2 .img-box{display:block;float:left;width:47.8723%;margin-right:2.1277%;margin-bottom:4%;}/*外部容器左边4% 右边2%。里面的小方块都是向右撑出2%间距*/
</style>
<div class="xgt-box2 clearfix">
    <a class="img-box" href="#"><img src="images/_housetype1.png" class="img100-border1"><p class="p1">蓝色阳光海风</p></a>
    <a class="img-box" href="#"><img src="images/_housetype2.png" class="img100-border1"><p class="p1">优雅华尔兹</p></a>
    <a class="img-box" href="#"><img src="images/_housetype1.png" class="img100-border1"><p class="p1">蓝色阳光海风</p></a>
    <a class="img-box" href="#"><img src="images/_housetype2.png" class="img100-border1"><p class="p1">优雅华尔兹</p></a>
</div>

 

3、左边距2%、右边距2%，中间间距2%的： （不明白。 有些页面设计图是如此）

<style>
html,body{max-width:720px;margin:0;padding:0;}
.clearfix:after{content:'';display:block;height:0;overflow:hidden;clear:both;}
.img100{width:100%;}
.img100-border1{width:100%;border:1px solid #ececec;box-sizing:border-box;}

.xgt-box3{padding:2% 0 2% 0;}
.xgt-box3 .img-box{display:block;float:left;width:47%;margin-left:2%;margin-bottom:2%;}
</style>
<div class="xgt-box2 clearfix">
    <a class="img-box" href="#"><img src="images/_index3.png" class="img100-border1"><p class="p1">蓝色阳光海风</p></a>
    <a class="img-box" href="#"><img src="images/_index3.png" class="img100-border1"><p class="p1">优雅华尔兹</p></a>
    <a class="img-box" href="#"><img src="images/_index3.png" class="img100-border1"><p class="p1">蓝色阳光海风</p></a>
    <a class="img-box" href="#"><img src="images/_index3.png" class="img100-border1"><p class="p1">优雅华尔兹</p></a>
</div>

 

 

三列图片：

1、所有间距都是4%（废弃）

<style>
.xgt-box{padding:4% 0;}
.xgt-box .img-box{display:block;float:left;width:28%;margin-left:4%;margin-bottom:4%;}
.xgt-box .img-box > img{width:100%;box-sizing:border-box;border:1px solid #ececec;}
</style>
<div class="xgt-box clearfix">
    <a class="img-box" href="#"><img src="images/_housetype1.png"><p class="p1">蓝色阳光海风</p></a>
    <a class="img-box" href="#"><img src="images/_housetype2.png"><p class="p1">优雅华尔兹</p></a>
    <a class="img-box" href="#"><img src="images/_housetype1.png"><p class="p1">蓝色阳光海风</p></a>
</div>

  2、左边距4%、右边距4%，中间间距2%的： （正在使用）

<style>
.clearfix:after{content:'';display:block;height:0;overflow:hidden;clear:both;}
.img100{width:100%;}
.img100-border1{width:100%;box-sizing:border-box;border:1px solid #ececec;}
.xgt-box3{padding:4% 2% 2% 4%;}
.xgt-box3 .img-box{float:left;margin-right:2.12766%;width:31.20567%;}
</style>
<div class="xgt-box3 clearfix">
    <a href="" class="img-box"><img src="images/_d1.png" class="img100"><p class="cDGray lh200">神秘侦探</p></a>
    <a href="" class="img-box"><img src="images/_d2.png" class="img100"><p class="cDGray lh200">神秘侦探</p></a>
    <a href="" class="img-box"><img src="images/_d3.png" class="img100"><p class="cDGray lh200">神秘侦探</p></a>
</div>

 

页面首屏的（橙色）搜索框：

<style>
.xgt-search-box{width:100%;padding:2% 4%;box-sizing:border-box;border-top:1px solid #ececec;border-bottom:1px solid #ececec;}
.xgt-search-box .input36{float:left;height:36px;width:75%;box-sizing:border-box;border:1px solid #ff7200;border-radius: 0;-webkit-border-radius: 0;}
.xgt-search-box .button36{float:right;height:36px;width:25%;box-sizing:border-box;border:1px solid #ff7200;border-radius: 0;-webkit-border-radius: 0;border-top-right-radius:4px;border-bottom-right-radius:4px;-webkit-border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;background:#ff7200;color:#fff;padding:0;line-height:34px;}
</style>
<!-- search start -->
<form id="search_keyword" method="get" action="">
<div class="xgt-search-box clearfix">
    <input type="text" name="keyword" class="input36">
    <input id="submit_keyword" type="button" value="搜索图片" class="button36">
</div>
</form>
<!-- search end -->

 

几个标签切换（含js）：（被点击的标签，下面有橙色下划线）

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $(".com-labelchange-btn").click(function(){
        var idx=$(this).index();
        $(this).addClass("active");
        $(this).siblings().removeClass("active");
        var _list = $(this).parents(".com-labelchange-container").find(".com-labelchange-item");
        _list.eq(idx).show().siblings().hide();
    });
});
</script>
<style type="text/css">
html,body,p,ul,li{margin:0;padding:0;}
ul,li{list-style:none;}
.clearfix:after{content:'';display:block;height:0;overflow:hidden;clear:both;}

/*标签切换（js会调用）*/
/*.com-labelchange-container{}*/
.com-labelchange-btngroup{text-align:center;}
.com-labelchange-btn{position:relative;float:left;font-size:1.6rem;color:#999;}
.com-labelchange-btngroup .txt{position:relative;display:inline-block;bottom:0;height:40px;line-height:40px;border-bottom:2px solid #fff;border-top:4px solid #fff;}
.com-labelchange-btngroup .active{color:#ff7200;}
.com-labelchange-btngroup .active .txt{border-bottom:2px solid #ff7200;padding-left:0.2em;padding-right:0.2em;}
.com-labelchange-list{position:relative;}
.com-labelchange-item{position:relative;display:none;}
.com-labelchange-item:first-child{display:block;}
.com-labelchange-container .width25{width:25%;}
.com-labelchange-container .width33{width:33%;}
.com-labelchange-container .width50{width:50%;}

/* 私有定制 */
.fc-link-item > a{display:block;height:36px;line-height:36px;color:#3366ff;border-top:1px solid #ececec;text-decoration:none;}
</style>

<!-- 标签切换 start -->
<div class="com-labelchange-container">
<ul class="com-labelchange-btngroup border1-bottom clearfix">
    <li class="com-labelchange-btn width33 active"><span class="txt">热门城市</span></li>
    <li class="com-labelchange-btn width33"><span class="txt">全国</span></li>
    <li class="com-labelchange-btn width33"><span class="txt">北京</span></li>
</ul>
<ul class="com-labelchange-list fc-link-list">
    <li class="com-labelchange-item fc-link-item">
        <a href="">图库11111</a><a href="">图库11111</a>
    </li>
    <li class="com-labelchange-item fc-link-item">
        <a href="">图库2222</a><a href="">图库2222</a>
    </li>
    <li class="com-labelchange-item fc-link-item">
        <a href="">图库3333</a><a href="">图库3333</a>
    </li>
</ul>
</div>
<!-- 标签切换 end -->

 

文本框，未填写内容时，显示默认提示文字（仅限H5高级浏览器）：  　　placeholder　　属性提供可描述输入字段预期值的提示信息。 该提示会在输入字段为空时显示,并会在字段获得焦点时消失

<input type="text" name="" placeholder="请输入手机号码" />

 

文本框，未填写内容时，显示默认提示文字（兼容所有） ：

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $(".input").blur(function(){
        var _defalut = $(this)[0].defaultValue;
        var _value = $(this).val();
        if(_defalut == _value || _value ==""){
            $(this).val(_defalut);
            $(this).removeClass("cGray");
        }else{
            $(this).addClass("cGray");
        }
    });
    $(".input").focus(function(){
        var _defalut = $(this)[0].defaultValue;
        if( _defalut == $(this).val() ){    $(this).val(""); }
    });
});
</script>
<style type="text/css">
html{font-size:62.5%;}
div,span,a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);outline:none;}
.cGray {color: #666!important;}
.input{width:12em;border:0;padding:1em 1em 1em 3em;font-size:1.4rem;line-height:1;border:1px solid #ececec;color:#ddd;}
</style>
<input type="text" name="" class="input" value="请输入手机号码">

 

 用CSS做小三角箭头：　　2016-1-7

<style type="text/css">
body{background:#999;}
body,p{margin:0;padding:0;}
.box{position:absolute;left:100px;top:100px;width:229px;height:220px;background:#f2f2f2;border:5px solid #fff;text-align:center;}
.a2{position:absolute;left:-20px;top:50%;margin-top:-10px;width:0;height:0;border-right:20px solid #fff;border-top:20px solid rgba(0,0,0,0);border-bottom:20px solid rgba(0,0,0,0);z-index:1;}
.box .txt{display:inline-block;margin:10px auto;line-height:1;text-decoration:none;}
.box .arrow{float:right;display:inline-block;width:0;height:0;margin-left:3px;border-left:0.5rem solid #ff4200;border-top:0.6rem solid rgba(0,0,0,0);border-bottom:0.6rem solid rgba(0,0,0,0);}
</style>
<div class="box">
    <div class="a2"></div>
    <a class="txt" href="##">这里是用css做个小三角<i class="arrow"></i></a>
</div>

 

 

 

 

 

 

 

 

限制两行文字：　（移动端用）　2016-1-20

<style>
/*
-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
*/
.limit-line2{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
</style>
<p class="limit-line2">限制两行文字。这个属性比较合适WebKit浏览器或移动端（绝大部分是WebKit内核的）浏览器。 </p>

 

限制两行文字（跨浏览器兼容方案）：　　（这个我不想用）　　2016-1-20

<style type="text/css">
p{width:300px;background:#f0f0f0;}
p {position:relative;line-height:1.4em;height:4.2em;overflow:hidden;}
p:after {content:"…";font-weight:bold;position:absolute;bottom:0;right:0;padding:0 20px 1px 45px;
    background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;}
</style>
<p>跨浏览器兼容的方案：比较靠谱简单的做法就是设置相对定位的容器高度，用包含省略号(…)的元素模拟实现；</p>

 

 

 

 

 

 ...

 

 

...