纯HTML和CSS实现电商网站导航和列表推荐

涉及技术点：

1.智能数码旁边的蓝色方块采用绝对定位的方式

2.导航栏的两个板块分别左浮动和右浮动, 右浮动板块里的列表项(ul>li>a)进行左浮动，结束一行的浮动后需要清除浮动, 以免影响后续布局

3.内容栏进行左浮动和左浮动, 同时可以运用两栏布局(指左侧固定宽度，右侧自适应窗口)

4.内容栏里的左浮动板块的只能数码运用绝对定位并用z-index属性设置层级关系(z-index:默认值为0，允许负值; 值越大，层级越高，显示越靠前;值相同，结构上后写的覆盖前写的)

HTML部分：

<div class="inteldigit fl">
                <div class="intelnav clearfix">
                    <em></em>
                    <h3 class="fl">智能数码
                        <img src="./images/code1.png" alt="code">
                    </h3>
                    <ul class="fr">
                        <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> 
                </div>
                <div style="clear: both;"></div>

                <div class="intellist clearfix">
                    <div class="leftbg fl">
                        <img src="./images/good_b_img1.jpg" alt=""> 
                        <div class="leftdesc">
                            <h3>智能数码</h3>
                            <b>爆款门锁直降</b>
                        </div>
                    </div>
                    <ul>
                        <li class="fl">
                            <a href="#">
                                <h3>小天才手表</h3>
                                <p>儿童手表低至348起</p>
                                <img src="./images/good01.jpg" alt="watch">
                            </a>
                        </li>
                        <li class="fl">
                            <a href="#">
                                <h3>智能数码闹元宵</h3>
                                <p>爆款至高12期免息</p>
                                <img src="./images/good02.jpg" alt="airpods">
                            </a>
                        </li>
                        <li class="fl">
                            <a href="#">
                                <h3>家居品类日</h3>
                                <p>领券下单省100</p>
                                <img src="./images/good03.jpg" alt="furniture">
                            </a>
                        </li>
                        <li class="fl">
                            <a href="#">
                                <h3>智能潮品</h3>
                                <p>爆款低至79元</p>
                                <img src="./images/good04.jpg" alt="popular">
                            </a>
                        </li>
                        <div style="clear: both;"></div>
                    </ul>
                    <div style="clear: both;"></div>
                </div>
                <div style="clear: both;"></div>
            </div>

CSS部分： 

.fl{
    float: left;
}
.fr{
    float: right;
}
/*在浮动元素父元素的最后一个添加一个伪元素, 默认以内联形式存在*/
.clearfix::after{
    content:"";
    display:block;
    clear:both;
    
}
/*处理IE低版本的兼容问题*/
.clearfix{
    *zoom: 1;
}
.inteldigit{
    width: 590px;
    height: 410px;
    background-color: #ffffff;
    margin: 20px 9px 0 0;
}
.inteldigit .intelnav
{
    height: 46px;
    background-color: #f9f9f9;
    line-height: 46px;
    position: relative;
}
.inteldigit .intelnav > h3{
    font: bold 18px/1 "微软雅黑";
    color:#3299cc;
    padding: 15px 10px 15px 15px;
}
.inteldigit .intelnav ul> li{
    float: left;
    margin-right: 20px;
}
.inteldigit .intelnav ul > li > a{
    font-size: 18px/46px "微软雅黑";
    color:#666666;
}
.inteldigit .intelnav ul > li > a:hover{
    color: #3299cc;
}
.inteldigit .intelnav > em
{
    display: inline-block;
    width: 7px;
    height: 21px;
    background-color: #1c95e6;
    position: absolute;
    left: 0;
    top:50%;
    margin-top: -10.5px;
}
.inteldigit .intellist .leftbg{
    position: relative;
}
.inteldigit .intellist > .leftbg > img{
    width: 188px;
    height: 360px;
}
.inteldigit .intellist .leftbg > .leftdesc
{
    width: 162px;
    height: 60px;
    background-color: rgba(0,0,0,0.6);
    z-index: 1;
    position: absolute;
    left: 0;
    top: 260px;
    border-radius: 0 10px 10px 0;
}
.inteldigit .intellist .leftbg > .leftdesc > h3{
    font: bold 20px/1 "微软雅黑";
    color: #fefffa;
    padding:10px 0 0 15px;
}
.inteldigit .intellist .leftbg > .leftdesc > b
{
    display: inline-block;
    font: normal 12px/1 "微软雅黑";
    color: #fefffa;
    padding:10px 0 0 15px;
}
.inteldigit .intellist > ul > li > a > img{
    width: 115px;
    height: 115px;
    margin-top: 5px;
}
.inteldigit .intellist ul{
    margin-left: 190px;
}
.inteldigit .intellist ul > li{
    width:199px;
    height: 180px;
    border-right: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2;
    text-align: center;
}
.inteldigit .intellist ul > li:hover{
    box-shadow: 0 0 10px #494949;
}
.inteldigit .intellist ul > li > a > h3{
    font: 16px/1 "微软雅黑";
    color:#333333;
    padding-top:18px;
}
.inteldigit .intellist ul > li > a > p{
    font:12px/1 "微软雅黑";
    color: #3695d5;
    padding-top:10px;
}