社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
目錄
鑰匙要點
您在MailChimp中的屏幕應該看起來如下：
修改註冊表格
謝謝您的頁面
>打開視圖/主頁，您會注意到已經有一個contact.cshtml。就像我們之前在“感謝”頁面上所做的那樣，除了頂部視圖包代碼外，清除所有內容。我們將再次使用Jumbotron。除了右側將是空的，我們將使用兩列。這使我們的觸點表格在左側更加對齊。
首頁 科技週邊 IT業界 Visual Studio社區2015：添加電子郵件和聯繫頁面

Visual Studio社區2015：添加電子郵件和聯繫頁面

Jennifer Aniston
Jennifer Aniston
Feb 20, 2025 pm 12:58 PM

Visual Studio社區2015：添加電子郵件和聯繫頁面

鑰匙要點

  • Visual Studio Community 2015允許用戶實施電子郵件註冊表格，聯繫和大約頁面的網站。可以使用MailChimp的表格將電子郵件註冊表格放在主頁上。
    • >
  • >可以使用bootstrap拋光UI，以格式化表單並使所有內容正確對齊。可以在site.css中創建自定義類，例如不折疊，透明背景和軟 - 邊界 - radius。
    • >可以創建其他頁面，例如“謝謝”頁面和“聯繫”頁面，以更好地進行用戶互動。這些頁面可以設計為匹配主頁的配色方案和主題，從而在整個網站上提供一致的用戶體驗。
    • >
本文由Microsoft贊助。感謝您支持使SitePoint成為可能的讚助商。

>歡迎使用Microsoft的現代IDE：Visual Studio Community 2015回到我們的系列文章，以快速設計並為客戶建立一個有吸引力的功能性網站。如果您錯過了最後一部分，請在此處查看。 >現在，安迪（Andy）擁有網站的首頁，他可以開始更多地構建網站。這將涉及實施電子郵件註冊表格以及聯繫方式和大約頁面。

>

>我們將從電子郵件註冊表格開始，然後進入創建一些其他頁面。電子郵件註冊表將是主頁上的正面和中心。它將被放置在Jumbotron的右側，那裡有一些空白空間。

>

>對於電子郵件註冊表格，我們將使用MailChimp中的表格。安迪（Andy）正在使用其客戶的MailChimp帳戶，並將使用現有的主頁列表。在主頁上註冊的每個人都將進入此列表。

>

我們的註冊表格將設計為這樣的外觀：

>

從MailChimp獲取代碼

>登錄MailChimp後，選擇要添加的人的列表。單擊註冊表格。單擊嵌入式表單。經典風格很好。客戶希望捕獲名字和電子郵件地址。 MailChimp實際上將其視為默認值，因此我們可以像它們一樣留下東西。 Visual Studio社區2015：添加電子郵件和聯繫頁面>

您在MailChimp中的屏幕應該看起來如下：

>

複製HTML。這就是我們將粘貼到Jumbotron中的東西。在這條線下的巨型人物中：

Visual Studio社區2015：添加電子郵件和聯繫頁面>添加MailChimp表單代碼。如果您運行該應用程序，則應如下：

> 

<span title="&">&amp;lt;p&amp;gt;&amp;lt;a class=&amp;quot;btn btn-primary btn-lg&amp;quot; href=&amp;quot;#&amp;quot; role=&amp;quot;button&amp;quot;&amp;gt;Learn more &amp;amp;raquo;&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;</span>
登入後複製
登入後複製
登入後複製
登入後複製
顯然，這不是我們希望它看起來像的樣子，但這是一個很好的起點。從這裡開始，我們將使用Bootstrap格式化表單，並正確對齊所有內容。

>用bootstrap

修改註冊表格

>當前格式化，我們失去了響應式設計。當註冊表格向右時，需要留下站點標題。他們也應該在同一行。 bootstrap將幫助我們恢復正常的狀態。

我們可以添加幾列。用A

和mailChimp代碼包圍Jumbotron。這種格式意味著站點標題文本將佔據Jumbotron的2/3，而註冊格式則佔1/3。

>您的代碼應該看起來如下：

> Visual Studio社區2015：添加電子郵件和聯繫頁面

記住，Bootstrap使用了12個網格系統。 8 4 = 12，您可以從這些數字中看到我們如何獲得2/3和1/3。

如果您運行了網站，您會看到我們有兩列，我們的響應網絡設計又回來了。

Visual Studio社區2015：添加電子郵件和聯繫頁面接下來，我們將開始拋光註冊表格UI，使其與網站更好地融合。

UI拋光

>而不是經過許多小步驟，而是更容易顯示完成的MailChimp修改的外觀。然後，我們可以逐步完成。用以下內容替換當前的MailChimp代碼：

<span title="&">&amp;lt;p&amp;gt;&amp;lt;a class=&amp;quot;btn btn-primary btn-lg&amp;quot; href=&amp;quot;#&amp;quot; role=&amp;quot;button&amp;quot;&amp;gt;Learn more &amp;amp;raquo;&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;</span>
登入後複製
登入後複製
登入後複製
登入後複製
>我在代碼中添加了幾行空間，以更好地幫助分解表格進行討論。

>我們將創建一些自定義類，其中包括不折疊，透明背景和軟 - 基本 - radius。我們在site.css.

中定義了這些類

>由於MailChimp代碼的大多數與我們從MailChimp複製的代碼相同，所以讓我們討論這些自定義類別的情況。

>

不折疊的定義如下：

>它只是刪除了大膽的字母。這用於取消強調表單字段標籤。 我們的行動呼籲是大膽的。如果表單字段標籤也被粗體，則眼睛將努力弄清楚在哪裡聚焦。更糟糕的情況：人們只是放棄並繞過我們的註冊表格。 
<span title="&">&amp;lt;!-- Begin MailChimp Signup Form --&amp;gt;
</span><span title="&">&amp;lt;link href=&amp;quot;//cdn-images.mailchimp.com/embedcode/classic-081711.css&amp;quot; rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot;&amp;gt;
</span><span title="&">&amp;lt;div id=&amp;quot;mc_embed_signup&amp;quot; class=&amp;quot;transparent-background soft-border-radius&amp;quot;&amp;gt;
</span><span title="&">&amp;lt;form action=&amp;quot;#&amp;quot; method=&amp;quot;post&amp;quot; id=&amp;quot;mc-embedded-subscribe-form&amp;quot; name=&amp;quot;mc-embedded-subscribe-form&amp;quot; class=&amp;quot;validate&amp;quot; target=&amp;quot;_blank&amp;quot; novalidate&amp;gt;
</span>  <span title="&">&amp;lt;div id=&amp;quot;mc_embed_signup_scroll&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;h3&amp;gt;Enter your name and email for&amp;lt;br /&amp;gt; your first FREE lesson!&amp;lt;/h3&amp;gt;
</span>
  <span title="&">&amp;lt;div class=&amp;quot;mc-field-group&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;label for=&amp;quot;mce-FNAME&amp;quot; class=&amp;quot;not-bold&amp;quot;&amp;gt;First Name &amp;lt;/label&amp;gt;
</span>  <span title="&">&amp;lt;input type=&amp;quot;text&amp;quot; value=&amp;quot;&amp;quot; name=&amp;quot;FNAME&amp;quot; class=&amp;quot;transparent-background soft-border-radius&amp;quot; id=&amp;quot;mce-FNAME&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;div class=&amp;quot;mc-field-group&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;label for=&amp;quot;mce-EMAIL&amp;quot; class=&amp;quot;not-bold&amp;quot;&amp;gt;Email &amp;lt;/label&amp;gt;
</span>  <span title="&">&amp;lt;input type=&amp;quot;email&amp;quot; value=&amp;quot;&amp;quot; name=&amp;quot;EMAIL&amp;quot; class=&amp;quot;required email transparent-background soft-border-radius&amp;quot; id=&amp;quot;mce-EMAIL&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;/div&amp;gt;
</span>

  <span title="&">&amp;lt;div id=&amp;quot;mce-responses&amp;quot; class=&amp;quot;clear&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;div class=&amp;quot;response&amp;quot; id=&amp;quot;mce-error-response&amp;quot; style=&amp;quot;display:none&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;div class=&amp;quot;response&amp;quot; id=&amp;quot;mce-success-response&amp;quot; style=&amp;quot;display:none&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;/div&amp;gt;    
</span>  <span title="&">&amp;lt;!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--&amp;gt;
</span>  <span title="&">&amp;lt;div style=&amp;quot;position: absolute; left: -5000px;&amp;quot;&amp;gt;&amp;lt;input type=&amp;quot;text&amp;quot; name=&amp;quot;b_f27f671242f9376d66eb9034e_a5f924c1e8&amp;quot; tabindex=&amp;quot;-1&amp;quot; value=&amp;quot;&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
</span>
  <span title="&">&amp;lt;input type=&amp;quot;submit&amp;quot; class=&amp;quot;btn btn-primary btn-lg&amp;quot; value=&amp;quot;Subscribe&amp;quot; name=&amp;quot;subscribe&amp;quot; /&amp;gt;
</span>
  <span title="&">&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;/form&amp;gt;
</span><span title="&">&amp;lt;/div&amp;gt;
</span><span title="&">&amp;lt;!--End mc_embed_signup--&amp;gt;</span>
登入後複製
登入後複製
登入後複製
>

下面的屏幕截圖顯示了.Not-bold

的使用

透明背景為形式背景和輸入字段提供了半透明度，為我們的設計提供了更深入的深度。它被定義為：Visual Studio社區2015：添加電子郵件和聯繫頁面

RGBA

僅表示紅色，綠色，藍色和alpha。 Alpha設置不透明度。該值越低，越透明。值的範圍為0到1。 
<span><span>.not-bold</span> {
</span>    <span>font-weight:normal;
</span><span>}</span>
登入後複製
登入後複製
登入後複製
>

>柔軟的邊界 - 拉迪烏斯使我們的形式和輸入字段用圓角表達了一些優雅的細節。此類定義為：

>最後，我們有一個全寬藍色按鈕。 .max寬度在這裡對我們有所幫助。藍色不僅提供了極大的對比度，並將其賦予了眼睛，而且大尺寸使其無法抗拒。 .max寬度定義為：
<span><span>.transparent-background</span> {
</span>   <span>background-color: <span>rgba(0, 0, 0, 0.25)</span>
</span><span>}</span>
登入後複製
登入後複製
>
<span title="&">&amp;lt;p&amp;gt;&amp;lt;a class=&amp;quot;btn btn-primary btn-lg&amp;quot; href=&amp;quot;#&amp;quot; role=&amp;quot;button&amp;quot;&amp;gt;Learn more &amp;amp;raquo;&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;</span>
登入後複製
登入後複製
登入後複製
登入後複製

>將上面的類添加到site.cs.css和以上表單代碼中的粘貼應與上面顯示的相同的註冊表格。

>。

謝謝您的頁面

>用戶註冊時，通常最好提供一個確認頁面，讓他們知道一切順利。您幾次註冊了某人的列表，只是被一個極其不想像的感謝頁面打招呼？

> 安迪知道他的客戶是一位真正的藝術家，想加倍努力。這意味著不要使用一些庫存感謝頁面瀏覽。但是，通過使用主頁中的相同配色方案和主題。

創建感謝頁面，打開控制器/homecontroller.cs。添加以下內容：

因為這是一個MVC應用程序，所以當某人輸入 /home /Thenkyou時，它將達到上述方法。當然，我們不希望任何人輸入“感謝”頁面，因為這將作為註冊我們客戶的電子郵件列表的確認。 
<span title="&">&amp;lt;!-- Begin MailChimp Signup Form --&amp;gt;
</span><span title="&">&amp;lt;link href=&amp;quot;//cdn-images.mailchimp.com/embedcode/classic-081711.css&amp;quot; rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot;&amp;gt;
</span><span title="&">&amp;lt;div id=&amp;quot;mc_embed_signup&amp;quot; class=&amp;quot;transparent-background soft-border-radius&amp;quot;&amp;gt;
</span><span title="&">&amp;lt;form action=&amp;quot;#&amp;quot; method=&amp;quot;post&amp;quot; id=&amp;quot;mc-embedded-subscribe-form&amp;quot; name=&amp;quot;mc-embedded-subscribe-form&amp;quot; class=&amp;quot;validate&amp;quot; target=&amp;quot;_blank&amp;quot; novalidate&amp;gt;
</span>  <span title="&">&amp;lt;div id=&amp;quot;mc_embed_signup_scroll&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;h3&amp;gt;Enter your name and email for&amp;lt;br /&amp;gt; your first FREE lesson!&amp;lt;/h3&amp;gt;
</span>
  <span title="&">&amp;lt;div class=&amp;quot;mc-field-group&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;label for=&amp;quot;mce-FNAME&amp;quot; class=&amp;quot;not-bold&amp;quot;&amp;gt;First Name &amp;lt;/label&amp;gt;
</span>  <span title="&">&amp;lt;input type=&amp;quot;text&amp;quot; value=&amp;quot;&amp;quot; name=&amp;quot;FNAME&amp;quot; class=&amp;quot;transparent-background soft-border-radius&amp;quot; id=&amp;quot;mce-FNAME&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;div class=&amp;quot;mc-field-group&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;label for=&amp;quot;mce-EMAIL&amp;quot; class=&amp;quot;not-bold&amp;quot;&amp;gt;Email &amp;lt;/label&amp;gt;
</span>  <span title="&">&amp;lt;input type=&amp;quot;email&amp;quot; value=&amp;quot;&amp;quot; name=&amp;quot;EMAIL&amp;quot; class=&amp;quot;required email transparent-background soft-border-radius&amp;quot; id=&amp;quot;mce-EMAIL&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;/div&amp;gt;
</span>

  <span title="&">&amp;lt;div id=&amp;quot;mce-responses&amp;quot; class=&amp;quot;clear&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;div class=&amp;quot;response&amp;quot; id=&amp;quot;mce-error-response&amp;quot; style=&amp;quot;display:none&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;div class=&amp;quot;response&amp;quot; id=&amp;quot;mce-success-response&amp;quot; style=&amp;quot;display:none&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;/div&amp;gt;    
</span>  <span title="&">&amp;lt;!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--&amp;gt;
</span>  <span title="&">&amp;lt;div style=&amp;quot;position: absolute; left: -5000px;&amp;quot;&amp;gt;&amp;lt;input type=&amp;quot;text&amp;quot; name=&amp;quot;b_f27f671242f9376d66eb9034e_a5f924c1e8&amp;quot; tabindex=&amp;quot;-1&amp;quot; value=&amp;quot;&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
</span>
  <span title="&">&amp;lt;input type=&amp;quot;submit&amp;quot; class=&amp;quot;btn btn-primary btn-lg&amp;quot; value=&amp;quot;Subscribe&amp;quot; name=&amp;quot;subscribe&amp;quot; /&amp;gt;
</span>
  <span title="&">&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;/form&amp;gt;
</span><span title="&">&amp;lt;/div&amp;gt;
</span><span title="&">&amp;lt;!--End mc_embed_signup--&amp;gt;</span>
登入後複製
登入後複製
登入後複製
。

>我們需要此方法的視圖。打開視圖/主頁文件夾，然後製作contact.cshtml的副本。將復制的文件重命名為thessyou.cshtml。

我們的感謝頁面基本上將是主頁上的Jumbotron。在Themyou.cshtml中清除代碼，僅將ViewBag代碼放在頂部。粘貼以下內容：

>

製作“聯繫”頁面的副本使我們可以充分利用現有頁面結構。我們將擁有我們熟悉的導航和頁腳，而無需做任何事情。 
<span><span>.not-bold</span> {
</span>    <span>font-weight:normal;
</span><span>}</span>
登入後複製
登入後複製
登入後複製
>

>您可能注意到了Jumbotron-tall類。這是一個新課程，為感謝頁面增加了一些額外的高度。否則，我們最終會在頂部跑得很短。不會太令人印象深刻。

較大的圖像看起來很棒，並為我們的藝術家（即客戶）提供了一些額外的播放時間。 Jumbotron-tall定義為：

您的最終感謝頁面應該看起來如下：

聯繫頁面
<span><span>.transparent-background</span> {
</span>   <span>background-color: <span>rgba(0, 0, 0, 0.25)</span>
</span><span>}</span>
登入後複製
登入後複製

>我們希望為潛在客戶提供直接通過他的網站與客戶聯繫的機會。這是聯繫頁面到達的地方。我們將遵循上述基本輪廓以創建聯繫頁面。我們的最後頁面看起來如下：

Visual Studio社區2015：添加電子郵件和聯繫頁面

>打開視圖/主頁，您會注意到已經有一個contact.cshtml。就像我們之前在“感謝”頁面上所做的那樣，除了頂部視圖包代碼外，清除所有內容。我們將再次使用Jumbotron。除了右側將是空的，我們將使用兩列。這使我們的觸點表格在左側更加對齊。

>我們將介紹一些新的CSS課程，這也將影響我們的主頁。頭等艙是：

<span title="&">&amp;lt;p&amp;gt;&amp;lt;a class=&amp;quot;btn btn-primary btn-lg&amp;quot; href=&amp;quot;#&amp;quot; role=&amp;quot;button&amp;quot;&amp;gt;Learn more &amp;amp;raquo;&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;</span>
登入後複製
登入後複製
登入後複製
登入後複製

這是專門針對錶單底部的藍色按鈕。添加此類將創建一個更寬的按鈕，並在按鈕頂部和評論框的底部之間添加一點空間。我們還可以將此課程應用於主頁按鈕。

接下來是對現有類的修改：

<span title="&">&amp;lt;!-- Begin MailChimp Signup Form --&amp;gt;
</span><span title="&">&amp;lt;link href=&amp;quot;//cdn-images.mailchimp.com/embedcode/classic-081711.css&amp;quot; rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot;&amp;gt;
</span><span title="&">&amp;lt;div id=&amp;quot;mc_embed_signup&amp;quot; class=&amp;quot;transparent-background soft-border-radius&amp;quot;&amp;gt;
</span><span title="&">&amp;lt;form action=&amp;quot;#&amp;quot; method=&amp;quot;post&amp;quot; id=&amp;quot;mc-embedded-subscribe-form&amp;quot; name=&amp;quot;mc-embedded-subscribe-form&amp;quot; class=&amp;quot;validate&amp;quot; target=&amp;quot;_blank&amp;quot; novalidate&amp;gt;
</span>  <span title="&">&amp;lt;div id=&amp;quot;mc_embed_signup_scroll&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;h3&amp;gt;Enter your name and email for&amp;lt;br /&amp;gt; your first FREE lesson!&amp;lt;/h3&amp;gt;
</span>
  <span title="&">&amp;lt;div class=&amp;quot;mc-field-group&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;label for=&amp;quot;mce-FNAME&amp;quot; class=&amp;quot;not-bold&amp;quot;&amp;gt;First Name &amp;lt;/label&amp;gt;
</span>  <span title="&">&amp;lt;input type=&amp;quot;text&amp;quot; value=&amp;quot;&amp;quot; name=&amp;quot;FNAME&amp;quot; class=&amp;quot;transparent-background soft-border-radius&amp;quot; id=&amp;quot;mce-FNAME&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;div class=&amp;quot;mc-field-group&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;label for=&amp;quot;mce-EMAIL&amp;quot; class=&amp;quot;not-bold&amp;quot;&amp;gt;Email &amp;lt;/label&amp;gt;
</span>  <span title="&">&amp;lt;input type=&amp;quot;email&amp;quot; value=&amp;quot;&amp;quot; name=&amp;quot;EMAIL&amp;quot; class=&amp;quot;required email transparent-background soft-border-radius&amp;quot; id=&amp;quot;mce-EMAIL&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;/div&amp;gt;
</span>

  <span title="&">&amp;lt;div id=&amp;quot;mce-responses&amp;quot; class=&amp;quot;clear&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;div class=&amp;quot;response&amp;quot; id=&amp;quot;mce-error-response&amp;quot; style=&amp;quot;display:none&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;div class=&amp;quot;response&amp;quot; id=&amp;quot;mce-success-response&amp;quot; style=&amp;quot;display:none&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;/div&amp;gt;    
</span>  <span title="&">&amp;lt;!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--&amp;gt;
</span>  <span title="&">&amp;lt;div style=&amp;quot;position: absolute; left: -5000px;&amp;quot;&amp;gt;&amp;lt;input type=&amp;quot;text&amp;quot; name=&amp;quot;b_f27f671242f9376d66eb9034e_a5f924c1e8&amp;quot; tabindex=&amp;quot;-1&amp;quot; value=&amp;quot;&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
</span>
  <span title="&">&amp;lt;input type=&amp;quot;submit&amp;quot; class=&amp;quot;btn btn-primary btn-lg&amp;quot; value=&amp;quot;Subscribe&amp;quot; name=&amp;quot;subscribe&amp;quot; /&amp;gt;
</span>
  <span title="&">&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;/form&amp;gt;
</span><span title="&">&amp;lt;/div&amp;gt;
</span><span title="&">&amp;lt;!--End mc_embed_signup--&amp;gt;</span>
登入後複製
登入後複製
登入後複製

對於此表格，我們將使用類似於MailChimp表單代碼的結構。但是，我們不會使用MailChimp的CSS，因為我們不使用其註冊表格。

>

> MailChimp CSS提供的一件事是圍繞輸入字段的較暗邊界。現在消失了。為了補償，我們正在添加軟 - 邊界 - 拉迪烏斯內部的邊框，這將產生相同的效果。

>在聯繫表格中，我們添加了一個評論文本框。這個盒子可以帶有滾動條，默認情況下將是相當白色的。這種更亮的顏色將與我們的深色形成鮮明的對比。為了幫助滾動條更好地融合，我們需要修改文本方面：>

注意FFFAD5的顏色，它將我們的評論字段文本從黑色更改為更亮的黃色。我們正在為輸入字段做同樣的事情：
<span><span>.not-bold</span> {
</span>    <span>font-weight:normal;
</span><span>}</span>
登入後複製
登入後複製
登入後複製

上述所有CSS課程都進入site.css. <span><span>.transparent-background</span> { </span> <span>background-color: <span>rgba(0, 0, 0, 0.25)</span> </span><span>}</span>

現在我們可以繼續使用表單代碼。 >

>您可能會注意到與MailChimp表格的一些相似之處。這實際上是該表單的修改版本。觸點表格位於左柱中，該左柱為Col-Md-8寬。由於我們的右列是Col-Md-4，因此可以創建一個2/3寬的列。請記住，8 4 = 12，這是在Bootstrap中組成我們的12列網格的列數。

摘要
<span><span>.soft-border-radius</span> {
</span>  <span>border-radius: 10px;
</span><span>}</span>
登入後複製
Andy的客戶現在有一個很棒的註冊表格，一定會吸引註冊。他還添加了一個聯繫表，與網站的整體主題融為一體。在這一點上，安迪的客戶取得了一個良好的開端。

>

接下來，我們將為客戶添加一種購買課程的方法。安迪的客戶認識到移動設備現在是網絡的很大一部分。他想確保移動網站提供出色的用戶體驗。其中一部分是在獲得新課程後發送通知。

> 安迪（Andy）為網站有一些令人興奮的功能。當一切融合在一起時，我們將繼續跟隨他的肩膀。

以上是Visual Studio社區2015：添加電子郵件和聯繫頁面的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

Windows 11 KB5054979中的新功能以及如何解決更新問題
3 週前 By DDD
如何修復KB5055523無法在Windows 11中安裝？
2 週前 By DDD
Inzoi：如何申請學校和大學
3 週前 By DDD
如何修復KB5055518無法在Windows 10中安裝？
2 週前 By DDD
Roblox：Dead Rails - 如何召喚和擊敗Nikola Tesla
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
顯示更多

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7814
15
Java教學
1646
14
CakePHP 教程
1402
52
Laravel 教程
1300
25
PHP教程
1237
29
顯示更多
Related knowledge
使用GO構建網絡漏洞掃描儀 使用GO構建網絡漏洞掃描儀 Apr 01, 2025 am 08:27 AM

此基於GO的網絡漏洞掃描儀有效地確定了潛在的安全弱點。 它利用了GO的並發功能的速度功能，包括服務檢測和漏洞匹配。讓我們探索它的能力和道德

CNCF ARM64飛行員：影響和見解 CNCF ARM64飛行員：影響和見解 Apr 15, 2025 am 08:27 AM

該試點程序是CNCF（雲本機計算基礎），安培計算，Equinix金屬和驅動的合作，簡化了CNCF GitHub項目的ARM64 CI/CD。 該計劃解決了安全問題和績效

使用AWS ECS和LAMBDA的無服務器圖像處理管道 使用AWS ECS和LAMBDA的無服務器圖像處理管道 Apr 18, 2025 am 08:28 AM

該教程通過使用AWS服務來指導您通過構建無服務器圖像處理管道。 我們將創建一個部署在ECS Fargate群集上的next.js前端，與API網關，Lambda函數，S3桶和DynamoDB進行交互。 Th

21個開發人員新聞通訊將在2025年訂閱 21個開發人員新聞通訊將在2025年訂閱 Apr 24, 2025 am 08:28 AM

與這些頂級開發人員新聞通訊有關最新技術趨勢的了解！ 這個精選的清單為每個人提供了一些東西，從AI愛好者到經驗豐富的後端和前端開發人員。 選擇您的收藏夾並節省時間搜索REL

See all articles