html网站设计代码 html制作一个网站代码
创建一个HTML网站需要使用HTML(超文本标记语言)、CSS(层叠样式表)和JavaScript等技术,以下是一个简单的HTML网站设计代码示例,包括基本的HTML结构、CSS样式和一些JavaScript交互,这个示例网站将展示一个简单的个人博客页面。
1、HTML结构 (index.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"> </head> <body> <header> <h1>我的个人博客</h1> <nav> <ul> <li><a href="#about">关于我</a></li> <li><a href="#posts">文章</a></li> <li><a href="#contact">联系方式</a></li> </ul> </nav> </header> <section id="about"> <h2>关于我</h2> <p>欢迎来到我的个人博客,这里记录了我的学习心得和生活点滴。</p> </section> <section id="posts"> <h2>文章</h2> <article> <h3>文章标题1</h3> <p>这是第一篇文章的内容。</p> </article> <article> <h3>文章标题2</h3> <p>这是第二篇文章的内容。</p> </article> </section> <section id="contact"> <h2>联系方式</h2> <p>邮箱:example@example.com</p> </section> <footer> <p>© 2023 我的个人博客</p> </footer> <script src="scripts.js"></script> </body> </html>
2、CSS样式 (styles.css
)
body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0; } header { background: #333; color: #fff; padding: 20px 0; text-align: center; } header h1 { margin: 0; } nav ul { list-style: none; text-align: center; } nav ul li { display: inline; margin-right: 20px; } nav ul li a { color: #fff; text-decoration: none; } section { margin: 15px 0; padding: 15px; border: 1px solid #ddd; } article { margin-bottom: 20px; } footer { background: #333; color: #fff; text-align: center; padding: 10px 0; position: absolute; bottom: 0; width: 100%; }
3、JavaScript交互 (scripts.js
)
document.addEventListener('DOMContentLoaded', () => { const navLinks = document.querySelectorAll('nav ul li a'); navLinks.forEach(link => { link.addEventListener('click', (e) => { e.preventDefault(); const targetId = link.getAttribute('href'); const targetElement = document.querySelector(targetId); window.scrollTo({ top: targetElement.offsetTop - 70, // 70px是header的高度 behavior: 'smooth' }); }); }); });
这个示例展示了一个简单的个人博客页面,包括头部、文章列表和联系方式,CSS用于设置页面的样式,JavaScript用于实现平滑滚动效果,你可以根据需要添加更多的内容和功能,比如图片、视频、评论系统等。
The End
还没有评论,来说两句吧...