CSS样式是网页设计中的重要组成部分,搜索框通常也是网页上必不可少的一个元素。那么,如何在CSS中制作一个简单却实用的搜索框呢?下面介绍一些实用的CSS代码。/*HTML代码*/ <fo
CSS样式是网页设计中的重要组成部分,搜索框通常也是网页上必不可少的一个元素。那么,如何在CSS中制作一个简单却实用的搜索框呢?下面介绍一些实用的CSS代码。
/*HTML代码*/ <form action="#"> <input type="text" name="search" placeholder="请输入搜索内容"> <button>搜索</button> </form> /*CSS代码*/ /*搜索框样式*/ input[type="text"] { padding: 10px; font-size: 16px; border: none; border-radius: 5px; box-shadow: 0 2px 2px rgba(0,0,0,0.2); } /*搜索按钮样式*/ button { padding: 10px 20px; background: #4CAF50; border: none; color: #FFF; border-radius: 5px; cursor: pointer; } /*鼠标悬停在搜索按钮上的效果*/ button:hover { background: #3e8e41; } /*搜索框及按钮的布局*/ form { display: flex; flex-wrap: wrap; } input[type="text"], button { flex: 1; margin-right: 10px; margin-bottom: 10px; } button { flex: 0; }
上面的代码中,HTML代码中的form包含一个文本框和一个按钮,CSS代码中对这些元素进行了样式的设置,包括文本框的边框、背景、圆角、阴影等;按钮的背景色、边框、颜色、圆角以及悬停时的背景色等。而搜索框及按钮的布局则是使用了flexbox布局,通过设置flex属性和margin属性控制元素之间的间距和宽度。
在实际的网页设计中,搜索框可能还需要根据需求进行一些额外的样式调整,比如背景图案、动态效果、响应式等等。但是,以上代码提供了一个制作简单实用的搜索框的基本思路和方法,读者可以在此基础上进行更加丰富多彩的创意实现。
粉丝
0
关注
0
收藏
0