{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. 网络编程三 Socket

    1.根据netstat端口的找到进程号---->根据进程号找到进程名称-------->终止进程 1) netstat    最后一列是5432 C:\Users\Administrato ...

  2. Python项目依赖并生成requirements.txt

    一起开发项目的时候总是要搭建环境和部署环境的,这个时候必须得有个python第三方包的list,一般都叫做requirements.txt. 如果一个项目使用时virtualenv环境,还好办 pip ...

  3. 钱管够，你能接这个项目吗？+ tomcat源码分析

    最近看了几个咕泡学院的公开课,课堂老师讲到下面这两个经历. 1:钱给够,你有没有能力接下这个全国性的项目 平时也会有怀才不遇的时候,但是当你遇到这个机会的时候,有没有信心去接下这个单子呢? 信心和能力 ...

  4. 【java高级编程】JDK和CGLIB动态代理区别

    转载:https://blog.csdn.net/yhl_jxy/article/details/80635012 前言 JDK动态代理实现原理(jdk8):https://blog.csdn.net ...

  5. Zabbix server的配置文件没有真正生效

    现状 Zabbix server端迁移之后,一直卡,卡的不行的卡,一直以为是网络的原因,实在忍受不下去了,还是得排查排查   在界面上一直显示这条,但是我的zabbix_server确实是启动的,但是 ...

  6. 快速简单搭建wordpress平台

      公司一直没有文档平台,于是想弄一个,弄过github平台的,但是都没用上,虽然这个搭建出来也没用上,还是花了时间才弄出来的,也许下次有用的时候,可以拿来就用   安装Wordpress的基础环境要 ...

  7. 前端基础：web语义化

    web语义化 一.什么是web语义化? web语义化包含两方面,一是html标签语义化,简单来说就是要用合适的标签来表述适当的内容,标题用<h1>~~<h6>标签,段落用< ...

  8. jpa的Join和Fetch

    join和join fetch是两回事,不要搞混! join取自SQL的join概念.被join的对象一般会出现在select,where等其他子句中.因为join的目的在于要对被join的对象做处理 ...

  9. 0.5px border 实现方案

    <div class='thin-border'></div> .thin-border { position: relative; width: 40px; height: ...

  10. Kettle解决方案: 第二章 Kettle基本概念

    2概述 设计模块最主要的操作分为: 转换和作业 选择转换和作业后就可以选择对应主对象树和核心对象 主对象树大同小异 核心对象是不同的 比如转换需要用到的CSV表输入, 表输入等都在这里可以选择 而作业 ...