8、商城首页制作实战训练--搜索栏样式实现

Sian

0、效果图

1、背景是带边框的渐变背景；
2、整体分为5个部分：中间红色条（含标签选项卡）、左侧说明图、中间提交表单、右侧关键词、下面更新文章标题；3、中间红色条带标签选项卡，标签选项卡使用一组ul+li实现，编写li的两种样式，并通过绝对布局部署选项卡；
4、表单为一个输入框加一个提交按钮，提交按钮使用图片，输入框加内边距，内阴影，圆角样式等；
5、右侧关键字为一个文字段落，段落内包含多个a标签实现；
6、底部更新部分主体使用ul+li实现，利用div包裹，隐藏超了部分，每次只显示一行文字，利用js调整位置来切换文字内容；
7、三角形通过div底部边框来实现，写成公共类便于后续使用；
8、部分代码：

style.css

[CSS] 纯文本查看 复制代码

.triagle_up, .triagle_down_red, .triagle_down_gray { position: absolute; width: 0;height: 0; overflow: hidden; border-left: 4px solid transparent; border-right: 4px solid transparent;}
.triagle_up { border-bottom: 4px solid red;}
.triagle_down_red { border-top: 4px solid red;}
.triagle_down_gray { border-top: 4px solid gray;}
#search .bar{position: absolute; height: 64px; width: 958px ;background: #e21c01; top: 16px; left:-1px; border: 1px solid #c40d0e; border-radius: 5px; box-shadow: 2px 3px 2px #DDD;}
#search .menu{position: absolute; left: 226px; top: -27px;}
#search .menu li{float: left; width: 78px; height: 25px; margin-right: 1px; display: inline-block; border: 1px solid #f8d0bf; font-size: 14px; text-align: center; line-height: 25px; cursor: pointer; border-bottom: none;border-radius: 5px 5px 0 0; box-shadow: 1px 0px 2px rgba(176,176,176,0.25)}
#search .menu .active{ position: relative; height: 27px; background: #e21c01;color: #fff; font-weight: bold; top: -1px;border: 1px solid #c40d0e;border-bottom: none; text-shadow: 2px 2px 2px rgba(0,0,0,0.25);}
#search .img{ position: relative; left: 32px; top: -3px; z-index: 2; width: 163px; height: 122px; background: url('../img/search_img.png') no-repeat;        }
#search .form{position: absolute; float: left; left:226px; top: 36px;}
#search .form .text{ padding: 0 12px; width: 380px; height: 22px; border-radius: 3px; border: none; background: #fff1ef; float: left; margin-right: 10px; color: #ea7a7a; box-shadow: inset 2px 2px 2px rgba(0,0,0,0.25);}
#search .form .button{width: 63px; height: 26px; background: url('../img/search_img.png') no-repeat -163px 0px; border: none;}
#search .keyword{width: 206px;color: #fff;line-height: 18px; position: absolute; top: 30px; right: 36px;}
#search .keyword a{color: #fff;}
#search .keyword a:hover{text-decoration: underline;}
#search .update{ width: 405px; height: 30px; position: absolute; left: 226px; bottom: 0; background: url('../img/search_img.png') no-repeat -226px 8px;}
#search .wrap{ width: 336px; height: 30px; overflow: hidden; position: relative; left: 60px;}
#search .update ul{ width: 336px; position: absolute; top: 0px; left: 0px;}
#search .update li{ height: 30px; line-height: 30px;}
#search .update a{ color: #000;}
#search .update strong{ color: #d30703;}
#search .update span{ color: gray; margin: 0 4px;}
#search .triagle_up{top:8px; right: 0px;}
#search .triagle_down_red{top:17px; right: 0px;}

index.html

[HTML] 纯文本查看 复制代码

        <div id="search" class="gradient">
                
                <div class="img"></div>
                <div class="bar">
                        <ul class="menu">
                                <li class="gradient">搜店</li>
                                <li class="active gradient">地址</li>
                                <li class="gradient">优惠券</li>
                                <li class="gradient">全文</li>
                                <li class="gradient">视频</li>
                        </ul>
                </div>                
                <div class="form">
                        <form action="#" method="post">
                                <input class="text" type="text" value="例如：荷棠鱼坊烤鱼 或 樱花日本料理"/>
                                <input class="button" type="submit" value=""/>
                        </form>
                </div>
                <p class="keyword">
                        <a href="#">金钱豹</a>、<a href="#">大江南</a>、<a href="#">湘水之珠</a>、
                        <a href="#">德瑀楼</a><a href="#">荷棠鱼坊烤鱼</a>、<a href="#">SOHO尚都</a>、
                        <a href="#">湘味楼</a>...
                </p>
                
                <div class="update">
                        <div class="wrap">
                                <ul>
                                        <li><a href="#"><strong>萱萱</strong><span>5分钟前</span>写了一篇文章：那些年我们一起追过...</a></li>
                                        <li><a href="#"><strong>蓉蓉</strong><span>9分钟前</span>写了一篇文章：那些年我们一起追过...</a></li>
                                </ul>
                                <a href="javascript:;" class="triagle_up"></a>
                                <a href="javascript:;" class="triagle_down_red"></a>
                        </div>
                </div>
                
        </div>

9、源代码下载：

游客，如果您要查看本帖隐藏内容请回复