當前位置：
  1. 首頁
  2. 知識學院
  3. 正文

簡單的企業網站HTML源代碼模板。該模板包括基本的HTML結構、導航菜單、首頁內容、關于我們頁面、服務頁面和聯系方式頁面。

html復制代碼
<!DOCTYPE html> <html lang=“zh-CN”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <title>企業名稱</title> <link rel=“stylesheet” href=“styles.css”> <script src=“https://code.jquery.com/jquery-3.6.0.min.js”></script> <script src=“scripts.js”></script> </head> <body> <!– Header –> <header> <div class=“container”> <h1>企業名稱</h1> <nav> <ul> <li><a href=“#home”>首頁</a></li> <li><a href=“#about”>關于我們</a></li> <li><a href=“#services”>服務</a></li> <li><a href=“#contact”>聯系我們</a></li> </ul> </nav> </div> </header> <!– Home Section –> <section id=“home”> <div class=“container”> <h2>歡迎來到企業名稱</h2> <p>這里是一段簡短的介紹文字。</p> </div> </section> <!– About Us Section –> <section id=“about”> <div class=“container”> <h2>關于我們</h2> <p>這里是關于企業的詳細介紹。</p> </div> </section> <!– Services Section –> <section id=“services”> <div class=“container”> <h2>我們的服務</h2> <div class=“service”> <h3>服務一</h3> <p>這是服務一的詳細描述。</p> </div> <div class=“service”> <h3>服務二</h3> <p>這是服務二的詳細描述。</p> </div> <div class=“service”> <h3>服務三</h3> <p>這是服務三的詳細描述。</p> </div> </div> </section> <!– Contact Section –> <section id=“contact”> <div class=“container”> <h2>聯系我們</h2> <form id=“contactForm”> <label for=“name”>姓名:</label> <input type=“text” id=“name” name=“name” required> <br> <label for=“email”>郵箱:</label> <input type=“email” id=“email” name=“email” required> <br> <label for=“message”>留言:</label> <textarea id=“message” name=“message” rows=“5” required></textarea> <br> <button type=“submit”>發送</button> </form> </div> </section> <!– Footer –> <footer> <p>&copy; 2023 企業名稱. 保留所有權利。</p> </footer> </body> </html>

樣式 (styles.css) 示例：

css復制代碼
body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; } .container { width: 80%; margin: auto; overflow: hidden; } header { background: #333; color: #fff; padding-top: 30px; min-height: 70px; border-bottom: #77aaff 3px solid; } header h1 { float: left; margin-top: 0; } header nav { float: right; margin-top: 10px; } header nav ul { margin: 0; padding: 0; } header nav ul li { display: inline; } header nav ul li a { color: white; text-decoration: none; padding: 10px 15px; } section { padding: 20px 0; } footer { background: #333; color: #fff; text-align: center; padding: 10px; margin-top: 20px; }

JavaScript (scripts.js) 示例：

javascript復制代碼
$(document).ready(function() { // 表單提交事件處理程序 $(“#contactForm”).on(“submit”, function(event) { event.preventDefault(); // 阻止默認行為 alert(“感謝您的留言！”); }); });

這個模板是一個基礎的企業網站結構，可以根據需要進行擴展和修改。希望這對你有所幫助！