快速制作响应式的个人主页效果案例

博哥教你使用纯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/>	设置初始大小电脑屏幕下尺寸和圆角阴影效果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;<br/>width: 560px; backdrop-filter: blur(50px); border: 2px solid #ffffff40;	阴影圆角宽度滤镜模糊边框
5.个人简介容器	25px<br/>2.5rem<br/>20px	flex布局后容器元素间隔子元素h1(昵称)字体大小子元素div(岗位)字体大小<br/>
6.个人详情容器	50px<br/>1px<br/>3px 2rem 15px 16px 0.7	flex布局后容器元素间隔<br/>子元素文本间隔<br/>关注者粉丝数点赞数文本间隔关注者粉丝数点赞数字体大小关注者粉丝数点赞数底部间距关注者。。。数据--字体大小关注者。。。数据--透明度<br/>
7.社交平台容器	55px 55px<br/>15px<br/>color:#fff 40%	A标签宽度 A标签高度<br/>A标签间距<br/>图标颜色圆角
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.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="blue">联系我</button>
  <button class="orange">关注我</button>
</div>

(6) 完整页面代码

<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人资料卡设计</title>
    <link type="text/css" rel="stylesheet" href="css/reset.css">
    <link type="text/css" rel="stylesheet" href="css/style.css">
  </head>
  
  <body>
    <!--个人主页卡片-->
    <div class="profile-card">
      <!--1.头像容器-->
      <div class="profile-card-img">
        <img src="img/head.jpg" height="300" width="600px">
      </div>
      <!--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>
          <span>河南-洛阳-洛龙</span>
        </div>
      </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 class="profile-card-social">
        <a href="#" class="qq">
          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-qq" 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>
            <path d="M14 7h.01">
            </path>
            <path d="M10 7h.01">
            </path>
            <path d="M6 11c4 4 8 4 12 0">
            </path>
            <path d="M9 13.5v2.5">
            </path>
            <path d="M10.5 10c.667 1.333 2.333 1.333 3 0h-3z">
            </path>
            <path d="M16 21c1.5 0 3.065 -1 1 -3c4.442 2 1.987 -4.5 1 -7c0 -4 -1.558 -8 -6 -8s-6 4 -6 8c-.987 2.5 -3.442 9 1 7c-2.065 2 -.5 3 1 3h8z">
            </path>
          </svg>
        </a>
        <a href="#" class="wechat">
          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-wechat" 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>
            <path d="M16.5 10c3.038 0 5.5 2.015 5.5 4.5c0 1.397 -.778 2.645 -1.999 3.47l-.001 2.03l-1.964 -1.178a6.649 6.649 0 0 1 -1.536 .178c-3.038 0 -5.5 -2.015 -5.5 -4.5s2.462 -4.5 5.5 -4.5z">
            </path>
            <path d="M11.197 15.698c-.69 .196 -1.43 .302 -2.197 .302a8.008 8.008 0 0 1 -2.612 -.432l-2.388 1.432v-2.801c-1.237 -1.082 -2 -2.564 -2 -4.199c0 -3.314 3.134 -6 7 -6c3.782 0 6.863 2.57 6.996 5.785l.004 .233">
            </path>
            <path d="M10 8h.01">
            </path>
            <path d="M7 8h.01">
            </path>
            <path d="M15 14h.01">
            </path>
            <path d="M18 14h.01">
            </path>
          </svg>
        </a>
        <a href="#" class="douyin">
          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-tiktok" 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>
            <path d="M9 12a4 4 0 1 0 4 4v-12a5 5 0 0 0 5 5">
            </path>
          </svg>
        </a>
      </div>
      <!--5.社交平台-->
      <div class="profile-card-action">
        <button class="blue">联系我</button>
        <button class="orange">关注我</button>
      </div>
    </div>
  </body>

</html>

(7) 页面效果

在这里插入图片描述

3.2 样式实现思路解析

3.2.1 body初始化样式设置

字体风格---- 自定义即可
字体颜色---- 自定义即可
最小高度---- 屏幕高度
布局设置--------- Flex布局水平居中对齐
内间距设置------看重要参数准备中给定的值

效果
在这里插入图片描述

3.2.2 页面背景实现思路

实现思路
body添加伪元素铺满屏幕即可
伪元素样式设置
定位属性----------固定定位
间距调整----------- 0
层级关系设置-------- 调小层级关系
背景图片设置--------- 不平铺位置居中
背景图片尺寸-----自适应
伪元素背景需要添加放大动画效果

 &::before{
     content: '';
     position: fixed;
     inset:0 ;
     z-index: -1;
     background: url("../img/bg.jpg") no-repeat center;
     background-size: cover;
     animation: backGroundImgAnimate 20s forwards;
}
 @keyframes backGroundImgAnimate {
     from{
         transform: scale(1);
    }
     to{
         transform: scale(1.3);
    }
}

效果

在这里插入图片描述

3.2.3 个人主页卡片样式设置

阴影效果--------------------------------看重要参数准备中给定的值
圆角--------------------------------------看重要参数准备中给定的值
宽度---------------------------------------看重要参数准备中给定的值
模糊效果---------------------------------看重要参数准备中给定的值
边框----------------------------------------看重要参数准备中给定的值
内间距-------------------------------------看重要参数准备中给定的值
布局设置----------------------------------采用Flex布局主轴Y轴间距 40px

自适应效果考虑:方案:媒体查询

设备宽度 <768px时候
宽度------------------------------------------auto自动匹配

效果
在这里插入图片描述

在这里插入图片描述

.profile-card{
     box-shadow: 0 18px 200px -60px black;
     border-radius: 50px;
     width: 560px;
     backdrop-filter: blur(50px);
     border: 2px solid #ffffff40;
     padding: 3rem 5rem;
     display: flex;
     flex-direction: column;
     gap: 40px;
     @media screen and (max-width: 768px) {
         width: auto;
    }
}

3.2.4 头像元素样式设计

外间距margin---------------------------------------------------------自适应居中
圆角---------------------------------------------------------------------
圆形头像尺寸设置---------------------------------------------------------------中心
阴影效果设置--------------------------------------------------------------------看重要参数准备中给定的值
头像居中--------------------------------------------------------------------------设置为块元素即可

 &-img img{
     margin: auto;
     width: 200px;
     height: 200px;
     border-radius: 50%;
     object-fit: cover;
     box-shadow: 0 10px 60px -10px rgba(13,28,39,.5);
     display: block;
}

3.2.5 个人简介元素样式设计

内容居中--------------------------------
布局设置---------------------------------
布局容器元素间距设置--------------------------------看重要参数准备中给定的值

个人简介元素子元素标题样式设计

字体大小--------------------------------------------看重要参数准备中给定的值
加粗-----------------------------------------------------

个人简介元素子元素职位样式设计

字体大小----------------------------------------------看重要参数准备中给定的值

 &-desc {
     text-align: center;
     display: flex;
     flex-direction: column;
     gap: 25px;
     h1{
         font-size: 2.5rem;
         font-weight: bold;
         & + div{
             font-size: 20px;
        }
    }
}

在这里插入图片描述

3.2.6个人详情元素样式设计

布局-----------------------------------------------flex 对齐方式设置
布局容器间隔------------------------------------看重要参数准备中给定的值

自适应效果考虑:方案:媒体查询

设备宽度 <576px时候
flex布局容器中的元素间隔 30px

个人详情子元素样式

字体加粗--------------------------------------------------------------
文本间隔--------------------------------------------------------------看重要参数准备中给定的值
内容居中---------------------------------------------------------------

标题子元素样式粉丝数关注者点赞数

字体加粗----------------------------------------------------------
文本间距----------------------------------------------------------看重要参数准备中给定的值
字体大小-----------------------------------------------------------看重要参数准备中给定的值
底部间隔-----------------------------------------------------------看重要参数准备中给定的值

标题子元素样式粉丝数关注者点赞数>>数据

字体大小----------------------------------------------------------------看重要参数准备中给定的值
透明度--------------------------------------------------------------------看重要参数准备中给定的值

 &-info{
     display: flex;
     justify-content: center;
     gap: 50px;
     @media screen and (max-width: 576px){
         gap: 30px;
    }
     & >div{
         font-weight: bold;
         text-align: center;
         text-space: 1px;
         & > *:first-child{
             font-weight: bold;
             letter-spacing: 3px;
             font-size: 2rem;
             margin-bottom: 15px;
        }
         & > *:last-child{
             font-size: 16px;
             opacity: .7;
        }
    }
}

在这里插入图片描述

3.2.7 社交平台元素样式设计

布局------------------------------------------flex 对齐不换行

子标签A样式设定

布局--------------------------------------------行内元素采用flex布局
高度------------------------------------------看重要参数准备中给定的值
宽度----------------------------------------看重要参数准备中给定的值
定位-----------------------------------------相对定位
缩放-----------------------------------------禁止
圆角-----------------------------------------
过渡效果--------------------------------------

子标签A在移动设备上的移入效果

设备宽度 768px时候
height: 50px;
width:  50px;
margin: 10px;
移入效果
放大 1.2倍移动 -5px

社交图标设置不同背景色和阴影效果

背景色----------------------------------------看重要参数准备中给定的值
阴影---------------------------------------------看重要参数准备中给定的值

 &-social{
     display: flex;
     justify-content: center;
     align-items: center;
     flex-wrap: nowrap;
     a{
         display: inline-flex;
         height: 55px;
         width: 55px;
         margin: 15px;
         color: white;
         border-radius: 40%;
         align-items: center;
         justify-content: center;
         position: relative;
         flex-shrink: 0;
         transition: all .3s;
         @media screen and (max-width: 768px){
             height: 50px;
             width: 50px;
             margin: 10px;
        }
         @media screen and (min-width: 768px){
             &:hover{
                 transform: scale(1.2) translateX(-5px);
            }
        }
         &.qq{
             background: linear-gradient(45deg,#3b5998,#0078d7);
             box-shadow: 0 40px 30px rgba(43,98,169,0.5);
        }
         &.wechat{
             background: linear-gradient(45deg,#1da1f2,#0e71c8);
             box-shadow: 0 40px 30px rgba(19,127,211,0.7);
        }
         &.douyin{
             background: linear-gradient(45deg,#405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
             box-shadow: 0 40px 30px rgba(120,64,190,0.6);
        }
    }
}

在这里插入图片描述

3.2.8 和我互动容器样式设计

布局-------------------------------------flex
flex布局容器元素间隔----看重要参数准备中给定的值

自适应效果考虑:方案:媒体查询

设备宽度 <768px时候
flex-direction: column;
gap:1.5rem

按钮子元素样式

加粗-------------------------------------------
字体大小--------------------------------------看重要参数准备中给定的值
内间距----------------------------------------看重要参数准备中给定的值
最小宽度--------------------------------------看重要参数准备中给定的值
鼠标指针----------------------------------------

自适应效果考虑:方案:媒体查询:按钮尺寸

@media screen and (max-width: 768px) {
     min-width: 170px;
}
 @media screen and (max-width: 576px) {
     min-width: inherit;
     width: 100px;
     max-width:350px ;
}
 @media screen and (min-width: 576px) {
     &:hover{
         transform: translateY(-5px);
    }
}

按钮样式

 &.blue{
     background: linear-gradient(45deg,#1da1f2,#0e71c8);
     box-shadow: 0 4px 30px rgba(19,127,212,.4);
     &:hover{
         box-shadow: 0 4px 30px rgba(19,127,212,.75);
    }
}
 &.orange{
     background: linear-gradient(45deg,#d5135a,#f05924);
     box-shadow: 0 4px 30px rgba(223,45,70,.35);
     &:hover{
         box-shadow: 0 4px 30px rgba(19,127,212,.75);
    }
}

在这里插入图片描述

快速制作响应式的个人主页效果案例

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

前言

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

1.1.前置知识

1.2.图标网站

1.3.需要提前下载的css库

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

二.重要参数准备

三.案列实现思路解析

3.1.1 创建个人主页页面容器

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

(1) 头像元素

(2) 个人简介元素

(3) 个人详情元素

(4) 社交平台

(5) 底部活动元素

(6) 完整页面代码

(7) 页面效果

3.2 样式实现思路解析

3.2.1 body初始化样式设置

3.2.2 页面背景实现思路

3.2.3 个人主页卡片样式设置

自适应效果考虑:方案:媒体查询

3.2.4 头像元素样式设计

3.2.5 个人简介元素样式设计

个人简介元素子元素标题样式设计

个人简介元素子元素职位样式设计

3.2.6个人详情元素样式设计

自适应效果考虑:方案:媒体查询

个人详情子元素样式

标题子元素样式 粉丝数 关注者 点赞数

标题子元素样式 粉丝数 关注者 点赞数>>数据

3.2.7 社交平台元素样式设计

子标签A样式设定

子标签A在移动设备上的移入效果

社交图标设置不同背景色和阴影效果

3.2.8 和我互动容器样式设计

自适应效果考虑:方案:媒体查询

按钮子元素样式

自适应效果考虑:方案:媒体查询:按钮尺寸

博哥的编程日记

引用和评论

HTML+CSS完成毛玻璃发光按钮的制作

Vue.js-Vue实例

你可能不知道的图片加载相关知识

更强大、更灵活！ defineModel 重新定义双向绑定

使用CSS给标题添加书名号并超出省略

Base64编码的“暗坑”：解密失败？可能是这些原因！

Koa+Typescript起手式(空环境) 不用每次玩node都要搭环境了！

标题子元素样式粉丝数关注者点赞数

标题子元素样式粉丝数关注者点赞数>>数据