首页HBUILDER设置搜索框的按钮的代码

HBUILDER设置搜索框的按钮的代码

时间: 2023-12-17 12:03:54 浏览: 183

在HBuilder中，你可以使用以下代码来设置搜索框的按钮： ```html <!DOCTYPE html> <html> <head> <title>搜索框按钮示例</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .search-container { display: flex; /* 父容器设置为弹性布局 */ align-items: center; /* 垂直居中对齐 */ justify-content: center; /* 水平居中对齐 */ } .search-input { width: 200px; /* 输入框宽度 */ padding: 8px; /* 输入框内边距 */ border: 1px solid #ccc; /* 输入框边框 */ border-radius: 4px; /* 输入框圆角 */ font-size: 16px; /* 输入框字体大小 */ margin-right: 4px; /* 输入框与按钮之间的间距 */ } .search-btn { padding: 8px 16px; /* 按钮内边距 */ border: none; /* 按钮边框 */ border-radius: 4px; /* 按钮圆角 */ background-color: #007bff; /* 按钮背景色 */ color: #fff; /* 按钮文字颜色 */ font-size: 16px; /* 按钮字体大小 */ cursor: pointer; /* 鼠标悬停样式 */ } </style> </head> <body> <div class="search-container"> <input type="text" class="search-input" placeholder="输入关键词"> <button class="search-btn">搜索</button> </div> </body> </html> ``` 上面的代码中，我们使用了flex布局来让输入框和按钮在同一行。输入框和按钮的样式都可以根据自己的需要进行修改，这里只是提供了一个基本的示例。

阅读全文