JS——搜索框

来源：互联网发布：python 自动化开发编辑：程序博客网时间：2024/05/22 01:28

【前言】

本篇博客主要介绍如何制作简单的“搜索框”，此例子的搜索框是模仿以前的淘宝首页的搜索框，详情请见下文！

【正文】

一、简析

1、界面粗装：

（1）、列表：

利用<ul></ul>标签把“宝贝、天猫、店铺”做成一个无序列表，说俗点就是竖着放的简短的清单

（2）、搜索框：

利用类型为text的<input/>标签画一个长长的搜索框

（3）、搜索按钮：

利用类型为submit的<input/>标签画一个搜索按钮

2、界面精装：

（1）、巧用div：

◆ 把“粗装”的三部分用<div></div>标签包起来，便于整体上调整这三部分的样式

◆ 给两个<input/>标签都用<div>标签括起来

（2）、清除浮动：

◆ 设置<li>标签的float和list-style-type属性，可以让列表横着放

◆ 在两者之间加个<div></div>标签，便可以清除两个<input/>标签浮动在<ul></ul>标签旁

（3）、搜索按钮：

点击效果设置为：鼠标按下时设置input标签的padding-left属性为2px,这样会人觉得点按钮时它动了

二、代码

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <style>        /*定位*/        * {            margin: 0;            padding: 0;        }        /*设置选项卡：即设置ul下的a标签样式*/        #search > ul a {            font-size: 10px; /*字体大小*/            font-family: Tahoma,Arial,'Hiragino Sans GB'; /*字体*/            text-decoration: none; /*取消下划线*/            color: #000; /*颜色：黑色*/            display: block;            width: 50px;            height: 25px;            text-align: center; /*居中*/            line-height: 25px;        }         /*鼠标放上来的时候ul下的a标签样式：变色*/            #search > ul a:hover {                background-color: #F9E6E6;            }         /*li样式：即让“宝贝”“天猫”“店铺”横排*/        #search > ul > li {            float: left; /*把竖着的li横着*/            list-style-type: none; /*取消像清单一样竖着的效果*/        }         /*类样式*/        .cls {            clear: both; /*清除浮动*/        }        /*设置搜索框*/        #txt {            width: 500px;            height: 16px;            border: 3px solid #FF5400; /*边框*/            padding: 10px;            float: left;        }            #txt input {                width: 430px;                outline: none; /*取消输入时的小蓝筐*/                border-width: 0; /*取消text的边框*/                margin-left: 15px;            }        /*搜索样式*/        #btn {            position: relative; /*定位*/        }            #btn input {                float: left;                width: 100px;                height: 42px;                font-size: 20px;                background-color: #FF5400;                border-width: 0;                color: #fff;                font-family: 微软雅黑; /*字体*/                word-spacing: normal;                font-weight: bold;            }            #btn i {                background-image: url(search.png); /*搜索图片*/                display: block;                width: 26px;                height: 29px;                position: absolute; /*绝对定位*/                left: 3px;                top: 5px;            }        /*类样式：激活*/        .live {             background-color: #FF5400;            font-weight: bold;            color: #fff;        }        .weit {            color: #9C9C9C;        }    </style>    <title></title>    <!--引用JQuery-->    <script src="scripts/jquery-1.7.1.js"></script>    <script>        $(function () {            var current = $("#search>ul a:first");//记录a中的第一个            $("#search>ul a").mouseover(function () {//鼠标移进：变色                //如果是激活状态                if ($(this).hasClass("live")) return;                $(this).css({                    "background-color": "#F9E6E6",                    "color": "#C60000"                });            }).mouseout(function () {//鼠标离开：清空颜色                if ($(this).hasClass("live")) return;                $(this).css({                    "background-color": "",                    "color": ""                });            }).click(function () {                if ($(this).hasClass("live")) return;                //把颜色变成黑色                $current.removeClass("live").css("color", "#000");                $(this).addClass("live").css("color", "#fff");                $current = $(this);            })        });        //鼠标点入        $(function () {            $("#txt input").focus(function () {//当获得焦点的时候：清空默认值                if (this.value === "搜“圆漾”试试，女神高圆圆原创设计") {                    this.value = "";//清空                    this.className = "";                }            }).blur(function () {//当释放焦点的时候：附上默认值                if (this.value.length == 0) {                    this.value = "搜“圆漾”试试，女神高圆圆原创设计";                    this.className = "weit";                }            })            //点击效果：鼠标按下时设置input标签的padding-left属性为2px,这样会人觉得点按钮时它动了            $("#btn input").mousedown(function () {                $("#btn input").css({                    "padding-left": "2px",                    "padding-top": "2px"                }).mouseup(function () {//取消时改成默认值                    $("#btn input").css({                        "padding-left": "0",                        "padding-top": "0"                    })                })            });        });    </script></head><body>    <div id="search">        <!--ul定义无序列表-->        <ul>            <li><a href="#" class="live" style="color: #fff;">宝贝</a></li>            <li><a href="#">天猫</a></li>            <li><a href="#">店铺</a></li>        </ul>        <div class="cls"></div><!--作用：清除浮动-->        <!--搜索框-->        <div id="txt">            <input class="weit" type="text" name="name" value="搜“圆漾”试试，女神高圆圆原创设计" />        </div>       <!-- 搜索按钮-->        <div id="btn">            <i></i>            <input type="submit" name="name" value="搜  索" />        </div>    </div></body></html>

三、效果图

阅读全文

0 0