首页html+css+js网页制作成品

html+css+js网页制作成品

时间: 2023-11-20 10:59:12 浏览: 411

以下是一个简单的HTML+CSS+JS网页制作成品的示例： HTML文件（index.html）： ```html <!DOCTYPE html> <html> <head> <title>My Website</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <h1>Welcome to My Website</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> </header> <main> <section> <h2>About Us</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, diam eget bibendum bibendum, velit elit ultricies leo, vel bibendum sapien sapien nec sapien. Sed euismod, diam eget bibendum bibendum, velit elit ultricies leo, vel bibendum sapien sapien nec sapien.</p> </section> <section> <h2>Our Services</h2> <ul> <li>Service 1</li> <li>Service 2</li> <li>Service 3</li> </ul> </section> </main> <footer> <p>© 2021 My Website</p> </footer> <script src="script.js"></script> </body> </html> ``` CSS文件（style.css）： ```css body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 20px; } nav ul { list-style: none; margin: 0; padding: 0; } nav li { display: inline-block; margin-right: 20px; } nav a { color: #fff; text-decoration: none; } main { padding: 20px; } section { margin-bottom: 20px; } h2 { color: #333; } footer { background-color: #333; color: #fff; padding: 20px; text-align: center; } ``` JS文件（script.js）： ```javascript // 点击导航栏链接时滚动到相应的部分 document.querySelectorAll('nav a').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' }); }); }); ```

阅读全文