当前位置：首页 > news >正文

第四周作业（包括小组网页设计-对Bootstrap的初步了解）

news 2025/10/2 7:17:51

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网页设计1</title><!-- 引入 Bootstrap CSS --><link rel="stylesheet" href="../static/plugins/bootstrap-5.3.0-alpha1-dist/css/bootstrap.css"><!-- 引入 Font Awesome 图标库 --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head><body><!-- 导航栏 --><nav class="navbar navbar-expand-lg bg-body-tertiary"><div class="container-fluid"><a class="navbar-brand" href="#">联通新闻中心</a><!-- 移除汉堡按钮，保持导航始终展开 --><!-- 导航链接区域 --><div class="navbar-collapse"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"aria-expanded="false">Dropdown</a><ul class="dropdown-menu"><li><a class="dropdown-item" href="#">Action</a></li><li><a class="dropdown-item" href="#">Another action</a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item" href="#">Something else here</a></li></ul></li></ul></div><!-- 登录注册按钮（右对齐并增加间距） --><div class="d-flex ms-auto"><a class="btn btn-outline-primary me-2" href="登录.html">登录</a> <a class="btn btn-primary" href="#">注册</a> <!-- 注册按钮 --></div></div></nav><!-- 主体内容：栅格系统（主内容 + 侧边栏） --><div class="container mt-4"><div class="row"><!-- 中间新闻内容区域（占 8 列，包含图片和文本） --><div class="col-lg-8"><!-- 新闻内容 1 --><div class="mb-4 d-flex flex-row gap-3"><!-- 图片 --><div class="col-2 p-0 d-none d-md-block"><img src="../static/img/img1头条.jpg" class="img-fluid"style="width: 64px; height: 64px; object-fit: cover;" alt="头条新闻图片"></div><!-- 文本 --><div class="col-10"><h5>Media heading</h5><p class="mb-0">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque antesollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p></div></div><!-- 新闻内容 2 --><div class="mb-4 d-flex flex-row gap-3"><!-- 图片 --><div class="col-2 p-0 d-none d-md-block"><img src="../static/img/img2百度.jpg" class="img-fluid"style="width: 64px; height: 64px; object-fit: cover;" alt="百度相关新闻图片"></div><!-- 文本 --><div class="col-10"><h5>Media heading</h5><p class="mb-0">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque antesollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p></div></div><!-- 新闻内容 3 --><div class="mb-4 d-flex flex-row gap-3"><!-- 图片 --><div class="col-2 p-0 d-none d-md-block"><img src="../static/img/img3edge.jpg" class="img-fluid"style="width: 64px; height: 64px; object-fit: cover;" alt="Edge相关新闻图片"></div><!-- 文本 --><div class="col-10"><h5>Media heading</h5><p class="mb-0">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque antesollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p></div></div><!-- 新闻内容 4 --><div class="mb-4 d-flex flex-row gap-3"><!-- 图片 --><div class="col-2 p-0 d-none d-md-block"><img src="../static/img/img1头条.jpg" class="img-fluid"style="width: 64px; height: 64px; object-fit: cover;" alt="头条新闻图片"></div><!-- 文本 --><div class="col-10"><h5>Media heading</h5><p class="mb-0">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque antesollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p></div></div><!-- 分页 --><nav aria-label="Page navigation example"><ul class="pagination"><li class="page-item"><a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">上一页</span></a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item active"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">4</a></li><li class="page-item"><a class="page-link" href="#">5</a></li><li class="page-item"><a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">下一页</span></a></li></ul></nav></div><!-- 侧边栏（占 4 列） --><div class="col-lg-4"><!-- 热门推荐 1 --><div class="card mb-4"><div class="card-header bg-light"><i class="fa fa-fire text-danger"></i> 24小时热门推荐</div><div class="card-body p-0"><ul class="list-group list-group-flush"><li class="list-group-item"><a href="#" class="text-primary">放假了</a></li><li class="list-group-item"><a href="#" class="text-primary">放假了阿斯顿发送到</a></li></ul></div></div><!-- 热门推荐 2 --><div class="card"><div class="card-header bg-light"><i class="fa fa-fire text-danger"></i> 24小时热门推荐</div><div class="card-body p-0"><ul class="list-group list-group-flush"><li class="list-group-item"><a href="#" class="text-primary">放假了</a></li><li class="list-group-item"><a href="#" class="text-primary">放假了阿斯顿发送到</a></li></ul></div></div></div></div></div><script src="../static/plugins/bootstrap-5.3.0-alpha1-dist/js/bootstrap.bundle.js"></script>
</body></html>

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登录</title><link rel="stylesheet" href="../static/plugins/bootstrap-5.3.0-alpha1-dist/css/bootstrap.css"><style>.login-container {width: 400px;margin: 100px auto;padding: 20px;border: 1px solid #ddd;border-radius: 5px;}.form-label {font-weight: bold;}</style>
</head><body><div class="login-container"><form action="网页1.html" method="get"><div class="mb-3"><label for="username" class="form-label">用户名</label><input type="text" class="form-control" id="username" placeholder="用户名"></div><div class="mb-3"><label for="password" class="form-label">密码</label><input type="password" class="form-control" id="password" placeholder="密码"></div><button type="submit" class="btn btn-primary">登录</button></form></div>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>0001</title><link rel="stylesheet" href="../static/plugins/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css"><link rel="stylesheet" href="../static/css/01.css">
</head><body><div class="container mt-4"><!-- 按钮区域 --><div class="mb-3"><button type="button" class="btn btn-success btn-custom">新建</button><button type="button" class="btn btn-info btn-custom">批量导入</button><button type="button" class="btn btn-warning btn-custom">导出</button><button type="button" class="btn btn-success btn-custom">新建</button><button type="button" class="btn btn-info btn-custom">批量导入</button><button type="button" class="btn btn-outline-secondary btn-custom">导出</button><!-- 搜索区域 --><div class="search-container"><input type="text" class="form-control search-input" placeholder="请输入关键字"><button type="button" class="btn btn-outline-secondary"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"class="bi bi-search" viewBox="0 0 16 16"><pathd="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" /></svg></button></div></div><!-- 表格区域 --><table class="table table-bordered"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th><th>操作</th></tr></thead><tbody><tr><td>1</td><td><a href="#">Mark</a></td><td>Otto</td><td>@mdo</td><td><button type="button" class="btn btn-primary btn-sm">编辑</button><button type="button" class="btn btn-danger btn-sm">删除</button></td></tr><tr><td>2</td><td><a href="#">Mark</a></td><td>Thornton</td><td>@fat</td><td><button type="button" class="btn btn-primary btn-sm">编辑</button><button type="button" class="btn btn-danger btn-sm">删除</button></td></tr><tr><td>3</td><td><a href="#">Mark</a></td><td>the Bird</td><td>@twitter</td><td><button type="button" class="btn btn-primary btn-sm"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"class="bi bi-pencil-square" viewBox="0 0 16 16"><pathd="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" /><path fill-rule="evenodd"d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z" /></svg></button><button type="button" class="btn btn-danger btn-sm"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"class="bi bi-trash" viewBox="0 0 16 16"><pathd="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" /><pathd="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" /></svg></button></td></tr></tbody></table></div></body></html>

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>0002</title><link rel="stylesheet" href="../static/plugins/bootstrap-5.3.0-alpha1-dist/css/bootstrap.css"><link rel="stylesheet" href="../static/css/02.css">
</head><body><div class="main-container"><!-- 左侧区域 --><div class="left-section"><div class="card"><div class="card-header bg-light"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/></svg>最新申请列表</div><div class="card-body"><p class="text-muted small">注意：最新24小时提交的数据，如有疑问请联系分管领导</p><div class="table-container"><table class="table table-bordered"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></tr></thead><tbody><tr><td>1</td><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><td>1</td><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><td>1</td><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><td>1</td><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><td>2</td><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><td>3</td><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody></table></div><div class="pagination-container"><nav aria-label="Page navigation example"><ul class="pagination"><li class="page-item"><a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">上一页</span></a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item active"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">4</a></li><li class="page-item"><a class="page-link" href="#">5</a></li><li class="page-item"><a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">下一页</span></a></li></ul></nav></div></div></div></div><!-- 右侧区域 --><div class="right-section"><div class="card"><div class="card-header bg-light"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-fire" viewBox="0 0 16 16"><path d="M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-14.5c3.604 0 6.5 2.906 6.5 6.5s-2.896 6.5-6.5 6.5-6.5-2.906-6.5-6.5 2.896-6.5 6.5-6.5z"/><path d="M8 5.5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 1 .5-.5zm0 6a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1a.5.5 0 0 1 .5-.5z"/></svg>24小时热门推荐</div><div class="card-body"><ul class="list-group list-group-flush"><li class="list-group-item"><a href="#">放假了</a></li><li class="list-group-item"><a href="#">放假了阿斯顿发送到</a></li></ul></div></div><div class="card"><div class="card-header bg-primary text-white">24小时热门推荐</div><div class="card-body"><ul class="list-group list-group-flush"><li class="list-group-item"><a href="#">放假了</a></li><li class="list-group-item"><a href="#">放假了阿斯顿发送到</a></li></ul></div></div></div></div></body></html>