作业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元
 
 
合计人民币金额：壹圆整
 
 
 此电子回单供客户参考，不作为正式财务凭证 
 
 
 
 
票据打印时间：2017-06-01 14:30:45
 
打印单位：工商银行电子汇款中心
 
 
 
操作员：ICBC00123
 
打印次数：1
 
 
 
 编辑 
 

运行界面：

作业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.1分
 
 
  
贝尔科实验
 
6.0分
 
 
  
加州公路巡警
 
6.8分
 
 
  
歌声不绝
 
6.3分
 
 
  
明日的我与昨日的我
 
 
  
速度与激情8
 
 
  
极速特工
 
 
  
金刚狼3：殊死一战
 
 
 

其中，电影海报的图片直接在网上找到，右键复制图片链接即可。

运行界面：