商城导航代码_html/css_WEB-ITnose-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

商城导航代码_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:38 AM

　　一个css写的商城导航效果

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>商城分类导航</title>    <style type="text/css">       body        {            padding: 0;            font-size: 10pt;        }        .topmenu        {            display: block;            width: 220px;            border: 2px solid #e4393c;            margin: 0;            padding: 0;        }        .toptitle        {            height: 40px;            line-height: 40px;            text-align: left;            font-size: 11pt;            font-weight: bold;            color: White;            background: #e4393c;            padding-left: 20px;        }        .topmenu li        {            height: 30px;            line-height: 30px;            font-size: 11pt;            list-style-type: none;            text-align: left;            padding-left: 8px;            z-index: 3;            background-image:url(http://img.mukewang.com/5411027300014f0200220030.jpg);            background-repeat:no-repeat;            background-position:right;        }        .topmenu li:hover           {            border:1px solid #DDD;            border-right:0;            box-shadow: 0 0 8px #DDD;            -moz-box-shadow:0 0 8px #DDD;            -webkit-box-shadow:0 0 8px #DDD;            background-image:none;            }        .topmenu li a        {            text-decoration: none;            color: #313131;        }        .topmenu li a:hover        {            text-decoration: underline;            font-weight: bold;            color: #e4393c;        }        .submenu        {            display: none;            width: 715px;            left: 220px;            position: absolute;            top: 40px;            border: 1px solid #DDD;            z-index: 4;            background: white;            box-shadow: 0 0 8px #DDD;            -moz-box-shadow: 0 0 8px #DDD;            -webkit-box-shadow: 0 0 8px #DDD;          }        .leftdiv        {            float:left;            width:490px;            margin:5px;        }        .rightdiv        {            float:left;            width:200px;            margin:5px;        }        .topmenu li:hover .submenu        {            display: block;        }        .topmenu li:hover span        {            background: white;            display: inline-block;            z-index: 20;            width: 20px;            height: 30px;            float: right;            position: relative;        }        .leftdiv dl        {            display:block;            border:-bottom:1px solid #EEE;            padding-bottom:6px;            overflow: hidden;        }        .leftdiv dl dt        {            display: block;            float:left;            width:60px;            text-align: right;            height:22px;            line-height: 22px;            padding-right:6px;        }        .leftdiv dl dt a        {            color:#e4393c;            font-weight: blod;            text-decoration: underline;            font-size:10pt;        }        .leftdiv dl dd        {            display: block;            overflow: hidden;        }        .leftdiv dl dd a        {            display: block;            float:left;            border-left:1px solid #DDD;            color:#737373;            font-size: 9px;            padding:0 8px;            height:14px;            line-height: 14px;            margin:4px 0;        }        .rightdiv dl dd        {            margin:3px 0;        }        .rightdiv dl dt        {            color:#e4393c;            font-weight: bold;            font-size:10pt;        }        .rightdiv dl dd a        {            font-size:9pt;            color:#737373;            line-height: 22px;        }        .rightdiv dl dd a:hover        {            color:#737373;            font-weight: normal;        }    </style></head><body>    <ul class="topmenu">        <div class="toptitle">            全部商品分类        </div>        <li>            <a href="#">图书、音像、数字商品</a><span></span>            <div class="submenu">                <div class="leftdiv">                <dl>                    <dt><a href="">电子书</a></dt>                    <dd>                        <a href="">免费</a><a href="">小说</a><a href="">励志与成功</a>                        <a href="">婚恋/两性</a><a href="#">文学</a><a href="#">经管</a> <a href="#">畅读VIP</a>                    </dd>                <dl >                    <dt><a href="#">生活</a></dt>                    <dd>                        <a href="#">家教与育儿</a> <a href="#">旅游/地图</a> <a href="#">烹饪/美食</a> <a href="#">时尚/美妆</a>                        <a href="#">家居</a> <a href="#">婚恋与两性</a> <a href="#">娱乐/休闲</a> <a href="#">健身与保健</a>                        <a href="#">动漫/幽默</a> <a href="#">体育/运动</a>                    </dd>                </dl>                </div>            <div class="rightdiv">                   <dl>                       <dd>                           <a href="http://sale.jd.com/act/1XDZ6ShE5M7tTrl.html">                               <img  src="/static/imghw/default1.png"  data-src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/1B/rBEbRlOCFcoIAAAAAAArMNB2tlkAACTlwDgVG8AACtI514.jpg"  class="lazy"                                      style="max-width:90%"  style="max-width:90%" title="\家电" alt="商城导航代码_html/css_WEB-ITnose" >                           </a>                       </dd>                   </dl>                   <dl>                       <dt>推荐品牌</dt>                       <dd>                           <a href="#">美的官方旗舰店</a>                       </dd>                       <dd>                           <a href="#">苏泊尔旗舰店</a>                       </dd>                     </dl>               </div>            </div>        </li>       <li>           <a href="#">家用电器</a>            <div class="submenu">                <div class="leftdiv">                <dl>                    <dt><a href="">大家电</a></dt>                    <dd>                        <a href="">平板电视</a>                        <a href="">空调</a>                        <a href="">冰箱</a>                        <a href="">洗衣机</a>                         <a href="#">扫地机器人</a>                         <a href="#">吸尘器</a>                         <a href="#">电话机</a>                         <a href="">家电配件</a>                         <a href="">家庭影院</a>                         <a href="">冷柜/冰吧</a>                         <a href="">洗衣机</a>                    </dd>                </dl>            </div>            </div>       </li>       <li><a href="#">手机、数码</a></li>        <li><a href="#">电脑、办公</a></li>        <li><a href="#">家居、家具、家装、厨具</a></li>        <li><a href="#">服饰内衣、珠宝首饰</a></li>        <li><a href="#">个护化妆</a></li>        <li><a href="#">鞋靴、箱包、钟表、奢侈品</a></li>        <li><a href="#">运动户外</a></li>        <li><a href="#">汽车用品</a></li>        <li><a href="#">母婴、玩具乐器</a></li>        <li><a href="#">食品饮料、酒类、生鲜</a></li>        <li><a href="#">营养保健</a></li>    </ul></body></html>

로그인 후 복사

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.