乐趣区

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

作者：

jiezi

在

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

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章