IFE_part1(task4-6)

今日实践了以下文本相关的所有属性内容: 
  • text-indent
  • text-transform
  • text-decoration
  • text-align
  • word-spacing
  • white-space
  • color
  • line-height
  • font
  • font-family
  • font-size
  • font-weight
  • font-face
  • 所写的HTML如下:
       <!-- 控制文本缩进 -->
        <p style="text-indent: 20px;">text-indent</p>
    
        <!-- 控制文本大小写 -->
        <p style="text-transform:uppercase">text-transform</p>
    
        <!-- 控制文本修饰 -->
        <p style="text-decoration: overline">text-decoration</p>
    
        <!-- 控制文本对齐方式 -->
        <p style="text-align: center">text-align</p>
    
        <!-- 属性增加或减少单词间的空白 -->
        <p style="word-spacing: 20px;">word-spacing A</p>
    
        <!-- 设置如何处理元素内的空白。 -->
        <p style="white-space: pre;">white-space       --pre</p>
    
        <!-- 设置字体颜色 -->
        <p>color</p>
    
        <!-- 属性设置行间的距离(行高) -->
        <p>line-height</p>
    
        <!-- 设置所有字体属性 -->
        <p style="font:italic bold 12px/20px arial,sans-serif;">font</p>
    
        <!-- 设置字体 -->
        <p style="font-family:'Times New Roman',Georgia,Serif;">font-family</p>
    
        <!-- 设置字体大小 -->
        <p style="font-size: 250%">font-size</p>
    
        <!-- 设置文本的粗细 -->
        <p style="font-weight: 900">font-weight</p>
    
        <!-- 通过 CSS3,web 设计师可以使用他们喜欢的任意字体 -->
        <P>font-face</P>
    
     用两种方法来实现一个背景色为红色、宽度为960px<DIV>在浏览器中居中:HTML如下:
      <!-- 实现居中布局的两种方法 -->
        <div class="box1">第一种方法:通过设置margin实现DIV居中</div>
        <div class="box2">第二种方法:先设置绝对定位position: absolute;
                        然后这在水平方向上让div的最左与屏幕的最左相距50%,
                        再用transform向左平移它自己宽度的50%,实现DIV居中</div>
    
     所对应的的CSS文件如下:
    /* 实现居中方法1:使用margin */
    .box1 {
        background-color: red;
        width: 960px;
        margin: 0 auto;
        text-align: center;
    }
    /* 实现居中方法2:使用绝对定位 + transform */
    .box2 {
        position: absolute;
        background-color: red;
        width: 960px;
        left: 50%;
        transform: translate(-50%,0);
        text-align: center;
    }   
    
     在不使用border-radius的情况下实现一个可复用的高度和宽度都自适应的圆角矩形 HTML如下:
    <!-- 实现一个可复用的高度和宽度都自适应的圆角矩形    -->
        <div class="div4">
                <div class="top1"></div>
                <div class="top2"></div>
                <div class="top3"></div>
                <div class="top4"></div>
                <div class="top5"></div>
                <div class="main">
                    有的圆角矩形是复杂图案,无法直接用border-radius,请在不使用border-radius的情况下实现一个可复用的高度和宽度都自适应的圆角矩形
                </div>
                <div class="bottom5"></div>
                <div class="bottom4"></div>
                <div class="bottom3"></div>
                <div class="bottom2"></div>
                <div class="bottom1"></div>
            </div>
    
     所对应的CSS文件如下:
    /* 实现自适应圆角 */
    .div4{
        margin-top: 50px;
        overflow: hidden;
    }
    .top2, .bottom2, .top3, .bottom3, .top4, .bottom4, .top5, .bottom5{
        height: 1px;
        background: lightblue;
        overflow: hidden;
    }
    .top1, .bottom1{
        margin: 0px 5px;
        border-top: solid 1px black;
    }
    .top2, .bottom2{
        margin: 0px 3px;
        border-left: solid 1px black;
        border-right: solid 1px black;
    }
    .top3, .bottom3{
        margin: 0px 2px;
        border-left: solid 1px black;
        border-right: solid 1px black;
    }
    .top4, .bottom4{
        margin: 0px 1px;
        border-left: solid 1px black;
        border-right: solid 1px black;
    }
    .top5, .bottom5{
        margin: 0px 1px;
        border-left: solid 1px black;
        border-right: solid 1px black;
    }
    .main{
        height: 100%;
        border-left: solid 1px black;
        border-right: solid 1px black;
        background: lightblue;
    }
    
     ps:这段代码不是自己写的,是我搜索得来,目前正在理解消化。 用两种不同的方法来实现一个两列布局,其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化 HTML如下:
    <!-- 实现两列布局的两种方法 -->
        <div class="container">
            <div class="initial">左侧部分宽度固定</div>
            <div class="flex1">右侧部分宽度随浏览器宽度的变化而自适应变化 </div>
        </div>
        
        <div class="container2">
                <div class="initial2">左侧部分宽度固定</div>
                <div class="float1">右侧部分宽度随浏览器宽度的变化而自适应变化 </div>
        </div>
    
     所对应的CSS如下:
    /* 实现两列布局方法1:利用flex */
    .container {
        /* background-color: red; */
        display: flex;
        height: 100px;
    }
    .initial {
        width: 300px;
        background-color: red;
    }
    .flex1 {
        background-color: palevioletred;
        flex:1;
    }
    
    /* 实现两列布局方法2:利用float */
    .container2 {
        height: 100px;
    }
    .initial2 {
        height: inherit;
        width: 300px;
        float: left;
        background-color: rosybrown;
    }
    .float1 {
        height: inherit;
        background-color: gray;
        margin-left: 300px;
    }
    
     用两种不同的方式来实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化:HTML如下:
    <!-- 实现三列布局的两种方法 -->
        <div class="container3">
            <div class="three_1">第一列</div>
            <div class="three_2">第二列</div>
            <div class="three_3">第三列</div>
        </div>
    
        <div class="container4">
            
            <!-- 这里要注意一下盒子的顺序,第三列要排到第二位,不然会被挤到下一列 -->
            <!-- 利用左右浮动来进行布局我是考虑到的,但是盒子顺序不对会导致布局错误的原因我还没有找到 -->
                <div class="three_1_1">第一列</div>
                <div class="three_3_3">第三列</div>
                <div class="three_2_2">第二列</div>
    
        </div>
    
     所对应的CSS如下:
    /* 实现三列布局方法1:利用flex */
    .container3 {
        display: flex;
        height: 100px;
    }
    .three_1 {
        width: 200px;
        height: inherit;
        background-color: indigo;
    }
    .three_2  {
        flex: 1;
        height: inherit;
        background-color:darkcyan;
    }
    .three_3 {
        width: 200px;
        height: inherit;
        background-color: darkorchid;
    }
    
    /* 实现三列布局方法2:利用float */
    
    .container4 {
        height: 100px;
    }
    .three_1_1 {
        width: 200px;
        float: left;
        height: inherit;
        background-color: forestgreen;
    }
    .three_2_2 {
        margin-left: 200px;
        margin-right: 200px;
        height: inherit;
        background-color: tomato;
    }
    .three_3_3 {
        width: 200px;
        float: right;
        height: inherit;
        background-color: salmon;
    }
    
     实现一个浮动布局,红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化 HTML如下:
       <!-- 实现一个浮动布局,红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化  -->
        <div class="clr"></div>
        <div class="div9">
            <div class="flexbox"></div>
            <div class="flexbox"></div>
            <div class="flexbox"></div>
            <div class="flexbox"></div>
            <div class="flexbox"></div>
            <div class="flexbox"></div>
            <div class="flexbox"></div>
            <div class="flexbox"></div>
            <div class="flexbox"></div>
            <div class="clr"></div>
        </div>
    
     所对应的CSS如下:
    /* 实现一个浮动布局,红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化  */
    .div9{
        background-color: red;
        overflow: hidden;
        margin-top: 50px;
    }
    
    .flexbox{
        float: left;
        margin: 10px 10px;
        width: 300px;
        height: 300px;
        background-color: blue;
    }
    
    .clr{
        clear: both;
    }
    
     今日总结:
  • 掌握CSS各种选择器
  • 掌握CSS的继承、层叠、样式优先级机制
  • 掌握背景属性
  • 掌握列表相关的样式属性
  • 深入了解行高属性
  • 掌握块状元素、内联元素、和内联块状元素的概念与区别
  • 掌握盒模型的所有概念,学会如何计算各种盒模型相关的数值
  • 掌握position的相关知识
  • 掌握float的相关知识
  • 掌握基本的布局方式
  • 了解GridFlexbox等布局方式
  • 继续努力。  

    相关内容推荐