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

文章目录

  • 介绍
  • 京东左侧导航

介绍

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

京东左侧导航

19、京东左侧导航条样式表_第1张图片

仿写如图所示导航条

<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>
   </div>
   <div class="item"> 
     <a href=#">手机/>运营商</a>/<a href=#">数码</a>
   </div>
   <div class="item"> 
     <a href=#">手机/>运营商</a>/<a href=#">数码</a>
   </div>
</nav>

</body>
</html>

你可能感兴趣的:(css)