以时间轴为主的新呈现方式 ---个人页面排版
CSS:
@charset "UTF-8";
/**
*
* @authors qinfeyun
* @date 2016-10-09 15:04:23
* @version 1.0.0
*/
.apply-modal{ width: 88vw; margin: 0 auto; background: #FFF; padding: 15px 10px 10px 20px;box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.5); margin-top: 253px; border-radius: 4px}
.flexbox{ display: -webkit-flex; /* Safari */
display: flex; justify-content:space-around;}
.flexchild{ flex:1; }
.flexchild:nth-child(1){ margin-top: -6px; }
.applycancel{position: absolute;top: -20px;right: 5px;display: inline-block;width: 20px;height: 20px;border: 1px solid #CCC;border-radius: 20px;text-align: center;line-height: 15px;cursor: pointer;}
.applycancel:hover{ background: #fff; color: #000; }
.yf-btn{
background: rgb(74,135,238); color: #fff; text-align: center;border: none;
outline: none;
border-radius: 3px;
width: 40%;letter-spacing: 5px;
padding: 5px 0;
}
.yf-btn:active{ margin-left: 1px;margin-top: 1px; }
.tbody{ background: #fff; width: 100%; margin-top: 48px; padding-bottom: 44px; height: auto; background: rgb(30,30,30); color: #BBB}
.mehq{width:94%;float:right; border-left:1px solid rgb(82,82,82); height:auto; border-bottom:1px solid rgb(82,82,82);margin-bottom:15px;}
.mehq2{clear:both; margin:3% 0; padding-top: 3%; }
.mehq3{position:relative; right:30px; width: 20%}
.mehq4{background:#ff6d00; padding:8px 8px 8px 12px; text-align: center; width:60px; border-radius:5px; color:#fff; font-size: 12px; letter-spacing: 5px;}
.mehq5{padding:8px 11px; color:#9b9b9b; background:rgb(30,30,30);font-size:14px;position: relative; left: 2px;}
.mehq6{width:80%;border-bottom:1px solid rgb(82,82,82);}
.mehq7{background:#e82d3e; padding:3px 6px; width:42px; border-radius:5px; color:#fff; float:left; font-size:14px;}
.mehq8{font-size:14px;line-height:12px; font-weight: 500;position: relative;top: -6px;}
.bg-old{ background:#7e8aa2; }
.time-old{background:rgb(40,40,40)}
.mehq9{text-align:right;line-height:20px; color:#7b8199;font-family:'simsun'; font-size: 12px;}
.titlet{display:block!important;color:#454545; border-bottom:1px solid #ccc;}
.yftitlet{ display:block!important;color:#454545; border-bottom:1px solid #ccc; padding: 5px 0; color: #bbb;}
.yf-line0{background:rgb(40,40,40); width:100%; height:auto; padding-top:20px; }
.yf-line{height: 7px; width:100%; clear:both;margin-bottom:15px;}
.yf-line p {text-align:center;color:#9298b8; position: relative;top: -7px; font-size: 14px;}
HTML
<div class="tbody am-g con mp0">
<div class="">
<div class="am-container">
<div class="yftitlet">
<span class="titspan">平台公告</span>
</div>
<div class="mehq">
<div class="mehq2">
<div class="am-fl mehq3">
<p class="mehq4">公告</p>
<p class="mehq5">10:55</p>
</div>
<div class="am-fl mehq6" >
<p class="mehq7">最新</p>
<span class="mehq8">【今日关注】ME微盘APPME微盘APPME微盘APE微盘A盘APP</span>
<a href="#" class="mehq9"><p>查看全文</p></a>
</div>
</div>
<div class="mehq2">
<div class="am-fl mehq3">
<p class="mehq4">报到</p>
<p class="mehq5">10:55</p>
</div>
<div class="am-fl mehq6" >
<p class="mehq7">重要</p>
<span class="mehq8">【今日关注】ME微盘APPME微盘APPME微盘APE微盘A盘APP</span>
<img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1476083463&di=62ea31041407b8300c3d7f05dc69456a&src=http://imgs.soufun.com/news/2014_12/24/house/1419408695022_000.jpg" class="am-img-responsive am-center">
<a href="#" class="mehq9"><p>查看全文</p></a>
</div>
</div>
<div class="mehq2">
<div class="am-fl mehq3">
<p class="mehq4">行情</p>
<p class="mehq5">10:55</p>
</div>
<div class="am-fl mehq6" >
<!-- <p class="mehq7">重要</p> -->
<span class="mehq8">【今日关注】ME微盘APPME微盘APPME微盘APE微盘A盘APP</span>
<a href="#" class="mehq9"><p>查看全文</p></a>
</div>
</div>
<div class="mehq2">
<div class="am-fl mehq3">
<p class="mehq4">报到</p>
<p class="mehq5">10:55</p>
</div>
<div class="am-fl mehq6" >
<!-- <p class="mehq7">重要</p> -->
<span class="mehq8">【今日关注】ME微盘APPME微盘APPME微盘APE微盘A盘APP</span>
<a href="#" class="mehq9"><p>查看全文</p></a>
</div>
</div>
</div>
</div>
<div class="yf-line0">
<div style="background:url(__MOBILE__/i/eee.png); background-size: 100% 100%;" class="yf-line">
<p>以下为2016年8月25日内容</p>
</div>
<div class="am-container" style="margin-bottom:40px;">
<div class="mehq" style="margin-bottom:15px;">
<div class="mehq2">
<div class="am-fl mehq3">
<p class="mehq4 bg-old" ">报到</p>
<p class="mehq5 time-old" >10:55</p>
</div>
<div class="am-fl mehq6" >
<p class="mehq7">重要</p>
<span class="mehq8">【今日关注】ME微盘APPME微盘APPME微盘APE微盘A盘APP</span>
<a href="#" class="mehq9"><p>查看全文</p></a>
</div>
</div>
<div class="mehq2">
<div class="am-fl mehq3">
<p class="mehq4 bg-old" ">报到</p>
<p class="mehq5 time-old" >10:55</p>
</div>
<div class="am-fl mehq6" >
<p class="mehq7">重要</p>
<span class="mehq8">【今日关注】ME微盘APPME微盘APPME微盘APE微盘A盘APP</span>
<img src="http://www.blogcdn.com/www.engadget.com/media/2011/09/dsc00133-1316715147.jpg" class="am-img-responsive">
<a href="#" class="mehq9"><p>查看全文</p></a>
</div>
</div>
<div class="mehq2">
<div class="am-fl mehq3">
<p class="mehq4 bg-old">报到</p>
<p class="mehq5 time-old">10:55</p>
</div>
<div class="am-fl mehq6" >
<p class="mehq7">重要</p>
<span class="mehq8">【今日关注】ME微盘APPME微盘APPME微盘APE微盘A盘APP</span>
<a href="#" class="mehq9"><p>查看全文</p></a>
</div>
</div>
<div class="mehq2">
<div class="am-fl mehq3">
<p class="mehq4 bg-old" ">报到</p>
<p class="mehq5 time-old" >10:55</p>
</div>
<div class="am-fl mehq6" >
<p class="mehq7">重要</p>
<span class="mehq8">【今日关注】ME微盘APPME微盘APPME微盘APE微盘A盘APP</span>
<a href="#" class="mehq9"><p>查看全文</p></a>
</div>
</div>
</div>
</div>
</div>
<div class="yf-line" style="background:url(__MOBILE__/i/eee.png); background-size: 100% 100%;">
<p>我也是有底线的！</p>
</div>
</div>
</div>
浙公网安备 33010602011771号