码迷,mamicode.com
首页 > 其他好文 > 详细

2019.12.09-新闻列表布局代码

时间:2019-12-10 00:45:36      阅读:106      评论:0      收藏:0      [点我收藏+]

标签:盒模型   order   color   lan   repeat   otto   font   lis   doc   

 

<!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-新闻列表布局代码

标签:盒模型   order   color   lan   repeat   otto   font   lis   doc   

原文地址:https://www.cnblogs.com/lishuide/p/12014243.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!