CSS (x) - positioning exercise (rotation chart)

preface

Before reading this note, you should pay attention to a problem. CSS3 or JavaScript is still needed to complete the effect of image scrolling. What we have been doing now is static pages, and dynamic effects will be added later.

The content of this record is based on the previous notes, so after this, unless new and important attributes appear or new technologies are introduced, the logic will be mainly recorded in the practical notes.

summary

The main logic of the rotation chart is actually the same as that of the secondary menu or pop-up layer. Some elements are hidden in the page and need to perform specific operations to display them. Therefore, the specific logic will not be repeated.

What we should pay attention to in the rotation map is that we still need to pay attention to the positioning problem in the element setting of the picture.

In the rotation chart, the first thing we need to do is to set up a space for pictures. The specific code is as follows:

<div class="banner">
        <div class="imgs">
            <a href=""><img src="./imgs/1.jpg" alt=""></a>
            <a href=""><img src="./imgs/2.jpg" alt=""></a>
            <a href=""><img src="./imgs/3.jpg" alt=""></a>
        </div>
</div>

• First, a banner is needed to make the outermost border of the rotation map;
• Secondly, set an overall element space for the pictures that need to be broadcast in rotation;
• [note]: it should be noted that the banner and imgs elements should be set according to the space occupied by the rotation map in the page;
• Finally, set up multiple pictures to be rotated in imgs, and the size (width and height) of each picture should follow the relevant size of the outer area.
• Only one picture is displayed on the page. All sizes are set to display one picture

Next, set the attributes of the element according to the above instructions. The specific styles are as follows:

.banner{
    width:250px;
    height: 350px;
    border: 1px solid;
    margin: 1em auto;
    overflow: hidden;
    position: relative;
}
.banner>.imgs img{
    width: 250px;
    height: 350px;
}
.banner>.imgs{
    width: 750px;
    height: 350px;
}
.banner>.imgs>a{
    float: left;
}

• It should be noted that the imgs in the banner (that is, the elements containing all pictures, whose width is the sum of the widths of all pictures, so that all pictures can be stored in the imgs. At the same time, because the width of the banner is only the value of one picture, the other pictures have no space)
• As for why the a element containing the picture does not collapse, we have fixed the height in banner and imgs.

After doing this, we can see a picture displayed on the page. At this time, you can set the positioning in imgs to negative. You can see the switch picture.

The rest of the styles are too lazy to say. They are all made before, so all the codes are posted below. Finally, the core logic will be explained in the summary.

Specific code

<!--html code-->
<div class="banner">
        <div class="imgs">
            <a href=""><img src="./imgs/1.jpg" alt=""></a>
            <a href=""><img src="./imgs/2.jpg" alt=""></a>
            <a href=""><img src="./imgs/3.jpg" alt=""></a>
        </div>
        <div class="left">&lt;</div>
        <div class="right">&gt;</div>
        <div class="modal">
            <div class="title">
                sad Unique fenghuala hydropower
            </div>
            <div class="dots">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
        
</div>

<!--css code-->
.banner{
    width:250px;
    height: 350px;
    border: 1px solid;
    margin: 1em auto;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

.banner>.imgs{
    width: 750px;
    height: 350px;
    box-sizing: border-box;
    position:absolute;
    left: -250px;
}

.banner>.imgs img{
    width: 250px;
    height: 350px;
    box-sizing: border-box;
    
}

.banner>.imgs>a{
    float: left;
}

.banner>.left,.banner>.right{
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: #fff;
    font-size: 3em;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 50%;
    background-color: rgba(255,255,255,0);
    color: rgba(255,255,255,0);
    cursor: pointer;
}
.banner>.left{
    left: 10px;
    top: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
    line-height: 50px;
}

.banner>.right{
    right: 10px;
    top: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
    line-height: 50px;
}
.banner>.left:hover,.banner>.right:hover{
    background-color: rgba(255,255,255,.5);
    color:rgba(255, 0, 0, .4)
    
}

.banner>.modal{
    width: 100%;
    height: 40px;
    background-color: rgba(0,0,0,.5);
    position: absolute;
    left: 0;
    bottom: 0;
    line-height: 40px;
    box-sizing: border-box;
}

.banner>.modal>.title{
    float: left;
    padding-left:10px ;
    color: white;
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
}

.banner>.modal>.dots{
    float: right;
    padding-right: 10px;
    width: 100px;
    color: white;
    line-height: 40px;
    text-align: right;
}

.banner>.modal>.dots>ul>li{
    width: 6px;
    height: 6px;
    background-color: #ccc;
    display: inline-block;
    margin: 0 2px;
    border-radius: 50%;
    cursor: pointer;
}

.banner>.modal>.dots>ul>li:hover{
    background-color: #369;
}

summary

The core logic of the rotation chart is mainly as follows:

• Set an element to display a picture. The specific width and height are consistent with the width and height of a single picture;
• Set an element to store all pictures, and the width is the sum of the widths of all pictures;
• Set a single picture element to be compatible with the width and height of the above two elements (that is, set it by yourself);
• Finally, it should be noted that the elements of the displayed picture can be understood as a picture frame. All pictures and subsequent text explanations or spaces should be positioned based on the position of the picture frame.

This is the static style of the rotation chart. Students who have read the previous notes should easily understand the meaning of the style.