首页 > 其他分享 >03HTML+CSS

03HTML+CSS

时间:2024-07-27 15:18:24浏览次数:14  
标签:24 20 21 22 案例 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>

 

标签:24,20,21,22,案例,03HTML,注册,CSS
From: https://www.cnblogs.com/Lyh3012648079/p/18327008

相关文章

  • selenium----CSS表达式选择元素
    前面我们学习了根据id、class属性、tag名选择元素。如果我们要选择的元素没有id、class属性,或者有些我们不想选择的元素也有相同的id、class属性值,怎么办呢?这时候我们通常可以通过 CSSselector 语法选择元素。选择元素通过CSSSelector选择单个元素的方法是fin......
  • html+css 实现水波纹按钮
    前言:哈喽,大家好,今天给大家分享html+css绚丽效果!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦......
  • 【HTML+CSS】HTML锚点:创建页面内导航的简易指南
    目录一、什么是HTML锚点?二、如何创建HTML锚点?1.定义锚点目标2.创建指向锚点的链接三、进阶使用1.平滑滚动2.动态锚点四、锚点工具总结五、锚点的应用场景1. 长页面导航2. 表单导航3. 图像画廊4. FAQ页面六、锚点的SEO考虑七、锚点的兼容性八、实践建议......
  • 【HTML+CSS】CSS字体美化:打造引人入胜的视觉盛宴
    目录一、选择合适的字体1.1Web安全字体1.2自定义字体二、字体样式调整2.1字体大小与行高2.2字体粗细与斜体2.3字体颜色三、文本装饰与布局3.1文本阴影3.2文本换行与对齐3.3文本装饰线四、字体美化实战案例 在网页设计中,字体不仅仅是文字信息的载体,更是......
  • 【HTML+CSS】使用HTML与后端技术连接数据库
    目录一、概述1.1HTML前端1.2后端技术1.3数据库二、HTML表单示例三、PHP后端示例3.1连接数据库3.2接收数据并插入数据库四、安全性4.1防止SQL注入4.2数据验证与清洗五、优化5.1索引优化5.2查询优化六、现代Web开发中的最佳实践6.1使用ORM(对象关系映射......
  • 【HTML+CSS】CSS中的对齐艺术
    目录1.水平居中文本水平居中行内元素或行内块元素水平居中块级元素水平居中2.垂直居中单行文本垂直居中弹性盒布局(Flexbox)绝对定位与负边距3.同时水平垂直居中弹性盒布局(Flexbox)绝对定位与transform4.左对齐2.右对齐        在网页设计中,元素的居......
  • 02HTML+CSS
    今天下午学习了列表,表格和表单。列表:列表分为无序列表,有序列表,定义列表。无序列表没有加样式,界面显示出来前面都是一个点,有序列表显示是带有数字1,2,3的列表,而定义列表,可以给出列表的标题和内容。一般来说,我们用到无序列表多,也是重点。无序列表格式:父标签<ul><li></li></ul>,里面......
  • 01HTML+CSS
    今日正式开始学习前端,学习内容有1.标签的写法:标签分为单标签和双标签,其中他们都是由尖括号组成<>,例如:加粗标签<strong></strong>,倾斜标签<em></em>,下划线标签<ins></ins>,删除线标签<del></del>。2.HTML的基本骨架:HTML主要由<HTML></HTML>组成,在这里面有<head></head&g......
  • 可以捕捉高动态范围成像的的AR0521SR2C09SURA0-DP2、AR0522SRSM09SURA0-DP2、AR0821CS
    AR0521SR2C09SURA0-DP2、AR0522SRSM09SURA0-DP2、AR0821CSSC18SMEA0-DPBR图像传感器——明佳达1、AR0521SR2C09SURA0-DP2是一款1/2.5英寸CMOS数字图像传感器,带有2592(H)×1944(V)有效像素阵列。它能在线性或高动态范围模式下捕捉图像,且带有卷帘快门读取,其中包含了复杂......
  • 前端练习<Html&CSS>——悬浮抽卡片(附完整代码及实现效果)
    这个小练习来源于b站up小K师兄,大家可以通过下面的链接学习哦~up讲的非常详细。写一个好玩的悬浮抽卡片效果~先看一下效果:1.鼠标没有放置到card上2.鼠标放到card上,所有card呈角度散开 3.单击选中某一张卡片,卡片上浮高亮,其他卡片变暗 HTML部分<html> 标签定义了整个H......