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:;}.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:;}/*行高*/

.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="data:images/_housetype1.png"><p class="p1">蓝色阳光海风</p></a>

    <a class="img-box" href="#"><img src="data:images/_housetype2.png"><p class="p1">优雅华尔兹</p></a>

    <a class="img-box" href="#"><img src="data:images/_housetype1.png"><p class="p1">蓝色阳光海风</p></a>

    <a class="img-box" href="#"><img src="data: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="data:images/_housetype1.png" class="img100-border1"><p class="p1">蓝色阳光海风</p></a>

    <a class="img-box" href="#"><img src="data:images/_housetype2.png" class="img100-border1"><p class="p1">优雅华尔兹</p></a>

    <a class="img-box" href="#"><img src="data:images/_housetype1.png" class="img100-border1"><p class="p1">蓝色阳光海风</p></a>

    <a class="img-box" href="#"><img src="data: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="data:images/_index3.png" class="img100-border1"><p class="p1">蓝色阳光海风</p></a>

    <a class="img-box" href="#"><img src="data:images/_index3.png" class="img100-border1"><p class="p1">优雅华尔兹</p></a>

    <a class="img-box" href="#"><img src="data:images/_index3.png" class="img100-border1"><p class="p1">蓝色阳光海风</p></a>

    <a class="img-box" href="#"><img src="data: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="data:images/_housetype1.png"><p class="p1">蓝色阳光海风</p></a>

    <a class="img-box" href="#"><img src="data:images/_housetype2.png"><p class="p1">优雅华尔兹</p></a>

    <a class="img-box" href="#"><img src="data: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="data:images/_d1.png" class="img100"><p class="cDGray lh200">神秘侦探</p></a>

    <a href="" class="img-box"><img src="data:images/_d2.png" class="img100"><p class="cDGray lh200">神秘侦探</p></a>

    <a href="" class="img-box"><img src="data:images/_d3.png" class="img100"><p class="cDGray lh200">神秘侦探</p></a>

</div>

两列图片、3列图片。——已改成公用文件： 2016-6-15

<style>

/* 图片列表 */

/* 图片列表(2列) 左边4% 右边2%。里面的小方块都是向右撑出2%间距 (要求图片必须统一宽高) */

.com-album-col2-box{padding:4% 2% 0 4%;}

.com-album-col2-box .img-box{display:block;float:left;width:47.8723%;margin-right:2.1277%;}

.com-album-col2-box .p1{line-height:3em;padding-left:1em;padding-right:1em;text-align:left;}

/* 图片列表(3列) 左边4% 右边2%。里面的小方块都是向右撑出2%间距 (要求图片必须统一宽高) */

.com-album-col3-box{padding:4% 2% 0 4%;}

.com-album-col3-box .img-box{display:block;float:left;width:31.20567%;margin-right:2.12766%;}

.com-album-col3-box .p1{line-height:3em;padding-left:1em;padding-right:1em;text-align:left;}

</style>

<!-- 图片列表（2列） start -->

<div class="com-album-col3-box clearfix">

    <a class="img-box" href="#"><img src="data:images/_zimg.jpg" class="img100"><p class="p1 etc">立体石材机价格贵不贵</p></a>

    <a class="img-box" href="#"><img src="data:images/_zimg.jpg" class="img100"><p class="p1 etc">立体石材机价格贵不贵</p></a>

    <a class="img-box" href="#"><img src="data:images/_zimg.jpg" class="img100"><p class="p1 etc">立体石材机价格贵不贵</p></a>

</div>

<!-- 图片列表（2列） end -->

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

<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>

...