console
Vue.component("banner",{
template:"#banner",
})
var app=new Vue({
el:"#app",
data:{
Imgs1:[
{img:"http://i03.pic.sogou.com/1b339e31fe287e24", title:'GEM-邓紫棋'},
{img:"http://img04.sogoucdn.com/app/a/100520024/919e4471239cbdfd4492513f33b66922", title:'胡歌'},
{img:"http://img01.sogoucdn.com/app/a/100520024/2dca236d81c5fc584cbc7c910b9aacf0", title:'林允儿'},
{img:"http://img01.sogoucdn.com/app/a/100520024/38b410e1d1e0a78280ef4515196fec3e", title:'杨幂'},
{img:"http://img04.sogoucdn.com/app/a/100520024/646e5f06e9b545a73c1503348f69dabf", title:'张天爱'},
],
}
})
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<link rel="stylesheet" href="css/css1.css" >
</head>
<body>
<header id="header">
<div id="header-left">
<img src="http://www.duanliang920.com/templets/my/images/logo.jpg">
</div>
<div id="header-right">
<div id="text">
<span>
从不羡慕别人的优秀，因为相信自己也可以优秀。
</span>
<br>
<br>
<span>
闲下来时看看书，书本里的故事，总有你学到的人生。
</span>
</div>
<img src="http://www.duanliang920.com/templets/my/images/logo-pic-bg.jpg">
</div>
</header>
<nav id="list" class="">
<ul class="list-inline">
<li>首页
<br><span>Home</span>
</li>
<li>技术笔记
<br><span>Node</span>
</li>
<li>学海无涯
<br><span>Learn</span>
</li>
<li>关于我们
<br><span>About</span>
</li>
<li>模板教程
<br><span>Teach</span>
</li>
<li>视频教程
<br><span>Teach</span>
</li>
<li>留言板
<br><span>saying</span>
</li>
</ul>
</nav>
<contener>
<div id="contener-left">
</div>
</contener>
<div id="app">
<banner></banner>
</div>
<template id="banner">
<div id="bannerImg">
666666666666666666
<ul>
<li v-for="imgs in Imgs1"><img :src="imgs.img"></li>
</ul>
</div>
</template>
</body>
</html>
*{
padding:0;
margin:0
}
body{
background:url(http://www.yangqq.com/skin/2017/images/top.jpg);
padding:0px 30px
}
#header{
width:100%;
height:120px;
background:rgba(253,255,206,1);
position:relative;
margin:auto apx;
padding-top:20px;
border-radius:20px
}
#header img{
border-radius:30px
}
#header-right{
position:absolute;
right:5px;
top:-5px
}
#text{
display:inline;
position:absolute;
right:130px;
width:350px;
top:20px
}
#header-left {
position:absolute;
top:50%;
margin-top:-50px
}
#mingyan{
display:inline;
width:80px;
margin-top:20px
}
#list{
list-style:none;
padding-top:5px;
text-align:center;
line-height:40px;
background:rgba(216,52,255,0.8);
border-radius:20px;
margin-top:5px
}
#list li{
width:140px;
height:60px;
padding-top:5px;
font-size:16px;
color:white;
cursor:pointer;
transition:1.0s;
border-radius:20px;
position:relative
}
#list li span{
position:absolute;
top:5px;
right:50px;
transition:1s;
opacity:0
}
#list li:hover span{
position:absolute;
top:30px;
right:50px;
opacity:1
}
#list li:nth-child(1),#list li:hover{
background:red
}
list li:nth-child(1){
background:red
}
//banner轮播区
#bannerImg ul{
list-style:none
}
#bannerImg ul img{
width:100px;
height:120px
}