首页用html+css制作一个苹果公司和其产品的介绍网页

用html+css制作一个苹果公司和其产品的介绍网页

时间: 2024-10-08 19:21:00 浏览: 37

创建一个关于苹果公司及其产品的HTML+CSS网页，首先需要基本的HTML结构来布局内容，然后利用CSS进行样式设计。下面是一个简单的步骤描述： 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> <img src="apple-logo.png" alt="Apple Logo"> </header>  <main> <section class="company-intro"> <h2>简介</h2> <p>苹果是一家全球领先的科技公司，以其创新的产品和卓越的设计而闻名。</p> </section>  <section class="products"> <h2>热门产品</h2> <ul> <li> <a href="#iPhone">iPhone</a> - 简洁的设计与强大的功能结合 </li> <li> <a href="#MacBook">MacBook</a> - 高性能轻薄笔记本电脑 </li> <li> <a href="#iPad">iPad</a> - 平板电脑市场领导者 </li> </ul> </section> </main>  <div id="product-detail"> <button>查看详细产品介绍</button> </div> </body> </html> ``` 2. **CSS样式** (styles.css): ```css body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #F5F5F5; padding: 1rem; } img { max-width: 100%; height: auto; } .company-intro { text-align: center; } .products ul { list-style-type: none; padding: 0; } .products li a { display: block; color: black; padding: 1rem; text-decoration: none; } .product-detail button { display: block; width: 100%; padding: 0.5rem 1rem; background-color: dodgerblue; color: white; text-align: center; cursor: pointer; } ```

阅读全文