HTML+CSS 仿写淘宝商城分类导航

最新推荐文章于 2022-04-17 15:41:53 发布

We_jia

最新推荐文章于 2022-04-17 15:41:53 发布

阅读量5.2k

点赞数 8

CC 4.0 BY-SA版权

分类专栏： HTML+CSS

本文链接：https://blog.youkuaiyun.com/We_jia/article/details/84328597

效果图

学会淘宝商城的分类导航以后，会发现大多数的电商网站都是这样的效果，在做其他网站时具体分析即可。

首先我们要构思整个大框架的结构：左边是全部商品分类，在这个分类中主要是用了导航列表(ul li)， 然后在每一个li里面都包含一个默认不显示的的大div(利用了绝对定位，把这个div分成左边小分类列表,右边图片广告)

这个分类导航其实比较简单，在我看来要重点理解相对定位，绝对定位，盒子模型，包括margin和padding的含义，以及对a标签的熟练使用。有一个小知识点就是显示与隐藏display：block；display：none；

但在具体做的时候就有很多细节需要注意，比如每个大分类后都有一个箭头，每一类都有一个斜杠，中间显示框有一个橙色的边框，以及中间字体颜色不一致，图片的大小等等,这些做起来还是很简单的，细心一点就好。

我使用的是内嵌样式，下面就是具体的代码实现（我只附了女装男装内衣的二级分类）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>淘！你喜欢！</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .centerblock {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            width: 1000px;
            height: 500px;
            border: 1px solid silver;
        }

        .centerblock_left {
            width: 199px;
            height: 500px;
            border-right: 1px solid orange;
            /*background-color: #36c3ff;*/
            float: left;
        }

        .centerblock_right {
            float: left;
            width: 800px;
            height: 500px;
            /*background-color:red;*/
        }

        .listmenu {
            /*border: 1px solid silver;*/
            /*left: 20px;*/
        }

        .listmenu li {
            list-style: none;
            padding-left: 20px;
            height: 31.2px;
            line-height: 31.2px;
            font-size: 15px;
        }

        .listmenu li span {
            float: right;
            margin-right: 10px;
        }

        .listmenu li>a {
            text-decoration: none;
            color: #3a3a3a;
        }
        .listmenu li:hover {
            background-color: #ffd4cd;
            color: orange;
        }

        .listmenu li:hover > a {
            color: orange;
        }

        .listmenu > li > a:hover {
            text-decoration: underline;
        }

        .listmenu_child {
            position: absolute;
            left: 200px;
            /*margin-left: 180px;*/
            top: 0;
            background-color: white;
            border: 2px solid #ff951d;
            width: 800px;
            height: 500px;
            display: none;

        }
        .listmenu>li:hover .listmenu_child {
            display: block;

        }

        .listmenu_child_left {
            position: relative;
            float: left;
            padding-left: 20px;
            width: 530px;
            height: 500px;
            /*background-color: #36c3ff;*/

        }

        .listmenu_child_right {
            position: relative;
            float: left;
            width: 249px;
            height: 500px;
            border-left: 1px solid silver;
            /*background-color: #ffe706;*/
        }

        .listmenu_child_left_top_title {
            position: relative;
            width: 530px;
            height: 35px;
            /*background-color: #36c3ff;*/
            line-height: 35px;
            margin-top: 5px;
            color: black;
        }

        .span1 {
            position: absolute;
            bottom: 0;
            float: left;
            font-size: 18px;
            left: 0px;
            color: black;
        }

        .span2 {
            position: absolute;
            bottom: 0;
            float: right;
            font-size: 13px;
            right: 8px;
            color: black;
        }

        .listmenu_child_left_a {

            margin-right: 25px;
            /*background-color: #ffe706;*/