5bei.cn大模型教程网
作业1：
代码：
用户注册
body { background-color: #f0f0f0; font-family: sans-serif; }
table {
margin: 20px auto;
border-collapse: collapse;
background: white;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h2 { text-align: center; }
td { padding: 8px 12px; }
用户注册
用户名：
密码：
性别：
男
女
爱好：
写作
听音乐
体育
省份：
陕西省
山西省
自我介绍：
运行界面：
作业2：
代码:
工商银行电子汇款单
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Microsoft YaHei", "Segoe UI", sans-serif;
}
body {
background: #fff;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
color: #000;
}
.container {
max-width: 800px;
width: 100%;
background: white;
box-shadow: 0 0 8px rgba(0,0,0,0.1);
border: 1px solid #ddd;
}
.header {
padding: 15px 25px;
border-bottom: 2px solid #000;
text-align: center;
}
.main-title {
font-size: 20px;
font-weight: bold;
margin-bottom: 5px;
}
.subtitle {
font-size: 18px;
font-weight: bold;
padding: 10px 0;
}
.receipt-info {
padding: 10px 25px;
border-bottom: 1px solid #ddd;
font-size: 14px;
font-weight: bold;
}
.form-content {
padding: 15px 25px;
}
.two-column-layout {
display: flex;
margin-bottom: 20px;
}
.column {
flex: 1;
padding: 10px;
border: 1px solid #000;
}
.column + .column {
margin-left: 20px;
}
.column-title {
font-size: 16px;
font-weight: bold;
margin-bottom: 15px;
text-align: center;
padding-bottom: 5px;
border-bottom: 1px solid #000;
}
.form-row {
display: flex;
margin-bottom: 12px;
}
.label {
width: 60px;
font-size: 14px;
}
.value {
flex: 1;
font-size: 14px;
font-weight: 500;
padding-bottom: 3px;
border-bottom: 1px dashed #000;
}
.amount-section {
padding: 15px;
border: 1px solid #000;
margin-bottom: 20px;
}
.amount-row {
display: flex;
margin-bottom: 10px;
}
.amount-label {
width: 80px;
font-size: 14px;
}
.amount-value {
flex: 1;
font-size: 14px;
font-weight: 500;
padding-bottom: 3px;
border-bottom: 1px dashed #000;
}
.total-amount {
font-size: 14px;
font-weight: bold;
margin-top: 10px;
text-align: center;
}
.form-info {
font-size: 14px;
text-align: center;
padding: 10px 0;
border-top: 1px dashed #ddd;
margin-top: 15px;
}
.footer {
padding: 15px 25px;
display: flex;
justify-content: space-between;
border-top: 1px solid #ddd;
font-size: 14px;
}
.button-container {
text-align: center;
padding: 20px;
border-top: 1px dashed #ddd;
}
.edit-button {
background: #e0e0e0;
color: #000;
border: 1px solid #999;
padding: 8px 45px;
font-size: 16px;
cursor: pointer;
}
工商银行电子汇款单
电子汇款单
指令序号：HQH00000000000013878172
汇款人信息
户名：
老刘
卡号：
000000000001
地区：
杭州
网点：
工商银行杭州分行
收款人信息
户名：
老单
卡号：
000000000002
地区：
南京
网点：
工商银行南京分行
汇款类型：
网上转账汇款
汇款币种：
人民币（CNY）
汇款金额：
1.00元
手续费：
0.57元
合计人民币金额：壹圆整
此电子回单供客户参考，不作为正式财务凭证
运行界面：
作业3：
代码：
将进酒
body {
font-family: "SimSun", serif;
background: #fefde9;
max-width: 700px;
margin: 0 auto;
padding: 30px;
color: #663300;
line-height: 2;
display: flex;
position: relative;
}
.content-container {
flex: 1;
}
h1 {
text-align: left;
font-size: 2.5em;
letter-spacing: 15px;
margin-bottom: 30px;
text-shadow: 2px 2px 3px rgba(0,0,0,0.2);
}
.poem {
text-align: left;
font-size: 1em;
}
.author {
text-align: right;
font-style: italic;
font-size: 1.5em;
margin-top: 20px;
padding-right: 100px;
}
.image-area {
flex: 0 0 300px;
padding: 10px 40px 10px 10px;
display: flex;
justify-content: center;
align-items: center;
}
.image-area img {
width: 100%;
max-height: 85vh;
object-fit: cover;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
border-radius: 3px;
filter: sepia(0.3) contrast(1.1);
}
@media (max-width: 768px) {
body {
flex-direction: column;
}
.image-area {
flex: 0 0 auto;
width: 100%;
padding: 20px 0;
text-align: center;
}
.image-area img {
max-width: 80%;
max-height: 400px;
}
}
将进酒
君不见黄河之水天上来，奔流到海不复回。
君不见高堂明镜悲白发，朝如青丝暮成雪。
人生得意须尽欢，莫使金樽空对月。
天生我材必有用，千金散尽还复来。
烹羊宰牛且为乐，会须一饮三百杯。
岑夫子，丹丘生，将进酒，杯莫停。
与君歌一曲，请君为我侧耳听。
钟鼓馔玉不足贵，但愿长醉不复醒。
古来圣贤皆寂寞，惟有饮者留其名。
陈王昔时宴平乐，斗酒十千恣欢谑。
主人何为言少钱，径须沽取对君酌。
五花马，千金裘，
呼儿将出换美酒，与尔同销万古愁。
其中，李白人物的图片直接在网上找到，右键复制图片链接即可。
运行界面：
作业4：
代码：
豆瓣电影
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Helvetica Neue", Arial, sans-serif; }
.container { max-width: 1200px; margin: 0 auto; }
header {
padding: 15px 0;
border-bottom: 1px solid #eee;
}
h1 {
font-size: 24px;
font-weight: normal;
color: #0277BD;
margin-bottom: 10px;
}
nav {
display: flex;
border-bottom: 2px solid #eee;
padding-bottom: 10px;
margin-bottom: 20px;
}
nav a {
color: #0277BD;
text-decoration: none;
margin-right: 25px;
font-size: 14px;
}
nav a:hover { color: #ff8500; }
.more { margin-left: auto; }
.movie-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.movie-card img {
width: 100%;
height:300px;
object-fit: cover;
border-radius: 3px;
}
.movie-title {
margin-top: 8px;
font-size: 14px;
color: #333;
}
.rating {
font-size: 12px;
color: #ff8500;
}
热门电影板块
猜火车
贝尔科实验
加州公路巡警
歌声不绝
明日的我与昨日的我
速度与激情8
极速特工
金刚狼3：殊死一战
其中，电影海报的图片直接在网上找到，右键复制图片链接即可。
运行界面：
文章来源于互联网:web第一次作业
文生视频AIGC：5大开源工具对比与使用指南 关键词：文生视频、AIGC、开源工具、视频生成、深度学习、Diffusion模型、对比分析 摘要：本文深入探讨了当前最先进的5大文生视频开源工具，包括Stable Video Diffusion、VideoCraf…
