HTML实现：左边logo右边按钮的标题栏代码详解

以下是一个简单的HTML代码，实现了一个栏，左边是logo，右边是按钮： ```html <!DOCTYPE html> <html> <head> <title>栏</title> <style> .header { display: flex; align-items: center; justify-content: space-between; padding: 10px; background-color: #f3f3f3; } .logo { width: 50px; height: 50px; background-color: #ddd; } .btn { padding: 10px 20px; background-color: #4caf50; color: #fff; text-decoration: none; } </style> </head> <body> <div class="header"> <div class="logo"></div> <a href="#" class="btn">按钮</a> </div> </body> </html> ``` 在 `style` 标签中，我们定义了名为 `header` 的样式类来设置栏的样式，其中 `display: flex` 属性用于使其内部元素水平排列。`logo` 类定义了 logo 的样式，设置了宽度、高度和颜色。`btn` 类定义了按钮的样式，设置了内边距、颜色、文字颜色和去除了下划线。在 `body` 中，我们使用 `header` 类作为栏的容器，内部包含一个具有 `logo` 类的 `div` 元素作为 logo，以及一个具有 `btn` 类的 `a` 元素作为按钮。你可以根据你的需求，更改相应的样式和内容。 ######[AI写代码神器 | 783点数解答 | 2024-06-15 21:10:00]

服务商

更多选项

快捷项

自定义