实习记录1

最新推荐文章于 2022-05-30 11:24:31 发布

qq_43101834

最新推荐文章于 2022-05-30 11:24:31 发布

阅读量69

点赞数

分类专栏：实习学习

本文链接：https://blog.csdn.net/qq_43101834/article/details/110791380

版权

实习学习专栏收录该内容

26 篇文章 0 订阅

订阅专栏

1.居中底色布局

<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
<style>
html{
    margin: 0;
    padding: 0;
    background:whitesmoke;
}

.container{
   display:flex;
   flex-direction:column;
   align-items: center;
   margin-top:5px;
   width:100%;
   background-color:whitesmoke;
}

.carlist{
    display:flex;
    flex-direction:column;
    align-items: center;
    width: 97%;
    border-radius: 15px;
    background-color:white;
    margin-top:10px;
}
</style>
  </head>
  <body>
<div class="container">
    <div class="carlist">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <div class="carlist">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</div>
  </body>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript">
      apiready = function(){

      };
  </script>
  </html>

在这里插入图片描述
该布局犯错误的点：还是分不清楚父元素控制子元素，container是carlist的父元素，控制其在页面居中，carlist是div的父元素，控制div在页面居中，根据排列方向不同，设置对应方向的居中属性。

qq_43101834

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实习记录1

1.居中底色布局<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> <title>title&
复制链接

扫一扫

专栏目录