首页仿写重庆电信职业学院首页官网代码用 HTML➕CSS 写

仿写重庆电信职业学院首页官网代码用 HTML➕CSS 写

时间: 2024-10-13 15:05:46 浏览: 27

创建一个简单的仿写重庆电信职业学院首页的HTML和CSS代码示例，我们会构建一个基本的结构和样式框架，实际网站设计会更复杂，包括响应式布局和内容加载等。这里仅提供基础布局： ```html <!DOCTYPE html> <html lang="zh"> <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> <nav> <ul class="menu"> <li><a href="#home">首页</a></li> <li><a href="#about">关于我们</a></li> <li><a href="#courses">课程介绍</a></li> <li><a href="#contact">联系我们</a></li> </ul> </nav> </header> <main> <section id="home"> <h1 class="title">欢迎来到重庆电信职业学院</h1> <p>这里是学校的主要信息展示区...</p> </section> <section id="about"> <h2>About Us</h2> <p>详细介绍学校的概况...</p> </section>  </main> <footer> <div class="footer-links"> <p>© 2023 重庆电信职业学院 - 版权所有</p> </div> </footer> </body> </html> ``` ```css /* styles.css */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: Arial, sans-serif; } header { background-color: #f5f5f5; padding: 20px; } nav ul { list-style-type: none; display: flex; } nav li a { color: #333; text-decoration: none; padding: 10px 20px; } nav li a:hover { background-color: #e0e0e0; } main { max-width: 960px; margin: auto; padding: 20px; } #home { background-image: url("cover.jpg"); /* 需要替换为真实图片路径 */ height: 400px; overflow: hidden; background-size: cover; } .title { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; text-align: center; } ```

阅读全文