使用Materialize CSS框架给下面代码添加样式需要手机版人性化样式!doctype htmlhtml class= head head body header id=sticky-header div class= h4 a href=indexhtmlGPT SVIPah4
<p><!doctype html></p>
<html class="">
<head>
<!-- 添加Materialize CSS框架 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- 添加自定义样式 -->
<style>
/* 设置header的样式 */
header {
background-color: #ee6e73;
padding: 10px;
}
header h4 a {
color: #fff;
font-size: 24px;
font-weight: bold;
text-decoration: none;
}
/* 设置主要内容的样式 */
.container {
padding: 20px;
}
#edit_grents {
margin-bottom: 10px;
}
#edit_openaikey {
margin-right: 10px;
}
#btn_buykey,
#btn_grants {
margin-right: 10px;
}
#chat-gpt-input {
margin-bottom: 10px;
}
#chatgpt-response {
margin-top: 10px;
}
/* 设置按钮的样式 */
button {
background-color: #ee6e73;
color: #fff;
border: none;
border-radius: 4px;
padding: 8px 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #ff5252;
}
</style>
</head>
<body>
<header id="sticky-header">
<div class="container">
<h4>
<a href="index.html">GPT SVIP</a>
</h4>
</div>
</header>
<div class="container">
<div class="row">
<div class="col s12">
<div id="edit_grents"></div>
<span>SVIP用户免广告且每天可用300次问答</span>
<div class="input-field">
<input id="edit_openaikey" placeholder="sk-xxxxxxxxxxxxxxxxxx" class="validate" type="text">
<label for="edit_openaikey">OpenAI Key</label>
<button id="btn_buykey" onclick="buykey()" class="waves-effect waves-light btn" href="#">购买Key</button>
<button id="btn_grants" onclick="viewGrants()" class="waves-effect waves-light btn" href="#">查看费用</button>
</div>
<div class="input-field">
<textarea class="materialize-textarea" id="chat-gpt-input" placeholder="输入描述，提示：如需要连续同一个话题，请不要删除提问的问题" rows="3"></textarea>
</div>
<div class="row">
<div class="col s6">
<button id="answer" onclick="callCHATGPT()" class="waves-effect waves-light btn" href="#">回答</button>
</div>
<div class="col s6">
<button onclick="save()" class="waves-effect waves-light btn" href="#">保存</button>
</div>
</div>
<div class="input-field">
<label for="chatgpt-response">回答内容</label>
<textarea class="materialize-textarea" id="chatgpt-response" placeholder="长途访问，请耐心等待回答 Ai生成它很快，但是由于网络问题我们需要等待，通常内容越长等待越久 如果长时间没反应请刷新页面重试" rows="26"></textarea>
</div>
</div>
</div>
</div>
<!-- 添加Materialize JS框架 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html
原文地址: http://www.cveoy.top/t/topic/c48O 著作权归作者所有。请勿转载和采集!