Vuejs父子组件菜单栏小案例

coderhorse

已于 2022-06-10 11:56:10 修改

阅读量405

点赞数 2

文章标签： vue.js javascript html css

于 2022-06-09 11:52:27 首次发布

本文链接：https://blog.csdn.net/majunze123/article/details/125200564

版权

今天闲来无事，学了学vuejs，灵感因if else灵感突发，用一些基本的指令结合父子组件撰写了菜单栏，不说了，先上图再上代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>

<!--css-->
        <style>
            .top {
                width: 100%;
                height: 110px;
                background: -webkit-linear-gradient(left, yellow, orange);
                /*导航栏*/
            }
            
            .top-main {
                /*标题栏*/
                width: 60%;
                margin-left: 20%;
                height: 100px;
                z-index: 3;
            }
            
            .top-main-menu {
                /*图片样式排列*/
                width: 9.5%;
                height: 100px;
                margin-right: 1.5%;
                margin-top: 1%;
                color: #000000;
                float: left;
                transition: 0.5s;
            }
            
            .top-main-menu-p {
                /*菜单文字对齐*/
                margin-top: -3px;
                margin-left: -50px;
                text-align: center;
                color: white;
            }
            
            .top-main-menu:hover {
                /*触碰图标放大*/
                width: 9.5%;
                height: 100px;
                margin-right: 1.5%;
                margin-top: -3px;
                /*    transform:scale(1.2,1.2);*/
                /*轻触放大菜单按钮*/
                color: #000000;
                float: left;
            }
            
            .shape {