石家莊英文網(wǎng)站建設(shè)如何將新聞和警報部分添加到您的網(wǎng)站
使您的聽眾保持了解是每個網(wǎng)站的核心任務(wù)。通過添加緊湊的新聞和警報部分，您可以使訪問者快速訪問任何頁面上的最新或緊急更新。
如何將新聞和警報部分添加到您的網(wǎng)站
Solodev：適用于AWS的DCX
停止新聞發(fā)布：在您的網(wǎng)站上發(fā)布“新聞”仍然是大新聞。
好的，所以這可能并不令人震驚...但是我們和下一個開發(fā)人員一樣喜歡引人注目的標(biāo)題。
新聞很重要。這就是為什么您可能在您的網(wǎng)站上有一個專門的頁面，訪問者可以在其中看到您的所有活動。但是，當(dāng)有人訪問您的主頁時，推薦一口大小的條目集會很有幫助。這可以通過創(chuàng)建一個更短，更緊湊的部分來完成，該部分將新聞和警報集中在一處。
它與報紙的首頁沒什么不同，它為您提供最新的新聞，并可以選擇翻閱其他頁面來閱讀更多內(nèi)容。還記得報紙嗎？
在本教程中，我們將向您展示如何在整潔的網(wǎng)格系統(tǒng)中構(gòu)建新??聞和警報部分，非常適合在您網(wǎng)站上的任何地方居住。您可以使用Bootstrap列并排列出它們，這樣您的訪客就可以在了解重要問題的同時細(xì)讀最新的頭條新聞。您還可以添加圖像和圖標(biāo)，以幫助標(biāo)題跳出頁面并以正確的方式吸引讀者。下面有一個示例，但是您可以在顯示方式上發(fā)揮創(chuàng)意。
石家莊英文網(wǎng)站建設(shè)“新聞”和“警報”之間的區(qū)別
一般而言，您的新聞的行為很像您的博客（在某些情況下，甚至可能是您的博客）。最新的文章可以在吸引人，組織良好的經(jīng)理中顯示，這些經(jīng)理可以提供出色的用戶體驗。不同之處在于您如何根據(jù)新聞的性質(zhì)與受眾互動。也許您正在發(fā)布新聞稿或更新產(chǎn)品功能，但實際上，“新聞”就是您的組織認(rèn)為“具有新聞價值”的東西。
警報有些不同，因為它們傾向于暗示一種緊迫感。有了警報，您可能希望您的受眾因事件甚至危機(jī)（例如封路或服務(wù)中斷）采取行動。在我們的COVID-19系列中，我們向您展示了如何為您的網(wǎng)站構(gòu)建可自定義的警報欄，這樣您就可以在緊急情況下（例如大流行）使您的客戶了解情況。
警報仍然是新聞，但具有更強(qiáng)的吸引力。為此，您還可以使用標(biāo)簽或類別來區(qū)分兩者和專用頁面。就是說，對于某些組織而言，訂閱警報源或服務(wù)可能需要一個獨立的頁面或管理器，因此它實際上是由您的需求驅(qū)動的。
通過您的網(wǎng)站，您可以擁有新聞和警報，而不必完全依賴其他渠道。當(dāng)然，它們提供了分發(fā)–但是，如果您以正確的方式投放SEO，則可以真正優(yōu)化新聞版塊的效果并提高流量和知名度。更好的是，您可以與這些外部渠道集成以擴(kuò)大覆蓋范圍。
額外，額外-我們已經(jīng)有了實現(xiàn)這種生活的代碼！繼續(xù)閱讀。
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網(wǎng)格元素和列，這使得調(diào)整寬度變得更加容易。新聞欄和文章欄均為該部分寬度的一半。在較小的屏幕中，列占據(jù)整個寬度。為此，我們?yōu)閐iv的每個列命名為.col-lg-6 .col-12。在Bootstrap中，所有div均分為12列，因此col-6跨度為12的6列構(gòu)成了一半的寬度，col-12跨度為12的12構(gòu)成了整個寬度。
新聞和警報行由div類名稱為的元素組成.box-news。它們在結(jié)構(gòu)上是相同的，除了新聞行具有一個額外的img元素來顯示圖像。將以下代碼復(fù)制并粘貼到您的項目中：
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
< 一個 詠嘆調(diào)- 標(biāo)簽= “LunarXP贏得年獎的空間創(chuàng)新” HREF = “＃” >
11
< div class = “行” >
12
< div class = “ col-lg-3 col-4 pr-1” >
13
< img alt = “ LunarXP贏得年度空間創(chuàng)新者獎” 類別= “ img-fluid” src = “ images / news-1.jpg” >
14
< / div>
15
< div class = “ col-lg-9 col-8” >
16
< H2 > LunarXP 贏得 空間 創(chuàng)新 的 所述 年 獎< / H2>
17
< p > 年4月 24，到2020年< / P>
18
< / div>
19
< / div>
20
< / a>
21
< / div>
22
23
< div class = “ box-news” >
的CSS
由于大多數(shù)布局調(diào)整和間距是通過HTML文件中使用的Bootstrap內(nèi)置類完成的，因此我們通過CSS設(shè)置了顏色，字體大小和鏈接樣式等屬性。隨意更改顏色和字體樣式以匹配您網(wǎng)站的品牌：
