html编写一个静态的左侧导航页面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>汽车配件</title>
<style type="text/css">
.content{
width: 900px;
height: 600px;
/*border:1px solid red;*/
            margin:20px auto;
            font-size: 0px;


}
.main{
width: 600px;
height: 100%;
/*border:1px solid red;*/
display: inline-block;
margin-right: 15px;
}
.icon{
width: 30%;
height: 99%;
/*border: 1px solid red;*/
display: inline-block;
vertical-align: top;
margin-top: 18px;
}
.nav>.show{
text-indent: 1.2em;
line-height: 3em;
font-weight: bold;
background: url(./img/back.png) no-repeat  100px center;
font-size: 18px;




}
.detail{
              vertical-align: top;
display: inline-block;
}
.nav{
           width: 20%;
           height: 98%;
           /*border:1px solid red;*/
           display: inline-block;
           vertical-align: top;
}
        .detail>.show{
        text-indent: 2em;
line-height: 3em;
/*font-weight: lighter;*/
font-size: 18px;
        border-bottom: 1px dashed #E6E6E6;
        }
        span{
        color: #66CCFF;
        }
        .title{
        height: 75%;
        width: 97%;
        /*border: 1px solid red;*/
        margin-bottom: 10px;


        }
        .enter{
        height: 22%;
        width: 97%;
        /*border: 1px solid red;*/
        }
        .logo{
        width: 40%;
        height: 10%;
        /*border:1px solid red;*/
        display: inline-block;
        margin-bottom: 10px;
        margin-left: 20px;


        }
        img{
        height: 100%;
        width: 100%;
        object-fit: cover;




        }


</style>
</head>
<body>
<div class="content">
<div class="main">
<div class="nav">
<div class="show">
整&nbsp;&nbsp;&nbsp;&nbsp; 车
</div>

<div class="show">
电子导航
</div>
<div class="show">
电子导航
</div>
<div class="show">
电子导航
</div>
<div class="show">
电子导航
</div>
<div class="show">
电子导航
</div>
<div class="show">
电子导航
</div>
<div class="show">
电子导航
</div>
<div class="show">
电子导航
</div>
<div class="show">
电子导航
</div>
<div class="show">
电子导航
</div>


</div>
<div class="detail">
<div class="show"><span>年年换新车</span> 车秒贷  新能源汽车 新能源汽车 新能源汽车</div>
<div class="show"><span>年年换新车</span> 车秒贷  新能源汽车 新能源汽车 新能源汽车</div>
<div class="show"><span>年年换新车</span> 车秒贷  新能源汽车 新能源汽车 新能源汽车</div>
<div class="show"><span>年年换新车</span> 车秒贷  新能源汽车 <span>新能源汽车</span> 新能源汽车</div>
<div class="show"><span>年年换新车</span> 车秒贷  新能源汽车 新能源汽车 新能源汽车</div>
<div class="show"><span>年年换新车</span> 车秒贷  <span>新能源汽车</span>新能源汽车 新能源汽车</div>
<div class="show"><span>年年换新车</span> 车秒贷  新能源汽车 新能源汽车 新能源汽车</div>
<div class="show"><span>年年换新车</span> 车秒贷  新能源汽车 新能源汽车 新能源汽车</div>
<div class="show"><span>年年换新车</span> 车秒贷  新能源汽车 新能源汽车 新能源汽车</div>
<div class="show"><span>年年换新车</span> 车秒贷  新能源汽车 新能源汽车 新能源汽车</div>
<div class="show"><span>年年换新车</span> 车秒贷  新能源汽车 <span>新能源汽车</span> 新能源汽车</div>

</div>
</div>
<div class="icon">
<div class="title">
<div class="logo">
<img src="./img/logo1.jpg">
</div>
<div class="logo">
<img src="./img/logo2.jpg">
</div>
<div class="logo">
<img src="./img/logo3.jpg">
</div>
<div class="logo">
<img src="./img/logo4.png">
</div>
<div class="logo">
<img src="./img/logo5.jpg">
</div>
<div class="logo">
<img src="./img/logo6.jpg">
</div>
<div class="logo">
<img src="./img/logo7.jpg">
</div>
<div class="logo">
<img src="./img/logo8.jpg">
</div>
<div class="logo">
<img src="./img/logo9.png">
</div>
<div class="logo">
<img src="./img/logo10.jpg">
</div>
<div class="logo">
<img src="./img/logo11.jpg">
</div>
<div class="logo">
<img src="./img/logo12.jpg">
</div>
<div class="logo">
<img src="./img/logo13.png">
</div>
<div class="logo">
<img src="./img/logo14.jpg">
</div>
<div class="logo">
<img src="./img/logo15.jpg">
</div>
<div class="logo">
<img src="./img/logo16.jpg">
</div>

</div>
<div class="enter">
<img src="./img/logo.jpg">

</div>
</div>
</div>

</body>

</html>

整理了一些书籍分享给大家,可关注公众号菜单栏点击推荐书籍获取链接

JavaScript高级程序设计(红宝书)     你不知道的JavaScript(上卷)  你不知道的JavaScript(中卷)  你不知道的JavaScript(下卷).pdf

js权威指南.pdf    深入理解ES6.pdf    es6标准入门(第三版).pdf    HTML与CSS入门经典   Javascript高级程序设计

JavaScript设计模式    性能网站建设进阶指南   精通正则表达式   HTML5程序设计  CSS权威指南  JavaScript权威指南

JavaScript面向对象编程指南   HTTP权威指南.pdf   计算的本质:深入剖析程序和计算机.pdf

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值