html新闻公告栏代码

宁为泽 2周前 14浏览 0评论

HTML新闻公告栏代码是一种常见的实现网站动态内容展示和用户交互的途径。本文将介绍HTML5中实现新闻公告栏的代码示例。

<html>
  <head>
    <title>新闻公告栏示例</title>
    <style>
      #news {
        width: 50%;
        border: 1px solid #ccc;
        padding: 10px;
        margin: 0 auto;
      }
      #news h2 {
        font-size: 18px;
        font-weight: bold;
      }
      #news ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }
      #news li {
        margin-bottom: 10px;
        border-bottom: 1px solid #ccc;
        overflow: hidden;
      }
      #news li:last-child {
        border-bottom: none;
      }
      #news li span {
        float: right;
        color: #999;
        font-size: 12px;
      }
    </style>
  </head>
  <body>
    <div id="news">
      <h2>最新新闻</h2>
      <ul>
        <li>
          <a href="#">这是新闻标题1</a>
          <span>2019-01-01</span>
        </li>
        <li>
          <a href="#">这是新闻标题2</a>
          <span>2019-01-02</span>
        </li>
        <li>
          <a href="#">这是新闻标题3</a>
          <span>2019-01-03</span>
        </li>
      </ul>
    </div>
  </body>
</html>

代码说明：
1. 首先定义了一个id为news的div作为新闻公告栏的显示容器。
2. 使用CSS样式定义该公告栏的基本样式，包括宽度、边框、内边距和居中效果等。
3. 使用H2标签定义了公告栏的标题。
4. 使用ul和li标签定义了公告栏内容的列表展示效果，其中每个条目包括一个a标签作为标题，还有一个span标签作为创建时间的显示。
5. 使用CSS样式对li标签的样式做了一些调整，包括调整边距、添加边框和调整字体大小等。
6. 使用:last-child伪类选择器来避免最后一个条目下方也有边框的问题。

上一篇 python3 监听

下一篇 jquery 信息填写表

网站导航

网站导航

最近发表

文章归档

html新闻公告栏代码