新闻资讯

css实现网页尺度搜索框‘od体育注册网址’

2021-06-10 03:03:02 [返回列表]
本文摘要:今天给大家带来一种尺度化的椭圆形的搜索框,话不多说,直接放图。

今天给大家带来一种尺度化的椭圆形的搜索框,话不多说,直接放图。我相信大家在许多网页上一定见过这种搜索框,那么这种搜索框到底是怎么做的呢?不要着急,听我逐步给您讲来。

od体育

我们会用到标签来构建最基本的搜索框架构,用到标签实现后面的搜全网的搜索按钮。详细的html的代码很简朴。

搜全网3. 下来就是用css来美化它了。这里我们会用到boder元素。4. 话不多说直接放代码。

.message{position:absolute; left: 600px;top: 16px;} .input{width: 300px;height: 50px;font-size: 15px;padding-left: 20px;border: 1px solid #DCDCDC;border-top-left-radius: 25px;border-bottom-left-radius: 25px;background-color: #F5F5F5;}.input:focus{border-color: #FA8072;outline: none;color: #FA8072; }.search{position:absolute; left: 900px;top: 15.5px;width: 90px;height: 49.3px;border: 1px solid #DCDCDC;border-top-right-radius: 25px;border-bottom-right-radius: 25px;font-size: 16px;text-align: center;line-height: 48px;color: #FFFFFF;background-color: #FA8072;text-decoration: none;}.search:hover{background-color: #F08080;}5. 在css代码中有一个关键的属性,那就是border-top-left-radius和border-bottom-right-radius以及其他的相反偏向。小同伴们看明确了吗?快去动手试试吧。


本文关键词:od体育,od体育注册,od体育注册网址

本文来源:od体育-www.hzjiada.com

×