mirror of
https://gitee.com/many2many/java-web.git
synced 2025-01-11 22:50:54 +08:00
111 lines
4.6 KiB
HTML
111 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Fetch API Example</title>
|
|
<!-- 引入 Bootstrap -->
|
|
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/js/bootstrap.min.js"></script>
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
|
|
<style>
|
|
.card-img-top {
|
|
width: 100%;
|
|
height: 15vw;
|
|
object-fit: cover;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<div class="container mt-8" id="top-post">
|
|
<div class="card mt-5 mb-5">
|
|
<a href="#!"><img class="card-img-top" src="https://loremflickr.com/640/320" alt="..." /></a>
|
|
<div class="card-body">
|
|
<div class="small text-muted"><i class="fas fa-clock m-1"></i>2024-10-10 09:09:00</div>
|
|
<h2 class="card-title">Featured Post Title</h2>
|
|
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla? Quos cum ex quis soluta, a laboriosam. Dicta expedita corporis animi vero voluptate voluptatibus possimus, veniam magni quis!</p>
|
|
|
|
<div class="row align-items-start">
|
|
<div class="col-5">
|
|
</div>
|
|
<div class="col-3">
|
|
<i class="fas fa-comments"></i><a href="#" class="card-link p-1">评论(8)</a>
|
|
</div>
|
|
<div class="col-3">
|
|
<i class="fas fa-user"></i> <a href="#" class="card-link p-1">jone mike</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container mt-8" id="posts">
|
|
<div class="card mb-5">
|
|
<div class="row g-0">
|
|
<div class="col-md-3">
|
|
<img src="https://loremflickr.com/240/320" class="img-fluid rounded-start" alt="...">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Card title</h5>
|
|
<p class="card-text text-muted">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
|
|
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
|
|
</p>
|
|
<p class="card-text"><small>2024-10-10 08:08:10</small> <small class="p-1">小明</small></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card mb-5">
|
|
<div class="row g-0">
|
|
<div class="col-md-3">
|
|
<img src="https://loremflickr.com/240/320" class="img-fluid rounded-start" alt="...">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Card title</h5>
|
|
<p class="card-text text-muted">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
|
<p class="card-text"><small>2024-10-10 08:08:10</small> <small class="p-1">小明</small></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="container mt-8">
|
|
|
|
<!-- POST 请求表单 -->
|
|
<form class="mt-5" action="#">
|
|
<h2>发布新帖子</h2>
|
|
<div class="mb-3">
|
|
<label for="title" class="form-label">标题</label>
|
|
<input type="text" class="form-control" id="title" placeholder="输入帖子标题">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="body" class="form-label">内容</label>
|
|
<textarea class="form-control" id="body" rows="3" placeholder="输入帖子内容"></textarea>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="cover" class="form-label">封面图片</label>
|
|
<input type="text" class="form-control" id="cover" placeholder="image"/>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="cover" class="form-label">图片</label>
|
|
<input type="text" class="form-control" id="thumbnail" placeholder="image"/>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="userId" class="form-label">用户ID</label>
|
|
<input type="text" class="form-control" id="userId" placeholder="输入用户id">
|
|
</div>
|
|
<button class="btn btn-primary" id="submit">发布</button>
|
|
</form>
|
|
</div>
|
|
|
|
|
|
</body>
|
|
</html> |