vue制作快捷导航栏
快捷导航 (shortcut)
结构: 通栏>版心>导航 ul
布局: flex-end
<template>
<!-- 主窗体 -->
<div class="main">
<!-- 快捷导航 -->
<div class="shortcut">
<div class="wrapper">1</div>
</div>
</div>
</template>
<script>
export default {
name: "LabelingView",
data() {
return {}
},
components: {
},
methods: {
}
}
</script>
<style scoped>
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
list-style: none;
text-decoration: none;
}
.wrapper{
display: flex;
margin: 0 auto;
width: 1240px;
background-color: pink;
overflow: hidden;
}
.shortcut{
height: 52px;
background-color: #333;
}
.shortcut .wrapper{
height: 51px;
background-color: blue;
}
</style>
<template>
<!-- 主窗体 -->
<div class="main">
<!-- 快捷导航 -->
<div class="shortcut">
<div class="wrapper">1</div>
</div>
</div>
</template>
<script>
export default {
name: "LabelingView",
data() {
return {}
},
components: {
},
methods: {
}
}
</script>
<style scoped>
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
list-style: none;
text-decoration: none;
}
.wrapper{
display: flex;
margin: 0 auto;
width: 1240px;
background-color: pink;
overflow: hidden;
}
.shortcut{
height: 52px;
background-color: #333;
}
.shortcut .wrapper{
display: flex;
justify-content: flex-end;
height: 51px;
background-color: blue;
}
</style>
<template>
<!-- 主窗体 -->
<div class="main">
<!-- 快捷导航 -->
<div class="shortcut">
<div class="wrapper">
<ul>
<li><a href="#">主页面</a></li>
<li><a href="#">返回</a></li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
name: "LabelingView",
data() {
return {}
},
components: {
},
methods: {
}
}
</script>
<style scoped>
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
list-style: none;
text-decoration: none;
}
.wrapper{
display: flex;
margin: 0 auto;
width: 1240px;
overflow: hidden;
}
.shortcut{
height: 52px;
background-color: #333;
}
.shortcut .wrapper{
display: flex;
justify-content: flex-end;
height: 51px;
}
.shortcut ul{
display: flex;
line-height: 52px;
}
.shortcut li a {
padding: 0 15px;
border-right: 1px solid #999;
font-size: 14px;
color: #fff;
}
.shortcut li:last-child a{
border-right: 0;
}
</style>