首页模仿OPPO官网代码html+css代码

模仿OPPO官网代码html+css代码

时间: 2024-12-11 19:13:17 浏览: 13

OPPO官网的HTML和CSS代码通常会包含响应式设计和品牌元素，下面是一个简单的例子，展示了如何创建一个基本的导航栏样式： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>OPPO 官网样例</title> <link rel="stylesheet" href="styles.css">  </head> <body> <header class="oppo-header"> <div class="logo"><img src="oppo-logo.png" alt="OPPO Logo"></div> <nav class="main-navigation"> <ul> <li><a href="#">首页</a></li> <li><a href="#">产品</a></li> <li><a href="#">服务</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> </header> </body> </html> ``` 对应的CSS代码可能会像这样： ```css /* styles.css */ .oppo-header { background-color: #f5f5f5; padding: 1rem; display: flex; justify-content: space-between; } .logo img { height: auto; max-width: 150px; } .main-navigation ul { list-style-type: none; display: flex; } .main-navigation li a { color: #333; text-decoration: none; margin-right: 20px; } @media (max-width: 768px) { /* 对于小屏幕设备调整样式 */ .main-navigation ul { flex-direction: column; } } ```

阅读全文