仿淘宝商品界面（html div+css)

最新推荐文章于 2024-07-25 08:14:42 发布

yikaluosidexizhe

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量886

点赞数

分类专栏： web 文章标签： css html css3

本文链接：https://blog.csdn.net/yikaluosidexizhe/article/details/127797103

版权

web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>仿淘宝的产品分类菜单</title>
    <style>
        body {text-align:center;font-family:"宋体"; margin:0; padding:0;font-size:12px; color:#000;overflow-x:hidden}
        div,form,img,ul,ol,li,dl,dt,dd {margin:0;padding:0;border:0;text-align:left;}
        .Nav{border-top:2px solid #c00}
        .Nav .Navlf{width:358px;float:left;display:inline;margin:0px;padding:0px;border:1px solid #d8d8d8;border-top:none;border-left:none;position:relative;}
        .Navlf .Navleft{width:350px;float:left;display:inline;height:450px;margin:0px;margin-left:2px;padding:0px;}
        .Navleft a:visited{color:#333}
        .Nav_head1{margin:0px;position:relative;z-index:99;float:left;display:inline;}
        .Nav_head1 li{padding:0px;position:relative;float:left; display:inline-block;height:auto;line-height:22px;}
        .Nav_head1 a{padding:0 10px 0 0;display:block;color:#333}
        .Nav_head1 a:hover{text-decoration:none;background:#fff}
        .Nav_head1 :hover > a{color:#f60;text-decoration:none;background:#fff}
        .Nav_head1 ul{border:2px solid #fff;border-top:0px;position:absolute;font:normal 12px/22px arial;display:inline;padding:0 0px 6px 0px;overflow:hidden;left:0; height:120px;width:273px;word-wrap:break-word;word-break:break-all;}
        .Nav_head1 ul li{padding:1px 0px 0px 0px;line-height:23px;margin-left:10px;margin-right:-2px;left:left;white-space:nowrap}
        .Nav_head1 ul li h3{ font-size:14px; font-weight:bold; margin:0; padding:0;}
        .Nav_head1 table {position:absolute;top:0;left:0;}
        .Nav_head1 ul a, .Nav_head1 ul a:visited {color:#333;padding:0 1px 0 2px;background:none;}
        .Nav_head1 ul a:hover{color:#fff;background:#30528F;text-decoration:none;}
        .Nav_head1 ul :hover > a {color:#fff;background:#30528F}
        .Nav_head1 li:hover ul,.Nav_head1 a:hover ul{margin:-2px;display:inline;visibility:visible;height:auto;border:2px #c00 solid;padding:2px; background:#ffe}
    </style>
    </head>

    <body>

        <div class="Nav">

            <div class="Navlf">

                <div class="Navleft">

                    <div style="width:300px;float:left; position:relative;left:0px;right:0px; z-index:0;height:306px;display: inline-block;">

                        <ul id="menu" class="Nav_head1" style="z-index:9999;">

                            <li style="z-index:9998" id="cid_284"><a href=""><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

                                <ul style="top:0px;">

                                    <li><h3><a href="">ASP源码</a></h3></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="">CMS整站</a></li><li><a href="">音乐视频</a></li><li><a href="">其它分类</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->

                                </li><li style="z-index:9997" id="cid_636"><a href=""><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

                                    <ul style="top:100px;">

                                        <li><h3><a href="">PHP源码</a></h3></li><li><a href="">Ajax相关</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="">CMS系统</a></li><li><a href="">音乐视频</a></li><li><a href="">其它分类</a></li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->

                                    </li><li style="z-index:9996" id="cid_291"><a href=""><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

                                        <ul style="top:200px;">

                                            <li><h3><a href="">DELPHI源码</a></h3></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><!--[if lte IE 6]></td></tr></table></a><![endif]-->

                                        </li><li style="z-index:9995" id="cid_509"><a href=""></a></li></ul>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </body>

                    </html>