首页 > 代码库 > 以时间轴为主的新呈现方式 ---个人页面排版
以时间轴为主的新呈现方式 ---个人页面排版
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="http://www.mamicode.com/#" 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="http://www.mamicode.com/#" 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="http://www.mamicode.com/#" 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="http://www.mamicode.com/#" 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="http://www.mamicode.com/#" 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="http://www.mamicode.com/#" 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="http://www.mamicode.com/#" 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="http://www.mamicode.com/#" 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>
以时间轴为主的新呈现方式 ---个人页面排版
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。