Stay Hungry,Stay Foolish!

一个简单的搜索布局样式

项目需要添加一个搜索功能，前端样式根据参考google样式实现，写了一个简单的实现。

包括：

（1）搜索框行 背景使用浅色标示

（2）搜索条目 使用蓝色字体标示，不使用下划线，当鼠标放上后出现下划线。

（3）搜索没有结果，提示一行没有匹配的提示。

 

给出编码实现：

<!DOCTYPE html>
<html>

<head>

<meta charset="UTF-8">

<title>search result</title>

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.15.0/build/cssreset/cssreset-min.css">

<style>

#search-input{

    padding:10px 0px 10px 100px;

    background:#f1f1f1;

}

#search-result{

    margin: 10px 10px 10px 100px;

    background:#ffffff;

}

#search-result-list{

    list-style-type:none;

}

.search-result-item{

    margin-top:0px;

    margin-bottom:23px;

}

.search-result-item h3{

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    max-width:500px;

}

.search-result-item a{

    color:#1E0FBE;

    font-size: 18px!important;

    text-decoration:none;

}

.search-result-item a:hover{

    text-decoration:underline;

    cursor:pointer;

}

</style>

</head>

<body>

    <div id="search-input">

        <input type="text" value="" style="width:500px"/>

        <input type="button" value="search"></input>

    </div>

    <div id="search-result">

        <ul id="search-result-list">

            <li class="search-result-item">

                <h3>

                <a>

                用户手则11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111122222222222222222222222222222222222222222222222222222222222222222222222

                </a>

                </h3>

            </li>

            <li class="search-result-item">

                <h3>

                <a>

                用户手则11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111122222222222222222222222222222222222222222222222222222222222222222222222

                </a>

                </h3>

            </li>

            <li class="search-result-item">

                <h3><a>用户手则</a></h3>

            </li>

            <li class="search-result-item">
                <h3>抱歉，没有找到您要搜索的内容。</h3>
            </li>
        </ul>

    </div>

</body>

</html>

 

 

posted @ 2014-04-19 10:59  lightsong  阅读(500)  评论(0)  编辑  收藏  举报
Life Is Short, We Need Ship To Travel