年年有"余"

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 2012|回复: 0

[电子商务] 8、商城首页制作实战训练--搜索栏样式实现

[复制链接]
  • TA的每日心情
    奋斗
    2022-12-13 21:26
  • 签到天数: 371 天

    [LV.9]以坛为家II

    发表于 2016-2-22 23:02:55 | 显示全部楼层 |阅读模式
    本帖最后由 Sian 于 2016-2-23 15:05 编辑

    0、效果图
    屏幕快照-2016-02-22-下午11.01.02.jpg
    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、源代码下载:
    游客,如果您要查看本帖隐藏内容请回复

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    手机版|小黑屋|Archiver|iOS开发笔记 ( 湘ICP备14010846号 )

    GMT+8, 2024-3-29 23:21 , Processed in 0.054619 second(s), 25 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表