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

...

...

CSS：手机页面，常用字号和布局（工作中用）的更多相关文章

  1. 手机页面rem布局

    手机页面设计一般的大小是640,但是,手机屏幕大小确实不确定的,这样,怎么才能做出适应所有手机的手机页面呢?一般的解决方案有两种,rem布局和百分比布局,更推荐用rem布局来制作手机页面. 首先,给页 ...

  2. html div+css做页面布局

    http://blog.csdn.net/mercop/article/details/7882000 HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒 ...

  3. 移动端页面开发适配 rem布局原理

    主题 HTML移动端页面开发适配 rem布局原理 什么是适配,为什么要适配 我们拿到的设计图一般是以640,750,1080分辨率为基准设计的,而现在的手机终端各式各样,分辨率不同,逻辑像素不同 ,适 ...

  4. 手机端页面自适应解决方案—rem布局进阶版

    手机端页面自适应解决方案—rem布局进阶版   https://www.jianshu.com/p/985d26b40199 注:本文转载之处:https://www.cnblogs.com/anni ...

  5. 这些HTML、CSS知识点，面试和平时开发都需要 No1-No4（知识点：HTML、CSS、盒子模型、内容布局）

    这些HTML.CSS知识点,面试和平时开发都需要 No1-No4   系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...

  6. 手机端页面自适应解决方案—rem布局（进阶版，附源码示例）

    转自:https://segmentfault.com/a/1190000007350680 一年前笔者写了一篇 <手机端页面自适应解决方案—rem布局>,意外受到很多朋友的关注和喜欢.但 ...

  7. HTML+CSS教程（四）选择器（id选择器，类选择器，标签选择器，子代选择器，后代选择器，组选择器，伪类选择器）/css引入页面的形式（行内样式、内嵌样式、外联样式）

    一.回顾内容 前端的三大组成(三大模块)    HTMl(超文本标记语言) 结构层    css(层叠样式表) 表现层:用来美化HTML结构    JS(Java script)(脚本语言) 行为层: ...

  8. CSS居中的常用方式以及优缺点

    前言 居中是页面开发中经常遇到的问题. 使用合适的.简单的.兼容性好的居中方式是我们页面仔在整个工作生涯中都要面对的问题. text-align:center 来看这个例子,一张图片和文字进行居中.如 ...

  9. CSS的class、id、css文件名的常用命名规则

    CSS的class.id.css文件名的常用命名规则        (一)常用的CSS命名规则 头:header       内容:content/container       尾:footer   ...

随机推荐

  1. c#上课总结

    private 是完全私有的,只有当前类中的成员能访问到. protected 是受保护的,只有当前类的成员与继承该类的类才能访问.   Ctrl+k+c  多行注释Ctrl+k+u 解除注释   e ...

  2. 第二章代替netcat连接无响应

    按照书上的代码手打到电脑上以后,在两个终端输入了./bhnet.py -l -p 9999 -c和./bhnet.py -t localhost -p 9999之后发现没什么反映,所以又用nmap 1 ...

  3. 作业二：构建swap函数

    一.swap代码 #include<stdio.h> int main() //主函数部分 { void swap(int *m,int *n); int a,b; int *p1,*p2 ...

  4. 哈希表（Hash Map）

    今天第一次做Leetcode用到了散列表,之前学的数据结构的内容都忘了,正好趁热打铁补一补. 摘自其他博客的一个整合. 一.哈希表简介 数据结构的物理存储结构只有两种:顺序存储结构和链式存储结构(像栈 ...

  5. [ZJOI2004]嗅探器

    题目概要: 在无向图中寻找出所有的满足下面条件的点:割掉这个点之后,能够使得一开始给定的两个点a和b不连通,割掉的点不能是a或者b.(ZJOI2004) 数据范围约定结点个数N≤100边数M≤N*(N ...

  6. 20164301 Exp3 免杀原理与实践

    Exp3 免杀原理与实践  1. 实践内容 1.1 正确使用msf编码器,msfvenom生成如jar之类的其他文件,veil-evasion,加壳工具,使用shellcode编程 1.2 通过组合应 ...

  7. 引擎设计跟踪(九.14.3.3) Deferred shading的一些小细节

    1.ambient light 之前的shader里面, 方向光会加上ambient 的计算. 但是如果没有方向光, 就没有ambient. 这是把全局方向光改为点光源之后发现的, 因为透明物体的fo ...

  8. 03机器学习实战之决策树CART算法

    CART生成 CART假设决策树是二叉树,内部结点特征的取值为“是”和“否”,左分支是取值为“是”的分支,右分支是取值为“否”的分支.这样的决策树等价于递归地二分每个特征,将输入空间即特征空间划分为有 ...

  9. 30天学会绘画 (Mark Kistler 著)

    第一课 球形 (已看) 第二课 重叠的球 (已看) 第三课 更多排列的球 (已看) 第四课 立方体 (已看) 第五课 空心立方体 (已看) 第六课 堆放的桌子 (已看) 第七课 堆放更多的立方体 (已 ...

  10. shell生成随机字符串

    #!/bin/bash i=1while [ $i -le 10000 ]doa=`echo `< /dev/urandom tr -dc A-Za-z0-9 | head -c6``echo  ...