html+css+flex布局制作个人简历

最新推荐文章于 2022-10-19 21:07:27 发布

web17886480312

最新推荐文章于 2022-10-19 21:07:27 发布

阅读量241

点赞数

分类专栏： java 后端文章标签： css html 前端

本文链接：https://blog.csdn.net/web17886480312/article/details/123483358

版权

java 同时被 2 个专栏收录

301 篇文章 6 订阅

订阅专栏

后端

16 篇文章 0 订阅

订阅专栏

知识点： 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>中文名:&nbsp;&nbsp;&nbsp;李现</li>
            <li>别&nbsp;名:&nbsp;&nbsp;&nbsp;李晛、现哥、现现</li>
            <li>国&nbsp;籍:&nbsp;&nbsp;&nbsp;中国</li>
            <li>出生地:&nbsp;&nbsp;&nbsp;湖北省咸宁市</li>
          </ul>
          <ul>
            <li>星&nbsp;&nbsp;座:&nbsp;&nbsp;&nbsp;天秤座</li>
            <li>身&nbsp;&nbsp;高:&nbsp;&nbsp;&nbsp;185cm</li>
            <li>职&nbsp;&nbsp;业:&nbsp;&nbsp;&nbsp;演员</li>
            <li>毕业院校:&nbsp;&nbsp;&nbsp;北京电影学院</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;
}

效果图：
在这里插入图片描述