<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#card{
width: 500px;
height: 350px;
}
.title{
height:50px;
}
.title span{
width: 100px;
height: 50px;
background-color:#ccc;
display: inline-block;
line-height: 50px; /* 設置行和當前元素的高度相等,就可以讓文本內容上下居中 */
text-align:center;
}
.content .list{
width: 500px;
height: 300px;
background-color: yellow;
display: none;
}
.content .active{
display: block;
}
.title .current{
background-color: yellow;
}
</style>
<script src="js/vue.js"></script>
</head>
<body>
<div id="card">
<div class="title">
<span class="current">國內新聞</span>
<span>國際新聞</span>
<span>銀河新聞</span>
</div>
<div class="content">
<div class="list active">國內新聞列表</div>
<div class="list">國際新聞列表</div>
<div class="list">銀河新聞列表</div>
</div>
</div>
<script腳本代碼>
var card = new Vue({
el:"#card",
data:{
num: 0,
},
});
</script腳本代碼>
</body>
</html>
