本文通过一个简单的HTML和CSS布局示例展示了如何使用基本的HTML标签和CSS样式来创建一个包含新闻条目的区块。每个新闻条目包括一个标题和发布日期。
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.news{
width: 400px;
height: 100px;
border: 1px solid #000;
margin: 100px;
overflow: hidden;
}
.news ul{
list-style: none;
}
.news ul li{
overflow: hidden;
_zoom:1;
border-bottom: 1px dashed gray;
}
.news ul li span.title{
float: left;
}
.news ul li span.date{
float: right;
}
</style>
</head>
<body>
<div class="news">
<ul>
<li>
<span class="title">哈哈哈哈哈哈哈哈</span>
<span class="date">2015年10月24日</span>
</li>
<li>
<span class="title">嘻嘻嘻嘻嘻</span>
<span class="date">2015年10月24日</span>
</li>
<li>
<span class="title">呜呜呜呜呜呜呜</span>
<span class="date">2015年10月24日</span>
</li>
</ul>
</div>
</body>
</html>
扫一扫
1613
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
