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

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

我们会用到<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以及其他的相反偏向。小同伴们看明确了吗？快去动手试试吧。

本文关键词：爱游戏最新app官方下载,css,实现,网页,尺度,搜索,框,爱,游戏,最新,app

本文来源：爱游戏最新app官方下载-www.mccaee.com