仿京东搜索栏

来源：互联网发布：ubuntu python3 pyqt5 编辑：程序博客网时间：2024/06/16 21:26

最近经常会见到类似京东首页的搜索栏，感觉还蛮简洁美观的，刚刚学习了下，写了个小页面，简单地实现以下，代码如下：

<!DOCTYPE html><html><head><title>仿京东搜索框</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.14.1/build/cssreset/cssreset-min.css"><style type="text/css">/* 样式较少，为方便写在这里 */#wrapper {width: 960px;height: 400px;margin: 80px auto;}.search {width: 494px;height: 30px;border: 3px solid #E4393C;position: relative;}.search input {float: left;border: 0;}input:focus {outline: 0;}.text {float: left;width: 406px;padding: 5px;height: 20px;line-height: 20px;font-family: arial,"\5b8b\4f53";}.text:focus {background-color: #FCFCFC;-webkit-box-shadow: 2px 2px 3px #D2D2D2 inset;-moz-box-shadow: 2px 2px 3px #D2D2D2 inset;box-shadow: 2px 2px 3px #D2D2D2 inset;}.button {width: 78px;height: 30px;font-size: 14px;font-weight: 700;color: #FFFFFF;background-color: #E4393C;display: inline-block;text-align: center;cursor: pointer;}</style></head><body><div id="wrapper"><div class="search"><input class="text" type="text" /><input class="button" type="button" value="搜索" /></div></div></body></html>

最终的效果如下：

0 0