从0到1：用HTML、CSS和JavaScript构建经典案例

从0到1：用HTML、CSS和JavaScript构建经典案例

一、案例目标

本案例旨在通过构建一个简单的新闻网站，使读者从零开始学习并掌握HTML、CSS和JavaScript三大前端技术。通过实践，读者将能够熟悉网页的基本结构、样式设计和交互功能。

二、案例内容

HTML结构搭建
首先，我们需要使用HTML来搭建网页的基本结构。以下是一个简单的新闻网站的HTML框架：

html
  
  
  
      
      
      
  
  
    
  
        
新闻网站
  
    
  
    
  
        
  
            
首页
  
            
国内新闻
  
            
国际新闻
  
            
体育新闻
  
            
娱乐新闻
  
        
  
    
  
    
  
        
  
            
最新新闻
  
            
  
                
新闻标题
  
                
新闻内容...
  
            
  
              
        
  
    
  
    
  
        
版权信息...
  
    
  
      
  

CSS样式设计

接下来，我们使用CSS为网页添加样式。以下是一个简单的样式设计：

css
/* styles.css */  
body {  
    font-family: Arial, sans-serif;  
    margin: 0;  
    padding: 0;  
}  
  
header {  
    background-color: #333;  
    color: #fff;  
    padding: 20px;  
    text-align: center;  
}  
  
nav ul {  
    list-style-type: none;  
    margin: 0;  
    padding: 0;  
    background-color: #f4f4f4;  
}  
  
nav ul li {  
    display: inline;  
}  
  
nav ul li a {  
    display: inline-block;  
    padding: 10px 20px;  
    text-decoration: none;  
    color: #333;  
}  
  
main {  
    padding: 20px;  
}  
  
footer {  
    background-color: #333;  
    color: #fff;  
    text-align: center;  
    padding: 10px;  
    position: fixed;  
    bottom: 0;  
    width: 100%;  
}

JavaScript交互功能

最后，我们使用JavaScript为网页添加交互功能。以下是一个简单的点击导航链接时改变页面标题的示例：

javascript
// script.js  
document.querySelectorAll('nav ul li a').forEach(function(link) {  
    link.addEventListener('click', function(event) {  
        event.preventDefault(); // 阻止链接的默认行为（跳转到新页面）  
        var pageTitle = this.textContent; // 获取链接的文本内容作为页面标题  
        document.title = pageTitle; // 设置页面标题  
    });  
});

三、案例总结

通过本案例，读者学习了如何使用HTML搭建网页的基本结构，使用CSS设计网页样式，以及使用JavaScript为网页添加交互功能。这是一个简单的新闻网站案例，但它涵盖了前端开发的三大核心技术。通过不断学习和实践，读者可以逐渐掌握更多的前端技术，为构建更复杂的网站和应用打下基础。