黄金城游戏网站网址多少:css实现网页尺度搜索框

日期:2021-07-07 00:13:01 | 人气: 30932

黄金城游戏网站网址多少:css实现网页尺度搜索框 本文摘要:今天给大家带来一种尺度化的椭圆形的搜索框,话不多说,直接放图。

今天给大家带来一种尺度化的椭圆形的搜索框,话不多说,直接放图。我相信大家在许多网页上一定见过这种搜索框,那么这种搜索框到底是怎么做的呢?不要着急,听我逐步给您讲来。我们会用到<input>标签来构建最基本的搜索框架构,用到<a>标签实现后面的搜全网的搜索按钮。

黄金城游戏网站网址多少

黄金城游戏网站网址多少

黄金城游戏网站网址多少

详细的html的代码很简朴。<form class="message"><input type="text" name="sousuo" class="input" placeholder="冬瓜搜索"/> </form> <a href="#" class="search">搜全网</a>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以及其他的相反偏向。小同伴们看明确了吗?快去动手试试吧。

黄金城游戏网站网址多少


本文关键词:黄金城游戏网站网址多少

本文来源:黄金城游戏网站网址多少-www.frshone.net

产品中心