[HTML]Web前端开发技术30（HTMLCSSJavaScript ）JavaScript基础——喵喵画网页
以下是一个简单的示例，展示了如何使用JavaScript和CSS创建一个简单的喵喵画网页版本。
<!DOCTYPE html>
<html>
<head>
<title>喵喵画网</title>
<style>
body {
background-color: #f7f7f7;
font-family: Arial, sans-serif;
}
.container {
width: 600px;
margin: 100px auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.title {
text-align: center;
color: #333;
padding: 20px;
}
.input-container {
text-align: center;
padding: 20px 0;
}
input[type="text"] {
width: 80%;
padding: 10px;
margin: 0 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
input[type="button"] {
padding: 10px 20px;
background-color: #5883d3;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="button"]:hover {
background-color: #3d66a7;
}
#output {
text-align: center;
padding: 20px;
font-size: 20px;
color: #5883d3;
}
</style>
</head>
<body>
<div class="container">
<div class="title">喵喵画网</div>
<div class="input-container">
<input type="text" id="inputText" placeholder="请输入文本" />
<input type="button" value="生成喵喵" onclick="shuoshuo()" />
</div>
<div id="output"></div>
</div>
<script>
function shuoshuo() {
var inputText = document.getElementById('inputText').value;
评论已关闭