簡(jiǎn)單的企業(yè)網(wǎng)站HTML源代碼模板。該模板包括基本的HTML結(jié)構(gòu)、導(dǎo)航菜單、首頁(yè)內(nèi)容、關(guān)于我們頁(yè)面、服務(wù)頁(yè)面和聯(lián)系方式頁(yè)面。
html復(fù)制代碼
<html lang=“zh-CN”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <title>企業(yè)名稱</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>企業(yè)名稱</h1> <nav> <ul> <li><a href=“#home”>首頁(yè)</a></li> <li><a href=“#about”>關(guān)于我們</a></li> <li><a href=“#services”>服務(wù)</a></li> <li><a href=“#contact”>聯(lián)系我們</a></li> </ul> </nav> </div> </header> <!– Home Section –> <section id=“home”> <div class=“container”> <h2>歡迎來(lái)到企業(yè)名稱</h2> <p>這里是一段簡(jiǎn)短的介紹文字。</p> </div> </section> <!– About Us Section –> <section id=“about”> <div class=“container”> <h2>關(guān)于我們</h2> <p>這里是關(guān)于企業(yè)的詳細(xì)介紹。</p> </div> </section> <!– Services Section –> <section id=“services”> <div class=“container”> <h2>我們的服務(wù)</h2> <div class=“service”> <h3>服務(wù)一</h3> <p>這是服務(wù)一的詳細(xì)描述。</p> </div> <div class=“service”> <h3>服務(wù)二</h3> <p>這是服務(wù)二的詳細(xì)描述。</p> </div> <div class=“service”> <h3>服務(wù)三</h3> <p>這是服務(wù)三的詳細(xì)描述。</p> </div> </div> </section> <!– Contact Section –> <section id=“contact”> <div class=“container”> <h2>聯(lián)系我們</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”>發(fā)送</button> </form> </div> </section> <!– Footer –> <footer> <p>© 2023 企業(yè)名稱. 保留所有權(quán)利。</p> </footer> </body> </html>
樣式 (styles.css) 示例：
css復(fù)制代碼
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復(fù)制代碼
$(document).ready(function() { // 表單提交事件處理程序 $(“#contactForm”).on(“submit”, function(event) { event.preventDefault(); // 阻止默認(rèn)行為 alert(“感謝您的留言！”); }); });
這個(gè)模板是一個(gè)基礎(chǔ)的企業(yè)網(wǎng)站結(jié)構(gòu)，可以根據(jù)需要進(jìn)行擴(kuò)展和修改。希望這對(duì)你有所幫助！
聲明：本站所有文章，如無(wú)特殊說(shuō)明或標(biāo)注，均為本站原創(chuàng)發(fā)布。任何個(gè)人或組織，在未征得本站同意時(shí)，禁止復(fù)制、盜用、采集、發(fā)布本站內(nèi)容到任何網(wǎng)站、書籍等各類媒體平臺(tái)。如若本站內(nèi)容侵犯了原著者的合法權(quán)益，可聯(lián)系我們進(jìn)行處理。
