首页 > 其他分享 >快速制作响应式的个人主页效果案例

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

时间：2023-01-15 22:35:31浏览次数：57  
标签：flex width 容器 元素 案例 给定 个人主页 参数 响应

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

Author:博哥

时间:2023-01-11

前言

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

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="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;
  }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7keS0ciA-1673790921251)(E:\黑耀石知识库\个人创作\个人自媒体创作\编程自媒体\1000-图片\前端\A2!在这里插入图片描述
)]

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);
        }
       }

在这里插入图片描述

标签：flex,width,容器,元素,案例,给定,个人主页,参数,响应
From： https://www.cnblogs.com/bogedev/p/17054366.html

相关文章

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99