请教一个实现方式

daviddivad 2015-12-04 03:15:23

我想实现一个页面类似微信公众号里面的文章样式：

点击后是详细的文章内容
这个如何实现，是否有参考的文章提供一下，谢谢

...全文

86 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

傲雪星枫 2015-12-05

打赏
举报

很久没写前端了，随便写了下，可以参考：


<!Doctype html><html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
body{margin:0px;}
.main{width:400px;}
.top{height:200px; background:#FFFF00;position:relative;border-bottom:1px solid #AAAAAA;}
.top .bg{width:100%;height:48px;background:#CCCCCC; filter: alpha(opacity=70); opacity: 0.7;position:absolute;top:152px;z-index: 1;}
.top .title{height:48px;line-height:24px;color:#FFFFFF;font-size:18px;position:absolute;top:152px;z-index: 2;overflow: hidden; margin:0px 3px 0px 3px;}

.list{height:80px; border-bottom: 1px solid #AAAAAA; margin-top:10px;}
.list .title{float:left;width:270px; height:74px; margin-left:3px; line-height:24px; font-size:14px;}
.list .img{float:right;width:100px; height:74px; background:#FF0000; margin-right:3px;}

</style>
</head>
<body>
<div class="main">
    <div class="top">
        <div class="bg"></div>
        <div class="title">仙剑奇侠转三十六天罡剑阵和三神器.三外传天罡剑阵封印燎日，二中有封印了所谓的魔尊</div>
    </div>
    <div class="list">
        <div class="title">仙剑奇侠转三十六天罡剑阵和三神器.三外传天罡剑阵封印燎日</div>
        <div class="img"></div>
    </div>
    <div class="list">
        <div class="title">仙剑奇侠转三十六天罡剑阵和三神器.三外传天罡剑阵封印燎日</div>
        <div class="img"></div>
    </div>
    <div class="list">
        <div class="title">仙剑奇侠转三十六天罡剑阵和三神器.三外传天罡剑阵封印燎日</div>
        <div class="img"></div>
    </div>
    <div class="list">
        <div class="title">仙剑奇侠转三十六天罡剑阵和三神器.三外传天罡剑阵封印燎日</div>
        <div class="img"></div>
    </div>
    <div class="list">
        <div class="title">仙剑奇侠转三十六天罡剑阵和三神器.三外传天罡剑阵封印燎日</div>
        <div class="img"></div>
    </div>
</div>
</body>

</html>