2019.12.09-新闻列表布局代码

Posted lishuide

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了2019.12.09-新闻列表布局代码相关的知识,希望对你有一定的参考价值。

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>特征布局</title>
</head>
<style type="text/css">
.news_list_com{
width: 600px;
height: 290px;
border:1px solid #ddd;
margin: 50px auto 0;
overflow: hidden;
}

.news_list_com h3{
width: 560px;
height: 50px;
border-bottom: 1px solid #ddd;
margin: 0px auto;
}

.news_list_com h3 span{
float: left;
height: 50px;
border-bottom: 2px solid red;
font:18px/50px ‘Microsoft Yahei‘;
color: #000;
padding: 0 15px;
position: relative;
}

.news_list_com h3 a{
float: right;
font:14px/14px ‘Microsoft Yahei‘;
color: #666;
text-decoration: none;
margin-top: 28px;
}

.news_list_com h3 a:hover{
color: red;
}

.news_list_com ul{
list-style: none;
padding: 0;
width: 560px;
height: 238px;
margin: 7px auto 0;
}

.news_list_com ul li{
height: 38px;
border-bottom: 1px solid #ddd;
background:url(images/dot.gif) left center no-repeat;
}

.news_list_com ul a{
float: left;
height: 38px;
line-height: 38px;
font:14px/38px ‘Microsoft Yahei‘;
text-decoration: none;
color: #000;
text-indent: 30px; /* 首行缩进 */
background:url(images/icon.jpg) 5px center no-repeat;
}

.news_list_com ul a:hover{
color: red;
}


.news_list_com ul span{
float: right;
height: 38px;
line-height: 38px;
font:14px/38px ‘Microsoft Yahei‘;
color: #000;
}

</style>
<body>

<div class="news_list_com">
<h3><span>新闻列表</span><a href="#">更多&gt;&gt;</a></h3>
<ul>
<li><a href="">特征布局:新闻列表所需知识点:盒模型/浮动</a><span>2019.12.5</span></li>
<li><a href="">特征布局:新闻列表所需知识点:盒模型/浮动</a><span>2019.12.5</span></li>
<li><a href="">特征布局:新闻列表所需知识点:盒模型/浮动</a><span>2019.12.5</span></li>
<li><a href="">特征布局:新闻列表所需知识点:盒模型/浮动</a><span>2019.12.5</span></li>
<li><a href="">特征布局:新闻列表所需知识点:盒模型/浮动</a><span>2019.12.5</span></li>
<li><a href="">特征布局:新闻列表所需知识点:盒模型/浮动</a><span>2019.12.5</span></li>
</ul>

</div>

</body>
</html>

技术图片

 

 

以上是关于2019.12.09-新闻列表布局代码的主要内容,如果未能解决你的问题,请参考以下文章

qml demo分析(rssnews-常见新闻布局)

新闻列表中标题和日期的左右分别对齐的几种处理方法

Android Compose 新闻App下拉刷新复杂数据网格布局文字样式

Android Compose 新闻App下拉刷新复杂数据网格布局文字样式

关于唯典冰淇淋新闻页的布局

小白如何使用Axure制作列表排序