[散修弟子]CSS-7961|2019年06月09日的日报-技能树.IT修真院

发表于： 2019-06-09 00:02:39

1 908

今日完成的事

1设置中间内容p块元素

<p class="box">

2. 设置九个子项目元素

<p1 class="pp">1</p1>
<p2 class="pp">2</p2>
<p3 class="pp">3</p3>
<p4 class="pp">4</p4>
<p5 class="pp">5</p5>
<p6 class="pp">6</p6>
<p7 class="pp">7</p7>

3.为p块元素引入样式设置为flex布局从上往下排列左端对齐

.box{
    display:flex;                       /*设置footer为flex布局*/
    flex-direction: row;                /*设置footer主轴为水平从左向右*/
    justify-content: space-between;     /*设置项目在主轴上的对齐方式为水平从左向右*/
}

p.box{
    margin: 0px;                        /*设置外边距为0px 消除默认边距16px*/
    padding: 50px 0px;                  /*设置上下内边距为50px 只在中间区域显示*/
    overflow-y: auto;                   /*设置滚动条Y轴内容溢出时的显示方式*/
    width: 100%;                        /*设置宽度为100%*/
    flex-direction: column;             /*设置p为flex布局 主轴从上往下垂直布局*/
    justify-content:space-between;      /*设定两端对齐*/

4.为子项目引入样式

.pp{
    width: 100%;
    height: 100px;
}

5.ps导出图片并放入文件夹

6.隐藏浏览器模式下默认显示的滚动条

<body style="-Scroll">

7.子项目p1插入头像图片及背景图

<p1 class="pp p1">
    <img src="椭圆1.png"
     >
</p1>

.p1{
    background-image: url("p1.png");    /*设置p1背景图片*/
    
}

8.给所有p项目下的子项目设置为flex布局

<p1 class="pp box p1">
    <img src="椭圆1.png"
     >
</p1>
<p2 class="pp box">2</p2>
<p3 class="pp box">3</p3>
<p4 class="pp box">4</p4>
<p5 class="pp box">5</p5>
<p6 class="pp box">6</p6>
<p7 class="pp box">7</p7>

9.添加文字及图标

<p1 class="pp box p1">
    <img src="椭圆1.png"
     >
</p1>
<p2 class="pp box">
    <img src="圆角矩形7.png">
    专业技能
</p2>
<p3 class="pp box">
    <img src="形状4.png">住家
    <img src="形状4.png">不含餐
</p3>
<p4 class="pp box">
    <p44 class="p44">从业年限</p44>
    |
    <p45>0-3年</p45>
</p4>
<p5 class="pp box">
    <p55 class="p44">工作时间
</p55>
<p6 class="pp box">6</p6>
<p7 class="pp box">7</p7>