小页面排版

最新推荐文章于 2021-07-29 07:29:40 发布

与慕

最新推荐文章于 2021-07-29 07:29:40 发布

阅读量114

点赞数

分类专栏：知识

本文链接：https://blog.csdn.net/qq_36664799/article/details/111320001

版权

知识专栏收录该内容

24 篇文章 1 订阅

订阅专栏

应该还有别的办法可以把content（老师的详细介绍）放进intro（老师信息）那个div中，不用单独拿出来，也不会出现文字全部居中，不左对齐的情况
在这里插入图片描述

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>许大壮老师</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .bg_top {
      position: relative;
      text-align: center;
      width: 100%;
      height: 9rem;
      z-index: 0;
      background: url("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2907122422,94722017&fm=26&gp=0.jpg")
    }

    .avator {
      width: 7rem;
      height: 7rem;
      border-radius: 50%;
      border: .2rem solid white;
      z-index: 1;
      margin: 5rem 0 auto auto;
    }

    .intro_title2 {
      font-size: 1.2rem;
      color: rgb(65, 65, 65);
    }

    .content {
      position: relative;
      top: 7.2rem;
      display: flex;
    }

    .intro_content {
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <div class="bg_top">
    <img class="avator"
      src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3957796955,621832802&fm=26&gp=0.jpg" />
    <div class="intro">
      <h2 class="intro_title1"> 许大壮老师<br /></h2>
      <text class="intro_title2">高级教师、教师培训师<br /></text>
    </div>
  </div>
  <div class="content">
    <text class="intro_content">师范院校数学专业出身，9年数学教学经验，3年初高中数学联赛经验，初中数学教师培训师。重视基本功和数学思维的培养，<br />
      善于总结解题方法与技巧，所带学生提分显著。</text>
  </div>
  <div>

  </div>
</body>

</html>

与慕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小页面排版

不知道还有别的办法可以把content放进intro那个div中，不用单独拿出来，也不会出现文字全部居中，不左对齐的情况<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>黄欣欣老师</title> <style&
复制链接

扫一扫

专栏目录