资讯

手机用华为 • 推广找展为

十年专注 提供有品质的服务 13933871212

石家庄英文网站建设

专注:石家庄网站制作 | 咨询 13933871212(同微信) 2020-08-23 21:08:44

石家庄英文网站建设如何将新闻和警报部分添加到您的网站
  
使您的听众保持了解是每个网站的核心任务。通过添加紧凑的新闻和警报部分,您可以使访问者快速访问任何页面上的最新或紧急更新。
 
如何将新闻和警报部分添加到您的网站
 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/[email protected]/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设置了颜色,字体大小和链接样式等属性。随意更改颜色和字体样式以匹配您网站的品牌:
10年建站推广经验

让您每一分投入都有更多回报!

联系展为,马上获得专属免费推广方案

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:13933871212   固定电话:0311-80836913   微信:9196389