关于前端:快速制作响应式的个人主页效果案例

45次阅读

共计 11635 个字符，预计需要花费 30 分钟才能阅读完成。

博哥教你应用纯 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);
    }
}

正文完
前端
发表至： 前端
2023-01-15
 0
关于前端:前端周刊202112期
关于前端:i18npro轻量简单灵活的自动翻译工具
关于前端:亿级大表在线不锁表变更字段与索引
关于前端:浏览器从输入URL到页面加载的全过程