见惯了新闻列表中单调的文字搭配各式各样的小图标，尝试一下用CSS设计日历的样式作为新闻列表衬托图标吧！
这里的HTML结构如下：
<div class="news-list">
<dl>
<dt><span><s>28/</s>04<i>2019</i></span>高校PK影响力，如何成为大赢家</dt>
<dd>高校PK影响力，如何成为大赢家《中国科学报》2019-04-24任瑞娟王保超李美娜王珏缪运安汝颖从“再穷不能穷教育”到“教育兴则国家兴，教育强则国家强”，我国一直都极为重视教育的发展，尤其是高等教育。对高校而言，其发展受到科研实力、教育水平等多方面影响，而伴随着自媒体的鹊起，高校社会影响力愈发成为影响高校发展的一个重要指标。对学生来说，不论是高考还是考研，都愿意选择一所“风评”较好的大学，他们的“大...
</dd>
</dl>
</div>
在HTML结构中，把年月日用不同标签隔离，以便分别处理成不同样式效果
CSS代码如下：
.news-list dl{background:#fafafa;padding:10px 25px;}
.news-list dt{font-size:22px;text-align:left;position:relative; padding-left:70px} /* 设置标题元素为相对定位，并给个左边距，因为日历使用绝对定位，有了左边距就不会被日历挡住啦*/
.news-list dt span{color:#fff;display:inline;width:60px;height:55px;line-height:18px;position:absolute;top:0;left:0;background:#AAA;font-size:14px;text-align:center /*设置日历元素，绝对定位，并定义合适的宽高 */}
.news-list dt span s{font-size:24px;text-decoration:none;line-height:34px /*设置日的样式*/}
.news-list dt span i{color:#FFD5D6;font-style:normal;display:block;height:21px;background:#F41E33;line-height:21px;font-size:16px;font-family:Tahoma, Geneva, sans-serif /*设置年的样式，dispaly为block，强制撑满宽度，由于日的样式中line-height:34px，那么年最多只能是span的高-34px 即55-34=21px，其自动会靠最下方对齐。*/}}
.news-list dd{text-indent:70px /*给内容部分左边也设定一块空地，好让日历可以显示到内容的水平位置，且不被日历挡住*/}
好了，看下最终效果吧。具体效果可再作微调
网友评论