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、源代码下载：

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