19、京东左侧导航条样式表

最新推荐文章于 2022-03-19 23:00:00 发布

五仁卤鸡翅

最新推荐文章于 2022-03-19 23:00:00 发布

阅读量368

点赞数

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

本文链接：https://blog.csdn.net/MoonNight608/article/details/106901695

版权

css 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

文章目录

介绍
京东左侧导航

介绍

本文是在学习CSS时做的学习笔记，所有笔记内容为 CSS学习笔记

京东左侧导航

在这里插入图片描述

仿写如图所示导航条

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
body{
    background-color:#bfs
}
1、设置菜单外部容器 
.left-nav{
    width:190px;
    height:450px;
    padding:10px 0;
    /* 设置背景颜色 */
    background-color：#fff;
    margin:50px auto;// 设置水平居中
}

2、设置菜单内部item
.left-nav .item{
    height:25px;
    
    要让一个文字在父元素中垂直居中，只需要将父元素的line-height设置为一个和
    和父元素的height一样  
    line-height:25px； 
    
   设置item的右边距，将文字向右移动
   padding-left:18px;
   font-size:12px;
}

为 item 设置鼠标移入状态
.item:hover{
    background-color:red
}

.item a{
    /* 设置字体颜色*/
    color:#333;
    // 去掉下划线
    text-decoration:none;
    // 字体大小
    font-size:14px;
}
// 设置超链接鼠标移入 hover
.item a:hover{
    color:red;
}

             
</style>
<body>
<nav class="left-nav ">
   <div class="item"> 
     <a href="#">家用电器</a>
   </div>
   <div class="item"> 
     <a href=#">手机</a>/<a href=#">运营商</a>/<a href=#">数码</a>
   </div>
   <div class="item"> 
     <a href=#">手机</a>/<a href=#">运营商</a>/<a href=#">数码</a>
   </div>
   <div class="item"> 
     <a href=#">手机</a>/<a href=#">运营商</a>/<a href=#">数码</a>
   </div>
</nav>

</body>
</html>