知识点： HTML,CSS,Flex弹性布局。
重点： Flex弹性布局，sticky定位。
目录：
图片自备
源码
index.html
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div class="container">
<div class="profile">
<img src="./image/lx.jpg" />
<h3>李现</h3>
<p>actor</p>
<div class="share">
<a href="#" class="fab fa-facebook-f"></a>
<a href="#" class="fab fa-twitter"></a>
<a href="#" class="fab fa-instagram"></a>
<a href="#" class="fab fa-linkedin"></a>
</div>
<div class="buttons">
<a href="#" class="btn">download cv</a>
<a href="#" class="btn">hire me</a>
</div>
</div>
<div class="information">
<div class="about">
<h3 class="title">你不知道的李现</h3>
<p>李现，曾用名李晛，1991年10月19日出生于湖北省咸宁市，成长于湖北省荆州市 ，中国内地影视男演员，毕业于北京电影学院表演系2010级</p>
<p>
李现出生于湖北省咸宁市，成长于湖北省荆州市，其父母在荆州市工作 [1] ，他在上初二的时候体重达到了160斤，到了高三时他的体重开始下降。李现高中就读于荆州中学，由于第一年高考不理想，第二年他便报考了表演和播音主持方向，之后顺利考上了北京电影学院表演系2010级 [23]
，而他也是当时湖北省荆州市第一位考取北京电影学院的大学生；此外，他还接受了电视台的采访，展示了吹萨克斯、弹吉他等才艺 [24] 。
</p>
</div>
<div class="display">
<ul>
<li>中文名: 李现</li>
<li>别 名: 李晛、现哥、现现</li>
<li>国 籍: 中国</li>
<li>出生地: 湖北省咸宁市</li>
</ul>
<ul>
<li>星 座: 天秤座</li>
<li>身 高: 185cm</li>
<li>职 业: 演员</li>
<li>毕业院校: 北京电影学院</li>
</ul>
</div>
<div class="image">
<h3 class="title">心之所"现"</h3>
<div class="box-container">
<div class="box">
<img src="./image/lx1.jpg" alt="" />
</div>
<div class="box">
<img src="./image/lx2.jpg" alt="" />
</div>
<div class="box">
<img src="./image/lx3.jpg" alt="" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
index.css
:root {
--blue: #2980b9;
--black: #333;
--white: #fff;
--light-color: #777;
--light-bg: #eee;
--box-shadow: 0 5px 10px rgba(0, 0, 00, 0.1);
}
* {
font-family: serif;
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
border: none;
text-decoration: none;
text-transform: capitalize;
transition: all 0.2s linear;
list-style: none;
}
html::-webkit-scrollbar-track {
background: var(--blue);
}
html::-webkit-scrollbar {
background: var(--white);
border-radius: 50px;
}
.container {
padding: 100px 9%;
background: linear-gradient(45deg, deeppink, var(--blue));
display: flex;
}
.btn {
margin-top: 10px;
display: inline-block;
padding: 7px 20px;
border-radius: 5px;
background: var(--blue);
color: var(--white);
font-size: 17px;
}
.container .profile {
flex: 1 1 400px;
height: 600px;
background: var(--white);
padding: 30px 20px;
text-align: center;
position: sticky;
border-right: 2px solid var(--black);
top: 20px;
left: 0px;
}
.container .profile img {
height: 150px;
width: 150px;
border-radius: 50%;
border: 2px solid var(--black);
object-fit: cover;
margin-bottom: 10px;
}
.container .profile h3 {
color: var(--black);
font-size: 20px;
}
.container .profile p {
color: var(--blue);
padding: 5px 0;
margin-bottom: 10px;
font-size: 15px;
}
.container .profile .share {
margin: 10px 0;
}
.container .profile .share a {
height: 50px;
width: 50px;
line-height: 50px;
font-size: 20px;
border-radius: 50%;
color: var(--black);
background: var(--light-bg);
}
.container .profile .share a:hover {
background: var(--blue);
color: var(--white);
box-shadow: var(--box-shadow);
}
.container .information {
padding: 30px 20px;
flex: 1 1 1000px;
background: var(--white);
}
.container .information .about .title {
font-weight: 400;
font-style: italic;
letter-spacing: 1em;
margin-bottom: 10px;
padding-bottom: 5px;
border-bottom: 1px solid #000;
color: var(--blue);
}
.container .information .about p {
color: var(--light-color);
text-indent: 2em;
line-height: 30px;
}
.container .information .display {
display: flex;
justify-content: space-around;
}
.container .information .display ul {
flex: 1 1 200px;
padding: 10px 20px;
font-size: 18px;
font-weight: bold;
}
.container .information .image .title {
font-weight: 400;
font-style: italic;
letter-spacing: 1em;
margin-bottom: 10px;
padding-bottom: 5px;
border-bottom: 1px solid #000;
color: var(--blue);
}
.container .information .image .box-container {
display: flex;
justify-content: space-around;
}
.container .information .image .box-container img {
margin-right: 5px;
width: 250px;
height: 350px;
}
效果图：
