On day 9, sliding door technology, two column and three column adaptive layout (Holy Grail, double wings), climbing layout, text overflow processing, single line and multi line overflow

day 09

1, Sliding door technology

1. What is a sliding door?

No matter how many words can adapt to this effect of special background, sliding door technology is needed

2. Principle of sliding door technology

Use the spirit technology and the characteristics of padding to open the box to make the sliding door

  • Use the a tag to wrap the span tag, because a lot of navigation can be clicked
  • a label to control the left door. a label sets the height, turns the line quickly, and adds the background (displays the left half of the background)
  • Span label to control the right door, span set the height, turn fast and add the background (display the right half of the background)
<a href="#"> < span > Home Page < / span ></a>
 <style>
    a {
        display: inline-block;
        height: 33px;
        line-height: 33px;
        background: url("images/lTcb_ve.png") no-repeat;
        padding-left: 15px;
        text-decoration: none;
        color: #fff;
    }
    span {
        display: inline-block;
        height: 33px;
        padding-right: 15px;
        background: url("images/lTcb_ve.png") no-repeat right;
    }
</style>

2, Multi column layout solution

Width adaptive layout allows the same page to automatically adapt to different device sizes, so as to solve the problem of providing different versions of pages for different devices

1. Two column adaptive layout

Left fixed width, right adaptive width

Fixed width on the right, adaptive width on the left

Taking the left fixed width and the right adaptive width as an example, the principle is as follows:

  • Structurally, there are two boxes on the left and right. The left box is set with a fixed width, and the right box width:100%;
  • Set the absolute position (position:absolute) for the left box
  • Add a sub box to the box on the right and set the width of the box on the left
<div class="wrap">
    <div class="left">Left box</div>
    <div class="right">
        <div class="son">Right box</div>
    </div>
</div>
<style>
    /* - 
      Structurally, there are two boxes on the left and right. The left box is set with a fixed width, and the right box width:100%;
    - Set the absolute position (position:absolute) for the left box
    - Add a sub box to the box on the right and set the width of the box on the left */
    .wrap>div {
        min-height: 200px;
    }
    .left {
        position: absolute;
        width: 300px;
        background-color: aqua;
    }
    .right {
        width: 100%;
        background-color: pink;
    }
    .son {
        padding-left: 300px;
    }
</style>

2. Three column adaptive layout

Three column adaptive layout refers to the fixed width on the left and right sides and the adaptive width of the middle box

Both the Grail layout and the double flying wing layout can achieve three column adaptation, but the implementation ideas are different

(1) Grail layout

Realization idea:

  • Structurally, there should be left box, right box and middle box. When placed in the structure, put the middle box first, and then the left and right boxes
  • Box width on the left and box width on the right, 100:100%;
  • Set the float for the left box, the right box and the middle box (pay attention to clear the float for the parent element)
  • Pull the left box to the far left (margin left: - 100%) and the right box to the far right (margin left: - width of the right box)
  • Expose the middle box (set padding for the package box of three boxes: 0 width of the box on the right and 0 width of the box on the left)
  • Restore the position of the left box (relative positioning, left: - width of the left box) and the position of the right box (relative positioning, right: - width of the right box)
 <div class="wrap">
    <div class="center">Middle box</div>
    <div class="left">Left box</div>
    <div class="right">Right box</div>
</div>
<style>
    /* - 
    - Structurally, there should be left box, right box and middle box. When placed in the structure, put the middle box first, and then the left and right boxes
    - The left box and the right box are set with fixed width, and the width of the middle box is 100%;
    - Set the float for the left box, the right box and the middle box (pay attention to clear the float for the parent element)
    - Pull the left box to the far left (margin left: - 100%) and the right box to the far right (margin left: - width of the right box)
    - Expose the middle box (set padding for the package box of three boxes: 0 width of the box on the right and 0 width of the box on the left)
    - Restore the position of the left box (relative positioning, left: - width of the left box) and the position of the right box (relative positioning, right: - width of the right box) 
*/
    .wrap {
        padding: 0 200px 0 300px;
    }
    .wrap>div {
        float: left;
        min-height: 300px;
    }
    .left {
        position: relative;
        left: -300px;
        width: 300px;
        background-color: aqua;
        margin-left: -100%;
    }
    .right {
        position: relative;
        right: -200px;
        width: 200px;
        background-color: tomato;
        margin-left: -200px;
    }
    .center {
        width: 100%;
        background-color: yellow;
    }
</style>

(2) Dual wing layout

Started with Taobao UED

Compare the layout to a bird. Put the body of the bird first, and then put the wings

Realization idea:

  • Structurally, put the middle box first. The middle box needs to have a sub box, and then put the left box and the right box
  • Set the fixed width for the left box and the right box, and the width of the middle box: 100%
  • Set the left float for the left box, the right box and the middle box (pay attention to clear the float for the parent element)
  • Pull the left box to the far left (margin left: - 100%) and the right box to the far right (margin left: - width of the right box)
  • Expose the middle box (Set margin:0 the width of the box on the right and 0 the width of the box on the left for the sub box in the middle)
 <div class="wrap">
    <div class="center">
        <div class="son">Contents of the middle box</div>
    </div>
    <div class="left">Left box</div>
    <div class="right">Right box</div>
</div>
<style>
    /* 
    - Structurally, put the middle box first. The middle box needs to have a sub box, and then put the left box and the right box
    - Set the fixed width for the left box and the right box, and the width of the middle box: 100%
    - Set the left float for the left box, the right box and the middle box (pay attention to clear the float for the parent element)
    - Pull the left box to the far left (margin left: - 100%) and the right box to the far right (margin left: - width of the right box)
    - Expose the middle box (Set margin:0 the width of the box on the right and 0 the width of the box on the left for the sub box in the middle)
     */
     .wrap>div {
        float: left;
         min-height: 300px;
     }
    .left {
        width: 200px;
        background-color: tomato;
        margin-left: -100%;
    }
    .right {
        width: 300px;
        background-color: yellowgreen;
        margin-left: -300px;
    }
    .center {
        width: 100%;
        background-color: violet;
    }
    .center>.son {
        margin: 0 300px 0 200px;
    }
</style>

3. Contour layout

Contour layout refers to the visual contour effect of multiple columns of child elements in the parent element

(1) Equal height is achieved by offsetting the internal and external spacing

Core points:

  • Arrange the child elements horizontally, and set padding bottom and margin bottom for the child elements respectively

  • Hide overflow to parent element

     <div class="wrap">
        <div class="left">Left box</div>
        <div class="center">Middle box</div>
        <div class="right">Right box</div>
    </div>
    
    <style>
        .wrap {
            width: 1000px;
            margin: 0 auto;
            overflow: hidden;
        }
        .left {
            float:left;
            width: 200px;
            background-color: violet;
            min-height: 200px;
            padding-bottom: 9999px;
            margin-bottom: -9999px;
        }
        .center {
            float:left;
            width: 500px;
            background-color: turquoise;
            min-height: 200px;
            padding-bottom: 9999px;
            margin-bottom: -9999px;
        }
        .right {
            float:left;
            width: 300px;
            background-color: yellow;
            min-height: 200px;
            padding-bottom: 9999px;
            margin-bottom: -9999px;
        }
    </style>
    

    Advantages and disadvantages:

    • Simple structure, compatible with all browsers
    • It realizes pseudo contour and reasonably controls the internal and external spacing

(2) Using the characteristics of content to open the parent element to achieve equal height

  • Several columns need to nest several layers of containers, and each layer of containers needs to set the background color separately
<div class="wrap">
    <!-- If you need several columns, you need to nest several layers -->
    <!-- Background of the first column -->
    <div class="col1">
        <!-- Background of the second column -->
        <div class="col2">
            <!-- Background of the third column -->
            <div class="col3 clearfix">
                <div class="left">Left box</div>
                <div class="center">Middle box</div>
                <div class="right">Right box</div>
            </div>
        </div>
    </div>
</div>
<style>
    .clearfix::after {
        content: "";
        display: block;
        clear: both;
    }
    .clearfix {
        *zoom: 1;
    }
    .wrap {
        width: 1000px;
        margin: 0 auto;
        overflow: hidden;
    }
    .col1 {
        width: 100%;
        background-color: tomato;
    }
    .col2 {
        /* Expose the background of the first row of boxes */
        position: relative;
        left: 300px;
        width: 100%;
        background-color: yellow;
    }
    .col3 {
        /* Show the background color of the box in the second column */
        position: relative;
        left: 500px;
        width: 100%;
        background-color: pink;
    }
    .left {
        float: left;
        width: 300px;
        min-height: 300px;
        margin-left: -800px;

    }
    .center {
        float: left;
        width: 500px;
        min-height: 300px;
        margin-left: -500px;
    }
    .right {
        float: left;
        width: 200px;
        min-height: 300px;
    }
</style>

3, Text overflow processing

1. Single line text overflow processing

  • Limit the width of the container

  • Force text to appear on one line

  • Set overflow hide for box

  • How to deal with extra words

    • clip direct clipping
    • Ellipsis overflow display ellipsis
     <p>0817web Class 0817 web Class 0817 web Class 0817 web Class 0817 web Class 0817 web Class 0817 web Class 0817 web Class 0817 web class</p>
    
     <style>
        p {
            width: 200px;
            border: 1px solid red;
            /* Force text to appear on one line */
            white-space: nowrap;
            /* Overflow hiding */
            overflow: hidden;
            /* How to deal with text exceeding   
            clip    Direct cutting
            ellipsis    Overflow display ellipsis
             */
             /* text-overflow: clip; */
             text-overflow: ellipsis;
        }
    </style>
    

2. Multi line text overflow processing

Note: this piece can only be used in Chinese, not English

(1) Use webkit private properties for processing (only applicable to browsers with webkit kernel)

 p {
    width: 200px;
    border: 1px solid red;
    overflow: hidden;
    /* This attribute cannot be used alone. It must be used in conjunction with the following two attributes */
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
  • -The WebKit line clamp property limits the number of rows displayed

    This attribute cannot be set separately. It will not take effect after setting. It can only take effect in combination with the following two attributes]

    • display: -webkit-box; Convert containers into WebKit boxes (elastic expansion boxes)
    • -webkit-box-orient: vertical; The arrangement of child elements within the container

(2) Using pseudo elements to simulate overflow and display the effect of ellipsis (good compatibility)

  • You need to limit the width of the box
  • The row height is a multiple of the height of the box
  • Create an ellipsis with pseudo elements
  • Child absolute parent phase (pseudo element absolute positioning)
  • Adjust the offset attribute to the lower right corner of the box
  • Set the pseudo element with the same background color as the big background, and then fine tune the display position of the pseudo element through padding
    <p>2013 In, he participated in Hunan Satellite TV's "happy male voice" and won the annual championship [1]  . 2014 First appeared on the stage of CCTV Spring Festival Gala in January 2004; In April of the same year, he participated in the outdoor reality show "flowers and teenagers"; September 6th-7 Two consecutive "Mars" concerts were held at Beijing MasterCard center on the th [2]  ,Then he released his first solo album "Casimodo's gift" [3]  ,And won 2015 with this album QQ The best mainland male singer of the year and the most popular male singer of the year in the 15th music billboard. July 31, 2015-8 On June 2, three solo concerts were held on the Shanghai stage [4]  ;In December of the same year, he released his second album "alien", which won awards such as the best album of the year at the 2016 cool music Asia Festival.</p>
 <style>
    p {
        position: relative;
        width: 200px;
        border: 1px solid red;
        /* The row height is a multiple of the height of the box */
        line-height: 30px;
        height: 90px;
    }
    p::after {
        position: absolute;
        bottom: 2px;
        right: 5px;
        content: "...";
        background: #fff;
        padding: 0 2px;
    }
</style>

Posted by waterssaz on Thu, 19 May 2022 18:55:53 +0300