鑰匙要點
- Visual Studio Community 2015允許用戶實施電子郵件註冊表格，聯繫和大約頁面的網站。可以使用MailChimp的表格將電子郵件註冊表格放在主頁上。 >
- >可以使用bootstrap拋光UI，以格式化表單並使所有內容正確對齊。可以在site.css中創建自定義類，例如不折疊，透明背景和軟 - 邊界 - radius。 >可以創建其他頁面，例如“謝謝”頁面和“聯繫”頁面，以更好地進行用戶互動。這些頁面可以設計為匹配主頁的配色方案和主題，從而在整個網站上提供一致的用戶體驗。
- >
>歡迎使用Microsoft的現代IDE：Visual Studio Community 2015回到我們的系列文章，以快速設計並為客戶建立一個有吸引力的功能性網站。如果您錯過了最後一部分，請在此處查看。 >現在，安迪（Andy）擁有網站的首頁，他可以開始更多地構建網站。這將涉及實施電子郵件註冊表格以及聯繫方式和大約頁面。
>>我們將從電子郵件註冊表格開始，然後進入創建一些其他頁面。電子郵件註冊表將是主頁上的正面和中心。它將被放置在Jumbotron的右側，那裡有一些空白空間。
>>對於電子郵件註冊表格，我們將使用MailChimp中的表格。安迪（Andy）正在使用其客戶的MailChimp帳戶，並將使用現有的主頁列表。在主頁上註冊的每個人都將進入此列表。
>我們的註冊表格將設計為這樣的外觀：
>從MailChimp獲取代碼
>登錄MailChimp後，選擇要添加的人的列表。單擊註冊表格。單擊嵌入式表單。經典風格很好。客戶希望捕獲名字和電子郵件地址。 MailChimp實際上將其視為默認值，因此我們可以像它們一樣留下東西。
>
您在MailChimp中的屏幕應該看起來如下：
>複製HTML。這就是我們將粘貼到Jumbotron中的東西。在這條線下的巨型人物中：
>添加MailChimp表單代碼。如果您運行該應用程序，則應如下：>
<span title="&"><p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p></span>顯然，這不是我們希望它看起來像的樣子，但這是一個很好的起點。從這裡開始，我們將使用Bootstrap格式化表單，並正確對齊所有內容。
>用bootstrap
修改註冊表格
>當前格式化，我們失去了響應式設計。當註冊表格向右時，需要留下站點標題。他們也應該在同一行。 bootstrap將幫助我們恢復正常的狀態。
我們可以添加幾列。用A
和mailChimp代碼包圍Jumbotron。這種格式意味著站點標題文本將佔據Jumbotron的2/3，而註冊格式則佔1/3。>您的代碼應該看起來如下：
>
記住，Bootstrap使用了12個網格系統。 8 4 = 12，您可以從這些數字中看到我們如何獲得2/3和1/3。
如果您運行了網站，您會看到我們有兩列，我們的響應網絡設計又回來了。
接下來，我們將開始拋光註冊表格UI，使其與網站更好地融合。 UI拋光
>而不是經過許多小步驟，而是更容易顯示完成的MailChimp修改的外觀。然後，我們可以逐步完成。用以下內容替換當前的MailChimp代碼：
<span title="&"><p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p></span>>我在代碼中添加了幾行空間，以更好地幫助分解表格進行討論。
>我們將創建一些自定義類，其中包括不折疊，透明背景和軟 - 基本 - radius。我們在site.css.
中定義了這些類>由於MailChimp代碼的大多數與我們從MailChimp複製的代碼相同，所以讓我們討論這些自定義類別的情況。
>不折疊的定義如下：
>它只是刪除了大膽的字母。這用於取消強調表單字段標籤。 我們的行動呼籲是大膽的。如果表單字段標籤也被粗體，則眼睛將努力弄清楚在哪裡聚焦。更糟糕的情況：人們只是放棄並繞過我們的註冊表格。
<span title="&"><!-- Begin MailChimp Signup Form --> </span><span title="&"><link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css"> </span><span title="&"><div id="mc_embed_signup" class="transparent-background soft-border-radius"> </span><span title="&"><form action="#" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> </span> <span title="&"><div id="mc_embed_signup_scroll"> </span> <span title="&"><h3>Enter your name and email for<br /> your first FREE lesson!</h3> </span> <span title="&"><div class="mc-field-group"> </span> <span title="&"><label for="mce-FNAME" class="not-bold">First Name </label> </span> <span title="&"><input type="text" value="" name="FNAME" class="transparent-background soft-border-radius" id="mce-FNAME"> </span> <span title="&"></div> </span> <span title="&"><div class="mc-field-group"> </span> <span title="&"><label for="mce-EMAIL" class="not-bold">Email </label> </span> <span title="&"><input type="email" value="" name="EMAIL" class="required email transparent-background soft-border-radius" id="mce-EMAIL"> </span> <span title="&"></div> </span> <span title="&"><div id="mce-responses" class="clear"> </span> <span title="&"><div class="response" id="mce-error-response" style="display:none"></div> </span> <span title="&"><div class="response" id="mce-success-response" style="display:none"></div> </span> <span title="&"></div> </span> <span title="&"><!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> </span> <span title="&"><div style="position: absolute; left: -5000px;"><input type="text" name="b_f27f671242f9376d66eb9034e_a5f924c1e8" tabindex="-1" value=""></div> </span> <span title="&"><input type="submit" class="btn btn-primary btn-lg" value="Subscribe" name="subscribe" /> </span> <span title="&"></div> </span> <span title="&"></form> </span><span title="&"></div> </span><span title="&"><!--End mc_embed_signup--></span>>
下面的屏幕截圖顯示了.Not-bold
的使用透明背景為形式背景和輸入字段提供了半透明度，為我們的設計提供了更深入的深度。它被定義為：
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="&"><p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p></span>
>將上面的類添加到site.cs.css和以上表單代碼中的粘貼應與上面顯示的相同的註冊表格。
>。謝謝您的頁面
>用戶註冊時，通常最好提供一個確認頁面，讓他們知道一切順利。您幾次註冊了某人的列表，只是被一個極其不想像的感謝頁面打招呼？
>創建感謝頁面，打開控制器/homecontroller.cs。添加以下內容：
因為這是一個MVC應用程序，所以當某人輸入 /home /Thenkyou時，它將達到上述方法。當然，我們不希望任何人輸入“感謝”頁面，因為這將作為註冊我們客戶的電子郵件列表的確認。
<span title="&"><!-- Begin MailChimp Signup Form --> </span><span title="&"><link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css"> </span><span title="&"><div id="mc_embed_signup" class="transparent-background soft-border-radius"> </span><span title="&"><form action="#" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> </span> <span title="&"><div id="mc_embed_signup_scroll"> </span> <span title="&"><h3>Enter your name and email for<br /> your first FREE lesson!</h3> </span> <span title="&"><div class="mc-field-group"> </span> <span title="&"><label for="mce-FNAME" class="not-bold">First Name </label> </span> <span title="&"><input type="text" value="" name="FNAME" class="transparent-background soft-border-radius" id="mce-FNAME"> </span> <span title="&"></div> </span> <span title="&"><div class="mc-field-group"> </span> <span title="&"><label for="mce-EMAIL" class="not-bold">Email </label> </span> <span title="&"><input type="email" value="" name="EMAIL" class="required email transparent-background soft-border-radius" id="mce-EMAIL"> </span> <span title="&"></div> </span> <span title="&"><div id="mce-responses" class="clear"> </span> <span title="&"><div class="response" id="mce-error-response" style="display:none"></div> </span> <span title="&"><div class="response" id="mce-success-response" style="display:none"></div> </span> <span title="&"></div> </span> <span title="&"><!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> </span> <span title="&"><div style="position: absolute; left: -5000px;"><input type="text" name="b_f27f671242f9376d66eb9034e_a5f924c1e8" tabindex="-1" value=""></div> </span> <span title="&"><input type="submit" class="btn btn-primary btn-lg" value="Subscribe" name="subscribe" /> </span> <span title="&"></div> </span> <span title="&"></form> </span><span title="&"></div> </span><span title="&"><!--End mc_embed_signup--></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定義為： 您的最終感謝頁面應該看起來如下：
>我們希望為潛在客戶提供直接通過他的網站與客戶聯繫的機會。這是聯繫頁面到達的地方。我們將遵循上述基本輪廓以創建聯繫頁面。我們的最後頁面看起來如下： >我們將介紹一些新的CSS課程，這也將影響我們的主頁。頭等艙是： 這是專門針對錶單底部的藍色按鈕。添加此類將創建一個更寬的按鈕，並在按鈕頂部和評論框的底部之間添加一點空間。我們還可以將此課程應用於主頁按鈕。 接下來是對現有類的修改： 對於此表格，我們將使用類似於MailChimp表單代碼的結構。但是，我們不會使用MailChimp的CSS，因為我們不使用其註冊表格。 > MailChimp CSS提供的一件事是圍繞輸入字段的較暗邊界。現在消失了。為了補償，我們正在添加軟 - 邊界 - 拉迪烏斯內部的邊框，這將產生相同的效果。
現在我們可以繼續使用表單代碼。 >您可能會注意到與MailChimp表格的一些相似之處。這實際上是該表單的修改版本。觸點表格位於左柱中，該左柱為Col-Md-8寬。由於我們的右列是Col-Md-4，因此可以創建一個2/3寬的列。請記住，8 4 = 12，這是在Bootstrap中組成我們的12列網格的列數。
>
<span><span>.transparent-background</span> {
</span> <span>background-color: <span>rgba(0, 0, 0, 0.25)</span>
</span><span>}</span>
>打開視圖/主頁，您會注意到已經有一個contact.cshtml。就像我們之前在“感謝”頁面上所做的那樣，除了頂部視圖包代碼外，清除所有內容。我們將再次使用Jumbotron。除了右側將是空的，我們將使用兩列。這使我們的觸點表格在左側更加對齊。
<span title="&"><p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p></span>
<span title="&"><!-- Begin MailChimp Signup Form -->
</span><span title="&"><link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">
</span><span title="&"><div id="mc_embed_signup" class="transparent-background soft-border-radius">
</span><span title="&"><form action="#" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
</span> <span title="&"><div id="mc_embed_signup_scroll">
</span> <span title="&"><h3>Enter your name and email for<br /> your first FREE lesson!</h3>
</span>
<span title="&"><div class="mc-field-group">
</span> <span title="&"><label for="mce-FNAME" class="not-bold">First Name </label>
</span> <span title="&"><input type="text" value="" name="FNAME" class="transparent-background soft-border-radius" id="mce-FNAME">
</span> <span title="&"></div>
</span> <span title="&"><div class="mc-field-group">
</span> <span title="&"><label for="mce-EMAIL" class="not-bold">Email </label>
</span> <span title="&"><input type="email" value="" name="EMAIL" class="required email transparent-background soft-border-radius" id="mce-EMAIL">
</span> <span title="&"></div>
</span>
<span title="&"><div id="mce-responses" class="clear">
</span> <span title="&"><div class="response" id="mce-error-response" style="display:none"></div>
</span> <span title="&"><div class="response" id="mce-success-response" style="display:none"></div>
</span> <span title="&"></div>
</span> <span title="&"><!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
</span> <span title="&"><div style="position: absolute; left: -5000px;"><input type="text" name="b_f27f671242f9376d66eb9034e_a5f924c1e8" tabindex="-1" value=""></div>
</span>
<span title="&"><input type="submit" class="btn btn-primary btn-lg" value="Subscribe" name="subscribe" />
</span>
<span title="&"></div>
</span> <span title="&"></form>
</span><span title="&"></div>
</span><span title="&"><!--End mc_embed_signup--></span>
<span><span>.not-bold</span> {
</span> <span>font-weight:normal;
</span><span>}</span>
<span><span>.soft-border-radius</span> {
</span> <span>border-radius: 10px;
</span><span>}</span>
>
以上是Visual Studio社區2015：添加電子郵件和聯繫頁面的詳細內容。更多資訊請關注PHP中文網其他相關文章！
使用GO構建網絡漏洞掃描儀Apr 01, 2025 am 08:27 AM此基於GO的網絡漏洞掃描儀有效地確定了潛在的安全弱點。 它利用了GO的並發功能的速度功能，包括服務檢測和漏洞匹配。讓我們探索它的能力和道德
2025年最佳10個最佳免費反向鏈接檢查器工具Mar 21, 2025 am 08:28 AM網站建設只是第一步：SEO與反向鏈接的重要性 建立網站只是將其轉化為寶貴營銷資產的第一步。您需要進行SEO優化，以提高網站在搜索引擎中的可見度，吸引潛在客戶。反向鏈接是提升網站排名的關鍵，它向谷歌和其他搜索引擎表明您的網站權威性和可信度。 並非所有反向鏈接都有利：識別並避免有害鏈接 並非所有反向鏈接都有益。有害鏈接會損害您的排名。優秀的免費反向鏈接檢查工具可以監控鏈接到您網站的來源，並提醒您注意有害鏈接。此外，您還可以分析競爭對手的鏈接策略，從中學習借鑒。 免費反向鏈接檢查工具：您的SEO情報員
百度又一國民產品接入DeepSeek，是想開了還是跟風？Mar 12, 2025 pm 01:48 PMDeepSeek-R1賦能百度文庫與網盤：深度思考與行動的完美融合短短一個月內，DeepSeek-R1已迅速融入眾多平台。百度憑藉大膽的戰略佈局，將DeepSeek作為第三方模型夥伴，整合進自身生態系統，這標誌著其“大模型 搜索”生態戰略的重大進展。百度搜索和文心智能體平台率先接入DeepSeek及文心大模型的深度搜索功能，為用戶提供免費的AI搜索體驗。同時，“百度一下，你就知道”的經典slogan回歸，新版百度APP也整合了文心大模型和DeepSeek的能力，推出“AI搜索”、“全網信息提煉”
安卓首家接入DeepSeek背後：看見女性力量Mar 12, 2025 pm 12:27 PM中国女性科技力量在AI领域的崛起：荣耀与DeepSeek合作背后的女性故事女性在科技领域的贡献日益显著。中国科技部数据显示，女性科技工作者数量庞大，在AI算法开发中展现出独特的社会价值敏感性。本文将聚焦荣耀手机，探究其率先接入DeepSeek大模型背后的女性团队力量，展现她们如何推动科技进步，重塑科技发展价值坐标系。2024年2月8日，荣耀正式上线DeepSeek-R1满血版大模型，成为安卓阵营首家接入DeepSeek的厂商，引发用户热烈反响。这一成功背后，女性团队成员在产品决策、技术攻坚和用户
DeepSeek'驚人”盈利：理論利潤率高達545%！Mar 12, 2025 pm 12:21 PMDeepSeek公司在知乎發布技術文章，詳細介紹了其DeepSeek-V3/R1推理系統，並首次公開關鍵財務數據，引發業界關注。文章顯示，該系統單日成本利潤率高達545%，創下全球AI大模型盈利新高。 DeepSeek的低成本策略使其在市場競爭中佔據優勢。其模型訓練成本僅為同類產品的1%-5%，V3模型訓練成本僅為557.6萬美元，遠低於競爭對手。同時，R1的API定價僅為OpenAIo3-mini的1/7至1/2。這些數據證明了DeepSeek技術路線的商業可行性，也為AI大模型的高效盈利樹立了
美的推出首款DeepSeek空調：AI語音交互 可實現40萬 條指令！Mar 12, 2025 pm 12:18 PM美的即将发布搭载DeepSeek大模型的首款空调——美的鲜净感空气机T6，发布会定于3月1日下午1点30分举行。这款空调配备先进的空气智驾系统，可根据环境智能调节温度、湿度和风速等参数。更重要的是，它集成了DeepSeek大模型，支持超过40万条AI语音指令。美的此举引发业界热议，尤其关注白电产品与大模型结合的意义。不同于传统空调简单的温度设定，美的鲜净感空气机T6能够理解更复杂、更模糊的指令，并根据家庭环境智能调节湿度等，显著提升用户体验。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
Dreamweaver CS6
視覺化網頁開發工具
SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合，這些清單在安全評估過程中經常使用，而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表，幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上，他就可以存取所需的每種類型的清單。
PhpStorm Mac 版本
最新（2018.2.1 ）專業的PHP整合開發工具
ZendStudio 13.5.1 Mac
強大的PHP整合開發環境
SublimeText3 Linux新版
SublimeText3 Linux最新版
