欢迎来到泰骏兴电子，大家有问题可以直接联系管理员QQ：233619809单片机 QQ群:59194556 各位游客也可以注册玩玩，享受更多权益。温馨提示：本网站仅提供平台学习以及渠道，一切后果自行承担，还望广大用户提高自我意识，请不要轻易相信他人，请不要轻易相信他人，请不要轻易相信他人。为了更好的管理论坛工作，所以现在使用邮箱注册，如果以前的邮箱不能修改的，请联系管理员代为修改
收藏本站

 找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索
泰骏兴电子»论坛 › 编程语言 › HTML网页 › 一个好看的公告页面
返回列表 发新帖
查看: 122|回复: 0

一个好看的公告页面

[复制链接]
发表于 2023-5-12 11:43:15 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

×
效果入图

建立一个文本文件，将下面代码复制到文本文件里面，根据自己的喜好修改相关内容，然后把文本文件的TXT后缀修改成HTML，双击运行即可


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>公告</title>
  6.         <style>
  7.                 body {
  8.                         margin: 0;
  9.                         padding: 0;
  10.                         font-family: Arial, sans-serif;
  11.                 }

  13.                 header {
  14.                         background-color: #4078c0;
  15.                         padding: 20px 0;
  16.                 }

  18.                 h1, h2 {
  19.                         margin: 0;
  20.                         color: #fff;
  21.                         text-align: center;
  22.                 }

  24.                 h2 {
  25.                         font-size: 1.2em;
  26.                         margin-top: 10px;
  27.                         font-weight: normal;
  28.                 }

  30.                 .container {
  31.                         max-width: 800px;
  32.                         margin: 0 auto;
  33.                         padding: 20px;
  34.                         box-sizing: border-box;
  35.                 }

  37.                 .btn {
  38.                         display: inline-block;
  39.                         padding: 10px 20px;
  40.                         background-color: #fff;
  41.                         color: #4078c0;
  42.                         border: none;
  43.                         border-radius: 4px;
  44.                         text-decoration: none;
  45.                         font-size: 1em;
  46.                         font-weight: bold;
  47.                         cursor: pointer;
  48.                         margin-top: 20px;
  49.                         transition: background-color 0.2s ease-in-out;
  50.                 }

  52.                 .btn:hover {
  53.                         background-color: #4078c0;
  54.                         color: #fff;
  55.                 }

  57.                 .notice {
  58.                         background-color: #f5f5f5;
  59.                         border: 1px solid #ddd;
  60.                         padding: 20px;
  61.                         box-sizing: border-box;
  62.                 }

  64.                 .notice h3 {
  65.                         color: #333;
  66.                         margin-top: 0;
  67.                 }

  69.                 .notice p {
  70.                         margin-top: 10px;
  71.                         line-height: 1.5;
  72.                 }
  73.         </style>
  74. </head>
  75. <body>

  77.         <header>
  78.                 <h1>服务变更公告</h1>
  79.         <!--        <h2>最新消息和更新</h2>-->
  80.         </header>

  82.         <div class="container">
  83.                 <div class="notice">
  84.                         <h3>公告标题</h3>
  85.                         <p>由于服务变更，原地址：www.vyfourm.co地址已经无法访问，使用使用新的地址进行访问：http://tl.tjxdz.cn</p>
  86.                         <a href="http://tl.tjxdz.cn" class="btn">泰骏兴电子论坛</a>
  87.                 </div>
  88.         </div>

  90. </body>
  91. </html>
复制代码




回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|泰骏兴电子科技有限公司 ( 粤ICP备2023060260号-1 ) 单片机爱好者

GMT+8, 2026-4-11 05:21

Powered by Discuz! X3.5

© 2001-2026 Discuz! Team.

快速回复 返回顶部 返回列表