|
实现百度输入框和按钮的样式
实现百度输入框和按钮的样式
现在把代码张贴出来,以便大家参考
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Half Circle Input</title>
- <style>
- .half-circle-input {
- display: flex;
- align-items: stretch;
- }
- .half-circle-input input {
- /*flex: 1;*/ /*打开这里,实现随页面自由大小*/
- width: 500px;
- height: 40px;
- border: 1px solid #259af1;
- border-radius: 10px 0 0 10px;
- padding: 0 10px;
- outline: none;
- }
- .half-circle-input button {
- width: 120px;
- height: 40px;
- color: #ffffff;
- border: 1px solid #259af1;
- border-radius: 0 10px 10px 0;
- background-color: #259af1;
- cursor: pointer;
- }
- </style>
- </head>
- <body>
- <div class="half-circle-input">
- <input type="text" placeholder="Enter text">
- <button>百度一下</button>
- </div>
- </body>
- </html>
复制代码
|
|