首页模仿百度搜索框的颜色和圆角

模仿百度搜索框的颜色和圆角

时间: 2024-09-23 08:05:00 浏览: 47

如果你想模仿百度搜索框的颜色和圆角设计，可以调整HTML和CSS代码中的样式属性。这里是一个示例，展示了如何更改背景色、前景色以及添加圆角效果： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>百度搜索框模仿</title> <style> .search-container { width: 400px; margin: auto; padding: 20px; border-radius: 8px; /* 添加圆角 */ background-color: #f1f1f1; /* 百度搜索框的浅灰色背景 */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */ } input[type="text"], button { width: 100%; height: 40px; padding: 10px 20px; /* 扩大内部填充 */ font-size: 16px; border: none; border-radius: 8px; /* 输入框和按钮也有圆角 */ outline: none; } input[type="text"] { box-shadow: none; /* 去除输入框的内阴影 */ color: #666; /* 黑色文字 */ } button { background-color: #0095DD; /* 百度搜索按钮蓝色 */ color: white; cursor: pointer; transition: background-color 0.3s ease-in-out; /* 添加渐变动画 */ } button:hover { background-color: #0077CC; /* 鼠标悬停时颜色变化 */ } </style> </head> <body>  </body> </html> ``` 在这个样例中，我们给`.search-container`添加了圆角和阴影，同时改变了输入框和按钮的背景颜色、文字颜色以及鼠标悬停时的效果。这样就更接近百度搜索框的设计风格。

阅读全文