15900627980

右侧有日期的新闻列表制作源码

发布于:11-19
先上效果图:

右侧有日期的新闻列表制作源码




这是在上个案例的基础上,在右侧添加了日期。



这里用到了一个知识点:定位,大家可以翻看以前的文章《定位》

给li设置 position: relative;

给右侧日期所在的span,设置 position: absolute; right: 0; top: 0;(让日期定位在li的右侧,不需要设置浮动属性)。



下面为参考代码:

<style>

*{

padding: 0;

margin: 0;

}

.news{

width: 500px;

margin-top: 20px;

margin-left: 20px;

color: #1f1f1f;

}

.news h3{

border-bottom-width: 2px;

border-bottom-color: grey;

border-bottom-style: solid;

padding-bottom: 5px;

margin-bottom: 10px;

}

.news ul{

list-style-type: none;

}

.news ul li{

position: relative;

padding-left: 16px;

background-image:url(imgs/640.jpeg);

background-repeat: no-repeat;

background-position-x: left;

background-position-y: center;

margin: 5px 0;

}



.news a{

display: block;

width: 300px;

text-overflow: ellipsis;

white-space: nowrap;

overflow: hidden;

color: #1f1f1f;

text-decoration: none;

}

.news a:hover{

color: #ff3333;

text-decoration: underline;

}

.news span{

position: absolute;

right: 0;

top: 0;

color: grey;

font-size: 14px;

}

</style>

……

<body>

<div class="news">

<h3>新闻列表</h3>

<ul>

<li><a href="#">[巡视整改】省委授权巡视高职高专第十一组向芜湖职业技术学院党委反馈巡视情况<span>2020/11/12</span></a></li>

<li><a href="#">我校2020年校园足球联赛顺利开赛<span>2020/11/12</span></a></li>

<li><a href="#">学校举办“打造高职就业品牌、助力地方经济发展”2021届毕业生大型校园双选会<span>2020/11/12</span></a></li>

<li><a href="#">学校召开2020年内管干部经济责任审计进场见面会<span>2020/11/12</span></a></li>

<li><a href="#">[巡视整改】省委授权巡视高职高专第十一组向芜湖职业技术学院党委反馈巡视情况<span>2020/11/12</span></a></li>

</ul>

</div>

</body>

右侧 有日期的 新闻列表制作 源码

上一篇:新闻列表制作源码

下一篇:返回列表

相关内容 观察行业视觉,用专业的角度,讲出你们的心声。

I NEED TO BUILD WEBSITE

我需要建站

*请认真填写需求信息,我们会在24小时内与您取得联系。

十见(上海)网络科技有限公司 Copyright© 2014-2020 沪ICP备20008988号-2