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