首页html+css制作饭店主页面的代码

html+css制作饭店主页面的代码

时间: 2024-10-20 15:04:15 浏览: 14

HTML (HyperText Markup Language) 和 CSS (Cascading Style Sheets) 结合可以用来创建网页的基本结构和样式。以下是一个简单的例子，展示如何使用它们来制作一个餐厅主页的布局： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>餐厅主页</title> <link rel="stylesheet" type="text/css" href="styles.css">  </head> <body> <header> <nav> <ul> <li><a href="#home">首页</a></li> <li><a href="#菜单">菜单</a></li> <li><a href="#预订">预订</a></li> <li><a href="#联系我们">联系我们</a></li> </ul> </nav> </header> <main id="home"> <h1>欢迎来到美味之家餐厅</h1> <p>我们提供各类地道美食...</p> </main> <section id="菜单"> <h2>特色菜品</h2>  </section> <footer> <p>© 2023 美味之家餐厅 | All Rights Reserved.</p> </footer> </body> </html> ``` 接下来，你可以创建一个名为`styles.css`的文件，用于设置页面的样式： ```css /* styles.css */ body { font-family: Arial, sans-serif; } header { background-color: #f5f5f5; padding: 20px; } nav ul { list-style-type: none; margin: 0; padding: 0; display: flex; } nav li { margin-right: 20px; } nav a { text-decoration: none; color: black; } #menu h2 { color: #333; } footer { background-color: #333; color: white; text-align: center; padding: 10px 0; } ``` 这个例子包含了一个基本的导航栏、主页信息区域、特色菜单部分以及页脚。你可以根据实际需求调整样式和内容。

阅读全文