{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>
两列图片、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="images/_zimg.jpg" class="img100"><p class="p1 etc">立体石材机价格贵不贵</p></a> <a class="img-box" href="#"><img src="images/_zimg.jpg" class="img100"><p class="p1 etc">立体石材机价格贵不贵</p></a> <a class="img-box" href="#"><img src="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>
...
...
