html+css+vue的青春网页代码
时间: 2023-08-03 09:42:39 浏览: 72
很高兴为您服务!以下是一个简单的青春风格的网页代码示例,使用HTML,CSS和Vue.js:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>青春网页</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
<h1>青春网页</h1>
<p>{{ message }}</p>
<button v-on:click="changeMessage">改变信息</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
```
CSS代码:
```
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 0;
}
#app {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
margin: 40px auto;
padding: 20px;
text-align: center;
width: 80%;
}
h1 {
color: #00a0e9;
font-size: 36px;
margin-bottom: 0;
}
p {
color: #333;
font-size: 24px;
}
button {
background-color: #00a0e9;
border: none;
border-radius: 4px;
color: #fff;
cursor: pointer;
font-size: 20px;
margin-top: 20px;
padding: 10px 20px;
transition: background-color 0.3s;
}
button:hover {
background-color: #0084c7;
}
```
Vue.js代码:
```
var app = new Vue({
el: '#app',
data: {
message: '欢迎来到青春网页!'
},
methods: {
changeMessage: function() {
this.message = '你已经成功改变了信息!';
}
}
});
```
这个简单的网页包含一个标题,一些文本,一个按钮和一个使用Vue.js的JavaScript代码块,可以让用户更改显示的文本。希望这个示例对您有所帮助!