Day23 切版笔记- 人员介绍卡片

运用到的观念

border搭配伪元素制作出三角形区块
绝对定位&相对定位
用:hover 搭配transform、transition作出互动效果
盒模型观念
用:hover 搭配background-image/color、transition作出互动效果
flex

HTML结构

先做一个wrap区块
里面包三个item区块
item里面有图片和文字
文字另外用一个txt区块包起来

<div class="wrap">
    <div class="item">
        <img src="https://picsum.photos/300/300?random=10">
        <div class="txt">
            <h2>小宝</h2>
            <p>
                古代人相信将玛尔济斯放在身上不舒服的地方可以帮助症状缓和，因此有疗效之意。绯尼基人航行到马尔他岛，他们所带来的犬种在几经配种繁衍後，产生了马尔济斯种，是最古老的赏玩犬种之一。马尔济斯的祖先大约在古罗马时代就已被引进到欧洲，马尔济斯犬并不被当作看家犬，而是王公贵族等上流阶级的宠物。</p>
        </div>
    </div>
    <div class="item">
        <img src="https://picsum.photos/300/300?random=20">
        <div class="txt">
            <h2>大宝</h2>
            <p>迷你雪纳瑞是雪纳瑞家族中的小型犬种，於19世纪中後期产於德国。吃苦耐劳、反应机敏、又活力充沛的小型犬。迷你雪纳瑞是由标准雪纳瑞和许多小型犬，包括贵宾犬 、迷你杜宾犬或是艾芬笃宾犬配种衍生而来。
迷你雪纳瑞最让人熟悉的是他们友善的个性和调皮又充满活力，他们对主人是非常的忠心并保护。</p>
        </div>
    </div>
    <div class="item">
        <img src="https://picsum.photos/300/300?random=30">
        <div class="txt">
            <h2>二宝</h2>
            <p>台湾犬，又称台湾土犬、福尔摩莎犬、国宝犬、高沙犬，台湾犬是犬只品种，属於驯化动物，台湾培育之犬科动物（不是原生种动物），最早起源自台湾高海拔地区原住民饲养的猎犬，是南亚狩猎犬的後代。牠们非常适应台湾崎岖不平的地形，现在大多作为狩猎犬、护卫犬、特技犬、搜救犬、或者是陪伴犬。</p>
        </div>
    </div>
</div>

CSS结构

1.CSS Reset&设定wrap区块和item区块宽度

*{
  margin:0;
  padding:0; 
  list-style: none;
}
.wrap{
  width:1200px;
  display:flex;
  margin: auto; 
}

.item{
  width:370px; /*盒模型概念 370+15左margin+15右margin=400px*/
  margin:15px; 
}

处理图片多出来的空白处
将图片设定会填满item宽度
并设定verticla-align:middle将下方多出来的区块消除

.item img{
  width:100%;
  vertical-align: middle;
}

设定item区块内的文字置中排列

.item{
   width:370px; 
   margin:15px;
   text-align: center;
   }

再h2下新增一个底线
p段落新增行距

.item h2{
  border-bottom: 1px solid #888; 
  padding-bottom: .3em;
  margin-bottom: .4em;
  }
 
.item p{
  line-height: 1.6;
}

载入google fonts字体到html的head内

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>铁人赛Day23</title>
   <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;500;700;900&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="./styles/style.css">
</head>

新增字体设定到css
h2, p新增font-weight

*{
  margin:0;
  padding:0; 
  list-style: none;
  font-family: 'Noto Sans TC', sans-serif;
}


.item h2{
  border-bottom: 1px solid #888; 
  padding-bottom: .3em;
  margin-bottom: .4em;
  font-weight: 900;
}

.item p{
  line-height: 1.6;
  font-weight: 300;
}

将wrap区块设定成垂直置中，并设定背景颜色
将item区块背景设为白色和新增框线
txt文字区块设定内距

html ,body{
  height:100%;
}

body{
  display: flex;
  align-items: center;
  background-color: #003;
}


.item{
   width:368px; /*盒模型概念 368+15px左margin+15px右margin+1px左border+1px右border=400px*/
   margin:15px; 
   text-align: center;
   background-color: #fff;  
   border: 1px solid #ccc;
   }
   
.item .txt{
  padding: 20px;
 }

使用伪元素::before和边框线制做出三角型区块
border-top设定三角形的角度
border-left和border-right的宽度是item宽度368px除以二，所以是184px

.item .txt::before{
  content:'';
  width:0;
  height:0; 
  border-top: 50px solid #f00;
  border-left: 184px solid #0f0;
  border-right: 184px solid #0f0;
}

7.使用绝对定位和相对定位将三角形区块固定在txt区块内
在txt区块设定 position:relative;

 .item .txt{
  padding: 20px;
  position:relative;
 }

.item .txt::before{
  content:'';
  position: absolute;
  left:0;
  top:0; 
  width:0;
  height:0; 
  border-top: 50px solid #f00;
  border-left: 184px solid #0f0;
  border-right: 184px solid #0f0;
}

将border-top颜色改为透明

.item .txt::before{
  content:'';
  position: absolute;
  left:0;
  top:0; 
  width:0;
  height:0; 
  border-top: 50px solid transparent;
  border-left: 184px solid #0f0;
  border-right: 184px solid #0f0;
}

把border-left和border-right颜色改成白色

.item .txt::before{
  content:'';
  position: absolute;
  left:0;
  top:0; 
  width:0;
  height:0; 
  border-top: 50px solid transparent;
  border-left: 184px solid #fff;
  border-right: 184px solid #fff;
}

设定transform
将整个三角形区块往上移

.item .txt::before{
  content:'';
  position: absolute;
  left:0;
  top:0; 
  width:0;
  height:0; 
  border-top: 50px solid transparent;
  border-left: 184px solid #fff;
  border-right: 184px solid #fff;
  transform:translateY(-100%); 
}

使用:hover、transform和transition做出滑鼠碰到item区块就会往上移动的效果

.item:hover{
  transform: translateY(-50px);
}

.item{
   width:368px; 
  margin:15px; 
  text-align: center;
  background-color: #fff;  
  border: 1px solid #ccc;
  transform:translateY(0px); 
  transition:.5s;
}

设定三角形区块也会在滑鼠碰到item区块时换颜色

.item:hover .txt::before{
  border-left: 184px solid #FEB85D;
  border-right: 184px solid #FEB85D;
}

10: 设定滑鼠碰到item区块时，txt区块的背景颜色和文字颜色和底线会变色的效果

.item h2{
  border-bottom: 1px solid #888; 
  padding-bottom: .3em;
  margin-bottom: .4em;
  font-weight: 900;
  transition:.25s; 
}

.item p{
  line-height: 1.6;
  font-weight: 300;
  transition:.25s; 
}
.item:hover .txt{
  background-image: linear-gradient(0deg, #FB8076, #FEB85D);
}

.item:hover h2{
  color:#fff;
  border-bottom-color: #fff;

}
.item:hover p{
  color:#fff;
}

css完整结构

*{
  margin:0;
  padding:0; 
  list-style: none;
  font-family: 'Noto Sans TC', sans-serif;
}

html ,body{
  height:100%;
}

body{
  display: flex;
  align-items: center;
  background-color: #003;
}


.wrap{
  width:1200px;
  display:flex;
  margin: auto; 
}

.item{
   width:368px; 
  margin:15px; 
  text-align: center;
  background-color: #fff;  
  border: 1px solid #ccc;
  transform:translateY(0px); 
  transition:.5s;
}

.item img{
  width:100%;
  vertical-align: middle;
}

.item h2{
  border-bottom: 1px solid #888; 
  padding-bottom: .3em;
  margin-bottom: .4em;
  font-weight: 900;
  transition:.25s; 
}

.item p{
  line-height: 1.6;
  font-weight: 300;
  transition:.25s; 
}
   
 .item .txt{
  padding: 20px;
  position:relative;
 }

  
.item .txt::before{
  content:'';
  position: absolute;
  left:0;
  top:0; 
  width:0;
  height:0; 
  border-top: 50px solid transparent;
  border-left: 184px solid #fff;
  border-right: 184px solid #fff;
  transform:translateY(-100%);
}

.item:hover .txt::before{
  border-left: 184px solid #FEB85D;
  border-right: 184px solid #FEB85D;
}

.item:hover{
  transform: translateY(-50px);
}

.item:hover .txt{
  background-image: linear-gradient(0deg, #FB8076, #FEB85D);
}


.item:hover h2{
  color:#fff;
  border-bottom-color: #fff;

}
.item:hover p{
  color:#fff;
}

以上为个人学习笔记整理
若有错误，欢迎指正

参考资料:金鱼都能懂的这个网页画面怎麽切 : 人员介绍卡片

<<: Day 06 - Function

>>: 学习Python纪录Day8 - if回圈、建立函数的方法