快速制作响应式的个人主页案列

博哥教你使用纯CSS制作酷炫的个人名片效果

Author:博哥

时间:2023-01-11

---

前言

• 该文档对应的视频教程，请移步B站观看！
• 去B站播放该教程

一.需要掌握的前置知识和用的素材

1.1.前置知识

• HTML
• CSS
• SASS
• FLEX
• 媒体查询响应式布局

1.2.图标网站

https://tabler-icons.io/

1.3.需要提前下载的css库

重置网页样式的css库: reset.css

博哥素材提供&自行从网上下载

1.4.该案例效果用的图片素材

博哥素材提供&自行从网上下载

二.重要参数准备

作用的位置	参数值	具体说明
1.头像	height=“260px” width=“650px” height=“200px” width=“200px” 圆角-50% box-shadow: 0 10px 60px -10px rgba(13,28,39,.5)	设置初始大小 电脑屏幕下尺寸和圆角 阴影效果br>
2.body	padding: 2rem; color:skyBlue	初始化时body元素内间距 字体颜色等
3.背景图片	scale(1)—scale(1.3)	背景放大比例变化
4.个人主页卡片容器	box-shadow: 0 18px 200px -60px black; border-radius: 50px; width: 560px; backdrop-filter: blur(50px); border: 2px solid #ffffff40;	阴影 圆角 宽度 滤镜模糊 边框
5.个人简介容器	25px 2.5rem 20px	flex布局后容器元素间隔 子元素h1(昵称)字体大小 子元素div(岗位)字体大小
6.个人详情容器	50px 1px 3px 2rem 15px 16px 0.7	flex布局后容器元素间隔 子元素文本间隔 关注者 粉丝数 点赞数文本间隔 关注者 粉丝数 点赞数字体大小 关注者 粉丝数 点赞数 底部间距 关注者。。。数据–字体大小 关注者。。。数据–透明度
7.社交平台容器	55px 55px 15px color:#fff 40%	A标签宽度 A标签高度 A标签间距 图标颜色 圆角
8.社交平台图标	background: linear-gradient(45deg,#3b5998,#0078d7); box-shadow: 0 40px 30px rgba(43,98,169,0.5); background: linear-gradient(45deg,#1da1f2,#0e71c8); box-shadow: 0 40px 30px rgba(19,127,211,0.7); background: linear-gradient(45deg,#405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d); box-shadow: 0 40px 30px rgba(120,64,190,0.6);	QQ 微信 抖音
9.我的互动容器	2rem 22px 15px 250px color:white	flex布局容器间隔 按钮字体大小 按钮内间距 按钮最小宽度 按钮字体颜色

三.案列实现思路解析

3.1.页面实现思路解析

3.1.1 创建个人主页页面容器

• 需要一个大的容器元素 个人主页卡片>>Div容器>> profile-card

 <!--个人主页卡片-->
<div class="profile-card">

</div>

3.1.2 个人主页容器中的子元素

(1) 头像元素

• 头像元素 头像>>Div容器>>profile-card-img

• 头像的子元素

​ img----头像图片

<!--个人主页卡片-->
<div class="profile-card">
    <!--1.头像容器-->
    <div class="profile-card-img">
        <img src="img/head.jpg">
    </div>
</div>

(2) 个人简介元素

• 个人简介 个人简介>>Div容器>> profile-card-desc

• 个人简介子元素

h1-----------------------------个人名称的标题文字

div-----------------------------职位|职位介绍

div-----------------------------地理位置图标------------使用在线图标库------搜索map-pin

 <!--2.个人简介容器-->
 <div class=">profile-card-desc">
        <h1>博哥的编程日记</h1>
        <div>全栈开发者</div>
        <div>
            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-map-pin" width="24" height="24"               viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-                   linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <circle cx="12" cy="11" r="3"></circle>
            <path d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z"></path>
           </svg>
        </div>
  </div>

(3) 个人详情元素

• 个人详细信息 个人详细信息>>Div容器>>profile-card-info

• 个人详细信息子元素

div----------------------------------------个人详情

 <!--3.个人详细信息-->
<div class="profile-card-info">
    <div>
        <div>800W</div>
        <div>粉丝数</div>
    </div>
    <div>
        <div>50</div>
        <div>关注者</div>
    </div>
    <div>
        <div>5000</div>
        <div>点赞数</div>
    </div>
</div>

(4) 社交平台

• 社交平台 社交平台>>Div容器>>profile-card-social

• 社交平台子元素

a----------------------存放对应平台图标----------------------使用在线图标

<!--4.社交平台-->
<div class="profile-card-social">
    <a href="#" class="qq">QQ</a>
    <a href="#" class="wechat">微信</a>
    <a href="#" class="douyin">抖音</a>
</div>

(5) 底部活动元素

• 底部活动 底部活动>>Div容器>>profile-card-action

• 底部活动子元素

​ button--------------------------------------------相关按钮

 <!--5.社交平台-->
<div class="profile-card-action">
    <button class