前言:
这组件菜单,可以快速开发,这部分主要用的的就是css布局,还有scss的嵌套,这个如果没有前端的基础写的就会很蒙,比如说塌陷,浮动,伪类什么的,还有css布局,div,span,class,类选择器 标签选择器 伪类选择器等.
布局:
<template>
<div class="header">
<!-- 顶部 -->
<div class="nav-topbar">
<!-- 布局div -->
<div class="container">
<!-- 菜单 -->
<div class="topbar-menu">
<!-- a标签javascrips:;代表不刷新 -->
<a href="javascrips:;">小米商城</a>
<a href="javascrips:;">MUI</a>
<a href="javascrips:;">云服务</a>
<a href="javascrips:;">用户手册</a>
</div>
<!-- 用户登陆 -->
<div class="topbar-user">
<a href="javascrips:;">登陆</a>
<a href="javascrips:;">注册</a>
<a href="javascrips:;" class="my-cart"><span class="icon-cart"></span>购物车</a>
</div>
</div>
</div>
<!-- 头部导航条 -->
<div class="nav-head">
<!-- 布局 -->
<div class="container">
<!-- logo -->
<div class="head-logo">
<a href="/#/index"></a>
</div>
<!-- 中部菜单 -->
<div class="head-menu">
<!-- 导航栏 -->
<div class="item-meun">
<span>小米手机</span>
<div class="chlidren"></div>
</div>
<!-- 导航栏 -->
<div class="item-meun">
<span>RedMi红米</span>
<div class="chlidren"></div>
</div>
<!-- 导航栏 -->
<div class="item-meun">
<span>电视</span>
<div class="chlidren"></div>
</div>
</div>
<div class="head-search"></div>
</div>
</div>
</div>
</template>
示例:
![JW0DU4LRFKV6J}@H`{[8]IK.png][1]
MHJ18[3]
布局这块用的最多的就是嵌套div什么时候嵌套,什么div放在那里,标签如何选择等
css样式可以说是不简单,比较绕并且记得东西很多,还有嵌套,选择器,包括重复元素抽取出来做成scss:
<style lang="scss">
.header{
//顶部条
.nav-topbar{
height: 39px; //高度跟行高是一样的
line-height: 39px;
background-color: #333333;
color: #b0b0b0;
//顶部布局容器
.container{
display: flex; //flex布局
justify-content: space-between; //水平剧中
align-items: center; //垂直剧中
//a标签
a{
display: inline-block;
color: #b0b0b0;
margin-right: 17px;
}
//购物车
.my-cart{
width: 110px; //宽度
background-color: #FF6600; //背景色
text-align: center; //剧中
color: #ffffff;
//购物车图标
.icon-cart{
margin-right: 5px;
display: inline-block;
width: 16px;
height: 12px;
background: url('/imgs/cart.png') no-repeat center; //引入图标 剧中
background-size: contain;
}
}
}
}
.nav-head{
//布局容器
.container{
height: 112px;
display: flex;
justify-content: space-between;
align-items: center;
}
//logo
.head-logo{
display: inline-block;
width: 55px;
height: 55px;
background-color: #FF6600;
//a标签
.a{
display: inline-block; //行内转块标签
width: 110px;
height: 55px;
}
//给a标签设置伪类css原生a::befor
&:before{
content: " "; //占位如果没有伪类不生效
display: inline-block; //行内转块
width: 55px;
height: 55px;
background: url('/imgs/mi-logo.png') no-repeat center;
background-size: 55px;
transition: margin.2s; //动画的延迟
}
//鼠标放上去执行
&:after{
content: " "; //占位如果没有伪类不生效
display: inline-block; //行内转块
width: 55px;
height: 55px;
background: url('/imgs/mi-home.png') no-repeat center;
background-size: 55px;
}
//执行动作
&:hover:before{
margin-left: -55px;
transition: margin.2s;
//hover
}
//head-logo
}
//nav-head
}
//中部菜单
.head-menu{
display: inline-block;
width: 200px;
padding-left: 209px;
//菜单内的文字
.item-meun{
display: inline-block;
color: #333333;
font-weight: bold; //加粗
font-size: 16px;
line-height: 112px;
span{
cursor: pointer; //鼠标放上去会变成小手
}
}
//nav-menu
}
//总header
}
</style>
推荐把每一个便选择器都写注释尤其是底部,不然到时候都找不到哪个对应哪个,还有a before after hover 这些不用全部嵌套要写成闭合的,不然可能会照成伪类不生效,content: " ";伪类必写表示占位
示例:
![5(JN]0S2ZZE}O}%X`%A{U0Y.png][4]
![R8CPMZP~]}S5AEZQ30H8I9Y.png][5]