石家庄英文网站建设如何将新闻和警报部分添加到您的网站
使您的听众保持了解是每个网站的核心任务。通过添加紧凑的新闻和警报部分，您可以使访问者快速访问任何页面上的最新或紧急更新。
如何将新闻和警报部分添加到您的网站
Solodev：适用于AWS的DCX
停止新闻发布：在您的网站上发布“新闻”仍然是大新闻。
好的，所以这可能并不令人震惊...但是我们和下一个开发人员一样喜欢引人注目的标题。
新闻很重要。这就是为什么您可能在您的网站上有一个专门的页面，访问者可以在其中看到您的所有活动。但是，当有人访问您的主页时，推荐一口大小的条目集会很有帮助。这可以通过创建一个更短，更紧凑的部分来完成，该部分将新闻和警报集中在一处。
它与报纸的首页没什么不同，它为您提供最新的新闻，并可以选择翻阅其他页面来阅读更多内容。还记得报纸吗？
在本教程中，我们将向您展示如何在整洁的网格系统中构建新??闻和警报部分，非常适合在您网站上的任何地方居住。您可以使用Bootstrap列并排列出它们，这样您的访客就可以在了解重要问题的同时细读最新的头条新闻。您还可以添加图像和图标，以帮助标题跳出页面并以正确的方式吸引读者。下面有一个示例，但是您可以在显示方式上发挥创意。
石家庄英文网站建设“新闻”和“警报”之间的区别
一般而言，您的新闻的行为很像您的博客（在某些情况下，甚至可能是您的博客）。最新的文章可以在吸引人，组织良好的经理中显示，这些经理可以提供出色的用户体验。不同之处在于您如何根据新闻的性质与受众互动。也许您正在发布新闻稿或更新产品功能，但实际上，“新闻”就是您的组织认为“具有新闻价值”的东西。
警报有些不同，因为它们倾向于暗示一种紧迫感。有了警报，您可能希望您的受众因事件甚至危机（例如封路或服务中断）采取行动。在我们的COVID-19系列中，我们向您展示了如何为您的网站构建可自定义的警报栏，这样您就可以在紧急情况下（例如大流行）使您的客户了解情况。
警报仍然是新闻，但具有更强的吸引力。为此，您还可以使用标签或类别来区分两者和专用页面。就是说，对于某些组织而言，订阅警报源或服务可能需要一个独立的页面或管理器，因此它实际上是由您的需求驱动的。
通过您的网站，您可以拥有新闻和警报，而不必完全依赖其他渠道。当然，它们提供了分发–但是，如果您以正确的方式投放SEO，则可以真正优化新闻版块的效果并提高流量和知名度。更好的是，您可以与这些外部渠道集成以扩大覆盖范围。
额外，额外-我们已经有了实现这种生活的代码！继续阅读。
石家庄英文网站建设入门
由于我们使用的是Bootstrap来构建我们的部分，因此，继续并将下面的链接复制并粘贴到您项目的HTML文件的开头部分：
1个
<！- Bootstrap CSS- >
2
< 链路 相对= “样式表” HREF = “https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css” 完整性= “SHA384-Vkoo8x4CGsO3 + Hhxv8T / Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh” crossorigin = “匿名” >
3
<！ - FontAwesome CSS - >
4
< link rel = “ stylesheet” href = “ https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css” >
5
<！- 首先是jQuery ，然后是Popper。js，然后是Bootstrap JS- >
6
< 脚本 SRC = “https://code.jquery.com/jquery-3.4.1.slim.min.js” 完整性= “SHA384-J6qa4849blE2 + poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ + N” crossorigin = “匿名” > < / SCRIPT>
7
< 脚本 SRC = “https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js” 完整性= “SHA384-Q6E9RHvbIyZFJoft + 2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo” crossorigin = “匿名” > < /脚本>
8
< 脚本 SRC = “https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js” 完整性= “SHA384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6” crossorigin = “匿名” > < / SCRIPT>
的HTML
在下面的HTML代码中，我们有一个主要部分来容纳新闻和警报。我们使用类名.section--news使其更易于识别，并可以在CSS文件中轻松选择样式。它使用的是Bootstrap网格元素和列，这使得调整宽度变得更加容易。新闻栏和文章栏均为该部分宽度的一半。在较小的屏幕中，列占据整个宽度。为此，我们为div的每个列命名为.col-lg-6 .col-12。在Bootstrap中，所有div均分为12列，因此col-6跨度为12的6列构成了一半的宽度，col-12跨度为12的12构成了整个宽度。
新闻和警报行由div类名称为的元素组成.box-news。它们在结构上是相同的，除了新闻行具有一个额外的img元素来显示图像。将以下代码复制并粘贴到您的项目中：
1个
< section class = “部分部分-背景部分-新闻mt-5 mb-5” >
2
< div class = “容器” >
3
< div class = “行” >
4
5
<！- 新闻 部分 ->
6
< div class = “ col-lg-6 col-12” >
7
< h2 class = “ h1 mt-xl-n1 mb-4 mb-md-5 pb-2” > 新闻< / h2>
8
9
< div class = “ box-news” >
10
< 一个 咏叹调- 标签= “LunarXP赢得年奖的空间创新” HREF = “＃” >
11
< div class = “行” >
12
< div class = “ col-lg-3 col-4 pr-1” >
13
< img alt = “ LunarXP赢得年度空间创新者奖” 类别= “ img-fluid” src = “ images / news-1.jpg” >
14
< / div>
15
< div class = “ col-lg-9 col-8” >
16
< H2 > LunarXP 赢得 空间 创新 的 所述 年 奖< / H2>
17
< p > 年4月 24，到2020年< / P>
18
< / div>
19
< / div>
20
< / a>
21
< / div>
22
23
< div class = “ box-news” >
的CSS
由于大多数布局调整和间距是通过HTML文件中使用的Bootstrap内置类完成的，因此我们通过CSS设置了颜色，字体大小和链接样式等属性。随意更改颜色和字体样式以匹配您网站的品牌：
