简单的企业网站HTML源代码模板。该模板包括基本的HTML结构、导航菜单、首页内容、关于我们页面、服务页面和联系方式页面。
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>© 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(“感谢您的留言！”); }); });
这个模板是一个基础的企业网站结构，可以根据需要进行扩展和修改。希望这对你有所帮助！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
