腾讯网首页搜索框案例css代码
时间: 2023-12-19 10:02:15 浏览: 41
腾讯网首页搜索框案例的CSS代码如下:
```css
.search-box {
width: 300px;
height: 40px;
background-color: #f5f5f5;
border-radius: 20px;
display: flex;
align-items: center;
padding: 0 10px;
}
.search-box input {
flex: 1;
border: none;
outline: none;
background-color: transparent;
margin-left: 10px;
font-size: 14px;
color: #333;
}
.search-box input::placeholder {
color: #aaa;
}
.search-box button {
border: none;
outline: none;
background-color: transparent;
cursor: pointer;
}
.search-box button img {
width: 18px;
height: 18px;
}
```
以上是腾讯网首页搜索框案例的CSS代码。首先,搜索框的容器使用了类名为`search-box`的div元素,并设置了宽度、高度、背景颜色、边框半径、内边距等属性。然后,在搜索框容器中,使用了一个input元素作为输入框,并设置了宽度、边框、外边距、字体大小、颜色等属性。输入框的placeholder文字样式设置为浅灰色。接下来,使用了一个button元素作为搜索按钮,设置了边框、背景颜色、鼠标指针等属性。按钮中使用了一个img元素作为按钮图标,设置了宽度和高度。以上是腾讯网首页搜索框案例的CSS代码。