03HTML+CSS

跟着视频完成第二天的综合案例,分别为新闻界面和注册案例

新闻界面代码

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>综合案例一</title>
 7 </head>
 8 <body>
 9     <ul>
10         <li>
11             <img src="./images/1.jpg">
12             <h3>主帅安东尼奥回西班牙休假 国青抵达海口进行隔离</h3>
13         </li>
14         <li>
15             <img src="./images/2.jpg" alt="">
16             <h3>梅州主帅:申花有强有力的教练组 球员体能水平高</h3>
17         </li>
18         <li>
19             <img src="./images/3.jpg" alt="">
20             <h3>马德兴:00后球员将首登亚洲舞台 调整心态才务实</h3>
21         </li>
22     </ul>
23 </body>
24 </html>
复制代码

注册案例代码

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>注册信息</title>
 8 </head>
 9 
10 <body>
11     <h1>注册信息</h1>
12     <form action="">
13         <h2>个人信息</h2>
14         <label>姓名:</label><input type="text" placeholder="请输入真实姓名">
15         <br><br>
16         <label>密码:</label><input type="password" placeholder="请输入密码">
17         <br><br>
18         <label>确认密码:</label><input type="password" placeholder="请输入确认密码">
19         <br><br>
20         性别:
21         <label><input type="radio" name="gender"></label>
22         <label><input type="radio" name="gender" checked></label>
23         <br><br>
24         居住城市:
25         <select>
26             <option>北京</option>
27             <option>上海</option>
28             <option>广州</option>
29             <option>深圳</option>
30             <option selected>武汉</option>
31         </select>
32         <h2>教育精力</h2>
33         最高学历:
34         <select>
35             <option>博士</option>
36             <option>硕士</option>
37             <option>本科</option>
38             <option>大专</option>
39         </select>
40         <br><br>
41         <label>学校名称:</label><input type="text">
42         <br><br>
43         <label>所学专业:</label><input type="text">
44         <br><br>
45         在校时间:
46         <select>
47             <option>2015</option>
48             <option>2016</option>
49             <option>2017</option>
50             <option>2018</option>
51         </select>
52         --
53         <select>
54             <option>2019</option>
55             <option>2020</option>
56             <option>2021</option>
57             <option>2022</option>
58         </select>
59         <h2>工作经历</h2>
60         <label>公司名称:</label><input type="text">
61         <br><br>
62         <label>工作描述:</label>
63         <br>
64         <textarea></textarea>
65         <br><br>
66         <input type="checkbox">已阅读并同意以下协议:
67         <ul>
68             <li>
69                 <a href="./19-综合案例二.html"><ins>《用户服务协议》</ins></a>
70             </li>
71             <li>
72                 <a href="./19-综合案例二.html"><ins>《隐私政策》</ins></a>
73             </li>
74         </ul>
75         <br><br>
76         <button type="submit">免费注册</button>
77         <button type="reset">重新填写</button>
78     </form>
79 </body>
80 
81 </html>
复制代码

 

posted @   新晋软工小白  阅读(4)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤
点击右上角即可分享
微信分享提示