[JavaScript知识库] CSS小练习3—

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> CSS小练习3——网页左侧导航栏 -> 正文阅读

[JavaScript知识库]CSS小练习3——网页左侧导航栏

加亿点细节

- - 虚假的一模一样
  - 真实的一模一样

虚假的一模一样

先上效果图，不能说一模一样，只能说是毫无差别：

在这里插入图片描述

. 我写的代码是这样的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test1</title>
    <link rel="stylesheet" href="../reset.css">
    <style>
        div{
            margin:10px 10px;
        }
        a{
            color:black
        }
    </style>
</head>

<body>
   <div>
        <div>
            <a href="javascript:;">家用电器</a>
        </div>

        <div>
            <a href="javascript:;">手机</a> / 
            <a href="javascript:;">运营</a> / 
            <a href="javascript:;">数码</a>
        </div>
        
        <div>
            <a href="javascript:;">电脑</a> /
            <a href="javascript:;">办公</a>
        </div>

        <div>
            <a href="javascript:;">家具</a> / 
            <a href="javascript:;">家居</a> / 
            <a href="javascript:;">家装</a> / 
            <a href="javascript:;">厨具</a>
        </div>

   </div>

</body>
</html>

这个难道真的这么简单吗？？？

真实的一模一样

细节问题

要想让一个元素在父元素中垂直居中，只需要将父元素的line-height和height设置为相同的数值：
文字信息和左边框之间是有一定距离的，也就是下图中红色边框区域：

这个距离既可以用外边距margin来隔开，也可以用内边距padding来隔开，但其实这两者在实际使用中是不一样的。比如在这个例子中，鼠标移动到每一行上，时会出现一个背景效果的，我们来分别看看具体效果：

①对nav块元素中的div元素增加margin:
说明：nav块就是html5中新增的网页导航块元素，这里使用的是nav(div)，但也可以使用div(div) ，ul(li)

 .leftlist .item{
             margin-left:18px; 
        } 
 .item:hover{
            background-color:#d9d9d9
        }
        
<nav class="leftlist">
        <div class="item">
            <a href="#">家用电器</a>
        </div>

        <div class="item">
            <a href="javascript:;">手机</a><span>/</span><a href="javascript:;">运营商</a><span>/</span><a href="javascript:;">数码</a>
        </div>
    </nav>

这样虽然左边空出来了一定位置，但是由于是外边距所以背景颜色无法渲染在最左边一栏
在这里插入图片描述
②对超链接中文字元素加margin:

 .item a{
            color: #333;
            /* 去掉下划线 */
            text-decoration:none;
            font-size:14px;
            margin-left:18px; 
        }
        /* 设置超链接hover的样式 */
        .item a:hover{
            color:#c81623;
        }
        
<nav class="leftlist">
        <div class="item">
            <a href="#">家用电器</a>
        </div>

        <div class="item">
            <a href="javascript:;">手机</a><span>/</span><a href="javascript:;">运营商</a><span>/</span><a href="javascript:;">数码</a>
        </div>
    </nav>

可以看到，虽然左边背景显示正常了，但是每一个超链接前边都会出现一个margin
在这里插入图片描述
③最正确的做法就是：

 .leftlist .item{
            padding-left:18px;
         
        } 
 .item:hover{
            background-color:#d9d9d9
        }
        
<nav class="leftlist">
        <div class="item">
            <a href="#">家用电器</a>
        </div>

        <div class="item">
            <a href="javascript:;">手机</a><span>/</span><a href="javascript:;">运营商</a><span>/</span><a href="javascript:;">数码</a>
        </div>
    </nav>

在这里插入图片描述
3. 这里没有为子元素div设置宽度的原因：设置了之后容易产生溢出。具体原因就是之前说过的布局哪一篇文章——传送门里面的公式父元素的宽度等于七个数值之和，在没有设置子元素的width时，浏览器会根据程度自动调整，但吐过我们自己设计了width值:

.leftlist .item{
            width:200px;
            height:25px;
        } 
<nav class="leftlist">
        <div class="item">
            <a href="#">家用电器</a>
        </div>

        <div class="item">
            <a href="javascript:;">手机</a><span>/</span><a href="javascript:;">运营商</a><span>/</span><a href="javascript:;">数码</a>
        </div>
    </nav>

在这里插入图片描述

最后，会出现在显示界面里的所有元素都应该放在正确的块中，而不能裸露得直接写在源代码中。就像每个超链接之间的斜线/，也要做额外的处理（细节太细节了）

.item span{
            color: #333;
            font-size: 12px;
            padding:0 3px;
        }
<div class="item">
            <a href="javascript:;">手机</a><span>/</span><a href="javascript:;">运营商</a>
        </div>

增加细节之后的完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test3</title>
    <link rel="stylesheet" href="../reset.css">
    <style>
        body{
            background-color: #abc;
        }
        /* 设置外部容器 */
        .leftlist{
            background-color:white;
            width:190px;
            height:200px;
            padding:10px 0;
            margin:50px auto;
        }
        .leftlist .item{
            height:25px;
            line-height:25px;
            /*设置item的左内边距，将文字向内挤 */

            padding-left:18px;
        } 
        /* 为item设置鼠标移入的效果 */
        .item:hover{
            background-color:#d9d9d9
        }
        /* 设置超链接样式 */
        .item a{
            color: #333;
            /* 去掉下划线 */
            text-decoration:none;
            font-size:14px;
        }
        /* 设置超链接hover的样式 */
        .item a:hover{
            color:#c81623;
        }
        .item span{
            color: #333;
            font-size: 12px;
            padding:0 3px;
        }
    </style>
</head>
<body>
    <!-- 创建一个外部容器 div(div) ul(li) nav(div)-->
    <nav class="leftlist">
        <div class="item">
            <a href="#">家用电器</a>
        </div>

        <div class="item">
            <a href="javascript:;">手机</a><span>/</span><a href="javascript:;">运营商</a><span>/</span><a href="javascript:;">数码</a>
        </div>
    </nav>
</body>
</html>

结果效果图
在这里插入图片描述