以时间轴为主的新呈现方式 ---个人页面排版

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>

时间： 2024-08-05 05:46:26

以时间轴为主的新呈现方式 ---个人页面排版的相关文章

百度地图API标注+时间轴组合

百度地图API标注+时间轴组合到新公司实习第八天,Boos让我结合百度地图api做一个动态展示标注变化的组件,要求地图展示某一天的标注,时间轴要求可以动态播放每一天的标注变化...然后我就开始coding... 准备工作: 申请百度api密钥(具体方法我也不多写了,大家应该都会) 了解一下百度地图API的开发指南和类参考文档(如果嫌麻烦的话可以直接看Demo示例) 一.首先,先加载地图,你可以用实际的经纬度定位.浏览器定位.根据ip定位.根据城市名定位,这个你可以自己选择 // 创建Map实

对话框以及延伸的时间轴展示

第一个.简单的实现页面的对话框的样式 css代码如下: <style> *{ padding:0; margin:0; } .receiveMessage{ border-radius:4px; background:#fffdfb; padding:50px 15px; width:950px; margin:0 auto; } .receiveMessage>ul{ width:100%; position:relative; } .receiveMessage>ul:befo

WPF教程005 - Timeline时间轴控件的实现

效果图: 由于整个控件是实现之后才写的教程,因此这里记录的代码是最终实现后的,前后会引用到其他的一些依赖属性或者代码,需要阅读整篇文章. 1.确定Timeline继承的基类从效果图中可以看到,时间轴都是由一节一节的子节点组成的,这个很容易联想到我们应该将Timeline继承自ItemsControl.之外仔细观察效果图,可以发现第一项的时间轴节点与其他都不同,而且拆解每一个子项,发现都是由一个圆圈和一个竖线组成,但是最后一项和上面的都不同,少了一个竖线,因此为了控制这些样式,我们需要重新定义一

HTTP协议下可拖动时间轴播放FLV的实现（伪流媒体）

HTTP协议下实现FLV的播放其实并不复杂,当初实现的原理是使用了flowPlayer插件实现的,效果还不错.但仍有两大问题影响着客户的访问情绪: 1.预加载时页面卡死,似乎没有边下边播. 2.偶尔边下边播,却无法拖动时间轴至未下载的部分.相信很多人也遇到该问题. 一度想采用专门的媒体服务器如Adobe的FMS去实现该功能,后多方查找资料,发现采用媒体服务器成本较高,且效率并不是很好,各大视频网站也未采用该方式.而实现HTTP协议下播放flv并可拖动时间轴并非没有可能,关键在于以下几点: Flv

可缩放时间轴和录像片段选择器的实现

最近的工作是做了两个自定义控件:①可以缩放的时间轴②吸附在在时间轴上有两个滑动按钮的录像片段选择器真机测试效果如下面的gif动画所示: -------–最近更新华丽丽的分割线---------由于很多小伙伴私信我要源码,所以最近整理了一下,放在github上了,地址:https://github.com/ljfxyj2008/ScalableTimebar-------–End of 最近更新--------- 在此记录一下设计原理和踩过的坑. 时间轴时间轴分为两部分轴,刻度轴和录像片段轴

Android 时间轴

效果图: 数据是随便填的,显得有点乱,但是不影响效果.实现方面主要是用ListView来实现,主要是根据ListView的item位置与上一条数据进行比较,来控制时间的显示隐藏效果.思路很简单,下面看代码实现: 首先是页面的整体布局,很简单,就一个ListView: res/layout/activity_main.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:and

时光轴时间轴效果

要实现类似QQ空间那样时光轴时间轴效果如图 ==================== 分析:左边 ul的border-left实现,这样会出现底部的余出的线条,不美观, 所以考虑li的border-left实现. li的padding-bottom撑开上下间距 h4标题的:before实现圆圈,定位到左边. 圆圈的实现使用绝对定位实现,注意下UL和LI实现方式下的,圆圈定位位置. =========Ul实现边框======= .money-process .process-list { w

超酷的JavaScript叙事性时间轴(Timeline)类库

在线演示 Timeline 是我见过的最酷的展示事件随时间发展的javascript实现.你可以基于时间使用讲故事的方式来创建时间轴特效,整个时间轴以幻灯的方式来展示,你可以穿插图片,视频或者是网站,而且拥有非常华丽的动画效果和缩略图效果,非常适合做网站的关于我们功能. 主要特性支持外部社交网站,例如,twitter.com, youtube,flickr,vidmeo,Google Maps 开源免费文档齐全使用简单支持数据格式:JSON,Google Doc,HTML 如何使用插入

4-Highcharts曲线图之时间轴折线图

鼠标按住左键左右移动可以试试<!DOCTYPE> <html lang='en'> <head> <title>4-Highcharts曲线图之时间轴折线图</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script src="../jquery-2.1.4/jquery.