网页设计实战教程：30行代码打造“星际探险队”花名册
今天的目标
我们要制作一个网页，上面并排展示三位队员的卡片。每张卡片都有：
1. 圆形头像：看起来更现代。
2. 半透明背景：科技感满满。
3. 职位印章：斜着盖在右上角（比如“队长”）。
--------------------------------------------------------------------------------
第一部分：拆解 HTML (搭建骨架)
HTML 就像是房子的钢筋混凝土，决定了网页里有哪些东西。
1. 网页的“脑袋”和“身体”
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>星际小队</title>
</head>
<body>
</body>
</html>
复习：HTML 文档分为 Head（头部）和 Body（主体）两部分，Head 里的内容（除了 title）通常是在后台工作的，Body 里的内容才是给用户看的。
2. 队员卡片的结构 (div)
<div class="card">
<div class="badge">队长</div>
<img src="nezha.png">
<h3>哪吒</h3>
<p>全栈工程师</p>
</div>
• <div>：这是一个**“大盒子”**。我们用它把头像、名字、印章全部包在一起，形成一张卡片。
• class="card"：注意啦！这里我们没有用 id，而是用了 class（类）。因为我们有三个队员，他们都穿一样的“制服”（样式）。ID 是唯一的（像身份证），但 Class 可以多人共用（像校服）。
• <h3> & <p>：h3 是三级标题，字体比较大；p 是段落，用来写小字。
--------------------------------------------------------------------------------
第二部分：CSS 魔法解析 (美化与布局)
这一部分是今天的重头戏！我们要把干巴巴的文字变成漂亮的卡片。
1. 宇宙背景 (Body 样式)
body {
background-image: url('space.jpg'); /* [A] */
background-size: cover; /* [B] */
text-align: center; /* [C] */
}
• [A] background-image：给网页贴上一张酷炫的星空壁纸。
• [B] background-size: cover：这张图片可能不够大，用 cover 命令它可以自动拉伸铺满整个屏幕，不留白边。
• [C] text-align: center：让网页里所有的文字和图片都居中显示，不再缩在左下角。
2. 制作“英雄卡”模具 (.card 样式)
这是最重要的部分！只要写一次 .card，哪吒、敖丙、太乙三个人都能用。
.card {
display: inline-block; /* [A] 核心魔法！ */
width: 200px; /* 限制卡片宽度 */
background-color: rgba(255, 255, 255, 0.9); /* [B] 半透明白 */
border-radius: 15px; /* [C] 圆角 */
margin: 20px; /* [D] 卡片之间的距离 */
position: relative; /* [E] 爸爸设为相对定位 */
}
• [A] display: inline-block：
◦ 原理：div 标签本来是块级元素（Block），性格霸道，喜欢独占一行。
◦ 魔法：加上这就话，让它变成“内联块级”，性格变随和了，愿意和其他人并在同一行站立，同时还能保持自己的大小。这就是让三张卡片横排的秘密！
• [B] rgba(...)：最后的 0.9 代表透明度。让背景白得不那么死板，透出一点点背后的星空。
• [C] border-radius: 15px：把尖锐的直角磨圆，看起来更舒服。
• [D] margin: 20px：外边距。让卡片之间不要贴得太紧，保持“社交距离”。
• [E] position: relative：相对定位。这一句是为了配合下面的印章使用的。它告诉印章：“你定位的时候，要以我（卡片）为准，不要乱跑！”。
3. 圆形头像 (img 样式)
img {
width: 100px;
height: 100px;
border-radius: 50%; /* [A] 变圆术 */
border: 3px solid #00bfff; /* [B] 加边框 */
}
• [A] border-radius: 50%：当圆角弧度达到 50% 时，正方形图片就会变成一个完美的圆形。
• [B] border：给头像加上 3 像素宽的亮蓝色边框，像飞船的舷窗一样。
4. 悬浮印章 (.badge 样式)
我们要把红色的“队长”印章，精准地钉在卡片右上角。
.badge {
position: absolute; /* [A] 绝对定位 */
top: 10px; /* [B] 距离顶部 10px */
right: 10px; /* [C] 距离右边 10px */
transform: rotate(20deg); /* [D] 旋转 */
/* 下面是装饰样式 */
color: red;
border: 2px solid red;
font-weight: bold;
}
• [A] position: absolute：绝对定位。
◦ 这是 CSS 里的“飞行模式”。加上它，印章就会浮起来，不再受文字排版的影响。
◦ 因为爸爸 .card 设置了 relative，所以印章会飞到卡片的右上角，而不是网页的右上角。
• [B] & [C] top / right：这是坐标。告诉印章离卡片的上边和右边各保留 10 像素的距离。
• [D] transform: rotate(20deg)：让印章顺时针旋转 20 度，看起来像是人手盖上去的，更有动感！
--------------------------------------------------------------------------------
课后小挑战
现在的卡片只有三个队员。 挑战任务：
1. 增加队员：你能复制一段 HTML 代码，把“申公豹”也加进队伍里吗？
2. 修改印章：试着修改 .badge 的 CSS，把印章变成紫色，并且旋转角度改成 -20度（向左歪）。
快去修改代码，组建你专属的星际战队吧！
--------------------------------------------------------------------------------
关注我们，下节课教你如何用 Python 爬虫去网络世界“抓宝藏”！
相关知识
HTML+CSS+JavaScript美食博客网页制作教程：从零开始，超详细代码解析与完整示例，适合初学者！
Photoshop+PxCook+Cutterman网页UI设计教程
Thinkphp5.0实战教程
html网页制作——作 HTML+CSS鲜花网页设计实例
Bootstrap响应式食饮类网页制作教程资源
Vue.js 订单页面实战：从零打造用户友好界面
NocoBase 实战教程 —— 任务管理系统
html5网页设计鲜花源代码
html5鲜花网页代码
Laravel 最好的实战教程
网址: 网页设计实战教程：30行代码打造“星际探险队”花名册 https://m.huajiangbk.com/newsview2553669.html
| 上一篇: 一本赏心悦目的绒花教程 |
下一篇: 时尚黑科技 荷兰设计师3D打印可 |
