首页用js制作一个新闻网页

用js制作一个新闻网页

时间: 2024-11-13 14:18:12 浏览: 12

在JavaScript中创建一个简单的新闻网页，你可以通过HTML、CSS和JavaScript相结合来实现。以下是基本步骤： 1. **HTML结构**: ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>新闻网站</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>新闻标题</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">国内新闻</a></li> <li><a href="#">国际新闻</a></li> <li><a href="#">科技新闻</a></li> </ul> </nav> </header> <main id="news-container"> <section class="news-item"> <h2>新闻标题1</h2> <p>新闻内容...</p> </section>  </main> <footer> <p>© 2023 新闻网 | All rights reserved.</p> </footer> <script src="scripts.js"></script> </body> </html> ``` 2. **CSS样式** (styles.css) 加一些基本的布局和美化效果： ```css * { box-sizing: border-box; } body { font-family: Arial, sans-serif; } header { background-color: #f1f1f1; } .news-item { margin-bottom: 20px; } ``` 3. **JavaScript交互** (scripts.js) 可以添加轮播、动态加载新闻等功能： ```javascript document.addEventListener('DOMContentLoaded', function() { // 假设有一个新闻列表 const newsList = document.querySelectorAll('.news-item'); // 每隔5秒切换第一个新闻 setInterval(() => { let firstNews = newsList.firstElementChild; if (!firstNews) return; newsList.insertBefore(firstNews.cloneNode(true), newsList.lastElementChild); newsList.removeChild(firstNews); }, 5000); }); ```

阅读全文