Detailed explanation of commonly used CSS styles (layout)

Compatible with new CSS3 properties

In CSS3, we can use the plugin prefixfree.min.js to automatically add browser-compatible properties to CSS3 related properties, so that we don't have to add properties for each new CSS3 property (introduced when a large number of CSS3 projects are needed)

Content layout

When h5 is embedded in the app, under the iso mobile phone, the fixed button at the bottom (head) will scroll with it. You need to use content layout, and then use padding-bottom or padding-top to leave the corresponding position empty! ! !

When you need to scroll inside the content, you need to set the body and html to height: 100%; then the content also needs to be set to height: 100%, so that you can scroll inside the content. When you need to scroll inside the body, you need to remove the height: 100%; setting in html and body! ! Otherwise the body will be restricted and only half of the content will be displayed and cannot be scrolled! ! !

Another way to solve the scrolling at the bottom of the pop-up mask layer is to control the content below to body{height:100%;overflow:hidden;} through js when the pop-up window appears, and then remove this style when closing the pop-up window! ! !

<body>
     <header></header>
     <div class="content"></div>
     <footer></footer>
</body>

.content {
    padding-top: .88rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    max-width: 750px;
    width: 100%;
    margin: 0 auto;
    overflow-x:hidden;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

This layout method can solve the problem that when a single page is scrolling, the pop-up window will be blocked when clicking on it! ! !

Note: It cannot be used when you need to calculate the height of the body, and when there is a form on the page, you need to use position: relative to prevent the Android keyboard from being blocked! ! ! ! However, to solve the problem of pop-up windows not scrolling, you can add content layout when the pop-up window appears, and remove content layout when the pop-up window is closed! ! !

 //Click to receive $(".reward-btn").click(function(){
            $(".reward-page").wrap("<div class='contentS'></div>");
            $(".insurance-box").show();
            $(".dialog2").show();
            
        });
        //Click to close the large pop-up window button $(".closeDia").click(function(){
            $(this).parent().parent().hide();
            $(".dialog2").hide();
            $(".reward-page").unwrap("<div class='contentS'></div>");
        });

Scenario 2: In the content layout, you need to set a background image for the page. You can wrap a large div under the content, and then set the background image of the entire page for this div. In this way, the background image will scroll as the content exceeds one screen, instead of setting the background image directly on the content container. If you set the background image directly on this container, the background image will not scroll!!!

Common header layout

Sometimes there are text or icons on both sides, but the title in the middle is fixed in the center, and its approximate position is as follows, but the content will change! !

The layout is as follows

<div class="head"> <a class="head-left">Settings</a> Personal Center <a class="head-right">More</a></div>

css:
.head{
    position:relative;
    width:100%;
    height:88px;
    line-height:88px;
    text-align:center;
}
.head-left, .head-right{
    position:absolute;
    height:88px;
    line-height:88px;
}
.head-left {
    left:30px;
}
.head-right {
    right:30px;
}

Analog pull-up loading

  $(window).scroll(function() {
                var winH = $(window).height();
                var scrH = $(window).scrollTop();
                var htmH = $(document).height();
                //Solve the problem of scrolling down to half of the mask layer$(".fixed").height(htmH);
                
                if(winH + scrH >= htmH) {
                    console.info(tabActive);
                    if(tabActive==0){
                        console.info(1111);
                        if(next_page){
                            if(ajax_lock == true)
                            {
                                ajax_lock = false;
                                page++;
                                getRecord(page,0);
                                
                            }
                        }
                    }
});

1. Beautify the checkbox

Effect

HTML code

<label>
<input id="rememberPwdCheck" class="checkbox hidden" type="checkbox" checked="checked">
<i class="icon icon-checkbox"></i>
<span class="rememberPwdtxt">Remember account password</span>
</label>

CSS Code

.hidden {
     display: none;
}
.checkbox:checked ~.icon-checkbox {
    background: url(../images/yes_15.png) no-repeat;
    background-size: 0.3rem 0.25rem;
}
.icon-checkbox {
    width: 0.3rem;
    height: 0.3rem;
    margin-right: 0.1rem;
    border: 0.02rem solid #d7d7d7;
    border-radius: 0.06rem;
}
.icon {
    display: inline-block;
    vertical-align: middle;
}

if(!$('#agreeTerm').is(":checked")){
$.alert('Please check the box to agree to the Insurance Terms and Conditions and Important Notices and Statements');
return;
};

<div class="allCheck">
       <input type="checkbox" id="allCheck" class="check hidden">
       <label for="allCheck" class="check-icon">Select All</label>
</div>
.allCheck {
    padding:0.1rem 0.3rem;

}
.check-icon {
    display: inline-block;
    width:1.5rem;
    padding-left:.5rem;
    background:url("../../assets/select-no.png")no-repeat left center;
    background-size:.42rem .42rem ;
}
.check:checked ~ .check-icon {
     background:url("../../assets/selected.png")no-repeat left center;
     background-size:.42rem .42rem ;
}

2. Simulate radio buttons

Similar effects

HTML code

<dl id="" class="money">
    <dt>Select compensation amount<span class="p_help help">Compensation description</span></dt>
    <dd>
        <span>
            <input id="money_type_0" name="money_type" class="selection-rd hidden" type="radio" value="1" checked="">
            <label class="selection-lb" for="money_type_0">10 yuan</label>
        </span>
        <span>
            <input id="money_type_1" name="money_type" class="selection-rd hidden" type="radio" value="2">
            <label class="selection-lb" for="money_type_1">20 yuan</label>
        </span>
        <span>
            <input id="money_type_2" name="money_type" class="selection-rd hidden" type="radio" value="3">
            <label class="selection-lb" for="money_type_2">50 yuan</label>
        </span>
    </dd>
</dl>

CSS Code

.selection-rd:checked ~ .selection-lb {
    color: #e44;
    border:1px solid #e44;
}
.selection-lb {
    display: inline-block;
    margin:33px 30px 30px 0;
    width:150px;
    height: 64px;
    line-height: 64px;
    white-space: nowrap;
    background-color: #fff;
    border:1px solid #bbc;
    border-radius: 5px;
    text-align: center;
    font-size: 32px;
}

jq code

var payLevel=$("input[name='money_type']:checked").val();

3. The middle text, the horizontal lines on both sides are centered

Effect

Code

<div class="title-center"><div>Student Information</div></div>
/*Horizontal lines on both sides of the middle text*/
.title-center {
position:relative;
width:100%;
text-align: center;
height: 100px;
line-height: 100px;
font-size: 28px;
color: #4d72e2;
}
.title-center div{
display: inline-block;
padding:0 20px;
}
.title-center:before ,.title-center:after{
display: inline-block;
position: relative;
content:"";
height:2px;
width:48px;
top:-6px;
background-color:#4d72e2;
}

When rem is used as the unit, 1px will appear too large. Change .title-center:before and .title-center:after to the following:

.title-center:before, .title-center:after {
display: inline-block;
position: relative;
content: "";
height: 1px;
width: 1.88rem;
top: -.1rem;
background-color: #fd734f;
-webkit-transform: scaleY(0.5); 
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}

Ultimate version, rem unit, adaptive length of horizontal line! ! ! !

<div class="flexbox flexbox-middle">
    <span class="flexchild border-center"></span>
    <span style="padding:0 .2rem;">I want to center it and align the horizontal lines on both sides</span>
    <span class="flexchild border-center"></span>
</div>


.border-center{
/*display:inline-block; When using flexchild layout, you cannot set this attribute for the element, otherwise, -webkit-box-flex: 1; will fail*/
height: 1px;
background-color: #fd734f;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}

Method 2 to center the text on both sides

Rendering

<div class="card-title"><span class="text">Don't let you down if the candy box is good</span></div>

CSS

.card-title {
padding-top: .4rem;
font-size: .34rem;
color: #3c3c3c;
text-align: center;
font-weight: bold;
}

.card-title .text {
position: relative;
}
.card-title .text:before ,.card-title .text:after {
content: "";
display: inline-block;
position: absolute;
width: .4rem;
height: .32rem;
background: url('../images/card-title.png')no-repeat;
background-size: 100% 100%;
top: 50%;
margin-top: -.16rem;

}
.card-title .text:before{
left: -.51rem;
}
.card-title .text:after{
transform: rotateY(180deg);
-webkit-transform:rotateY(180deg);
right: -.51rem;
}

4. How to center icons horizontally and vertically (rem units)

Use background-size to set the size of the background image, and then use background-position:center center; to set the background image to be centered horizontally and vertically relative to the element, where the width of the element is the width of the background image, and the height is the original height.

Sass writing @mixin headerIcon($width,$height,$url,$position) {
position: absolute;
$position: .3rem;
top: 0;
width: $width; //icon width height: .88rem; //header height background: url($url) no-repeat;
background-position:left center; 
background-size:$width $height;
font-size: .3rem;
text-align: left;
}

Method 2:

html:

<a>
     <i class="foot-nav1 icon"></i>
     <span>Home</span>
</a>

css:

a{display:inline-block;}
.foot-nav1{   
   width: .66rem;
    height: .66rem;
    display: block;
    margin: 0 auto;
    background:url();
}
span {
   display: block;
    line-height: .24rem;
    text-align: center;
    font-size: .24rem;
    height: .24rem;
    margin-bottom: .8rem;
    color: #666;
}

5. Common header style settings

<div><a></a><h1>I am the title</h1><a></a></div>

.header{
      width: 100%;
      height: .88rem;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 998;
      border-bottom: 1px solid #f1f1f1;
      text-align: center;     
      h1{
          font-size: .36rem;
          font-family: PingFangSC-Medium, sans-serif; 
      }
      .left-icon{
        position: absolute;
        width: .88rem;
        height: .88rem;
        left: .3rem;
        top: 0;
        background: url('../../assets/back-icon.png') no-repeat;
        background-size:.17rem .35rem;
        background-position: left center;
        }
 .right-icon{
        position: absolute;
        width: .88rem;
        height: .88rem;
        right: .3rem;
        top: 0;
        background: url('../../assets/back-icon.png') no-repeat;
        background-size:.17rem .35rem;
        background-position: left center;
        }

6. Common form layout

Effect:

Code:

<div class="section2">
               <div class="des-title"><span class="text">Please fill in the following information carefully</span></div>
                <ul>
                    <li class="flexbox">
                        <input type="text" placeholder="Please enter your name" class="flexchild fill-content" id="tbName2">
                    </li>                        
                    <li class="flexbox flexbox-middle">
                        <span class="fill-label">Shipping address:</span>
                        <span class="adress" style="overflow: hidden;">
                            <input id="provinceCity2" name="rec_address_select" class="txt" placeholder="Please select" readonly="readonly">
                            <input id="detailssq2" type="hidden" readonly="readonly">
                            <i class="ui-icon Rmore-icon noborder"></i>
                         </span>
                    </li>
                    <li class="flexbox">
                        <input type="text" placeholder="Please fill in the detailed address" class="flexchild fill-content" id="adressDetail">
                    </li>
                </ul>
            </div>

CSS:

.section2 li {
    list-style: none;
    position: relative;
    width: 500px;
    margin: 0 auto;
    border: 1px solid #ffd6b9;
    box-sizing: border-box;
    padding: 17px 30px;
    background-color: #fff;
    margin-top: 20px;
    border-radius: 40px;
}

.section2 li input {
    background-color: transparent;
    border: 0 none;
    color: #333;
    outline: none;
    position: relative;
    font-size: 26px;
    width: 435px;
    z-index: 102;
}

html:

<li class="flexbox">
     <label>Your sweetheart:</label>
     <input type="text" placeholder="Please enter your lover's name" class="flexchild" id="loveName">
</li>

CSS:

.sec3 li {
    position: relative;
    height: .88rem;
    -webkit-box-align: end;
    -moz-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    box-sizing: border-box;
}
.sec3 li label {
    padding-bottom: .2rem;
}
.sec3 li input {
    position: relative;
    width: 4.86rem;
    background: transparent;
    border: 0 none;
    border-bottom: 1px solid #dc115b;
    padding-bottom: .2rem;
    color: #efc283;
    font-size: .28rem;
    border-radius: 0;
}

7. The text below the picture above is horizontally centered

Effect

CSS Styles

.mall .details-foot .details-kefu {
    width: 1.56rem;
    height: .99rem;
    border-right: 1px solid #f1f1f1;
}

.mall .details-foot .details-kefu i {
    display: block;
    width: .42rem;
    height: .42rem;
    margin: .12rem auto .06rem;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAQCAYAAADFw8lbAAAAGXRFW…7oxfKRixjo4VSJhW/sUYi1M9kR4RNoUZHpQEuX+Z/pXwEGAHRzn0c9HGr7AAAAAElFTkSuQmCC) no-repeat;
    background-size: 100% 100%;
}

.mall .details-foot .details-kefu-name {
    text-align: center;
}

8. Question answering progress bar

It is used to show the progress of answering questions. The effect is as follows

Where img is the shape background color (the small circle is transparent). And recommend-jd-bg is the background color of the progress bar, and recommend-jd-ks is the color that controls the progress! ! , where the z-index of img>recommend-jd-bg>recommend-jd-ks

html:

<div class="recommend-jd">
       <div class="recommend-jd-bg"></div>
       <div class="recommend-jd-ks" style="width: 37.5%;"></div>
       <img src="/src/m7.0/images/recommend/jd.png">
</div>

CSS:

.recommend-jd {
    width: 6.43rem;
    position: absolute;
    top: 1.59rem;
    left: .54rem;
}
.recommend-jd-bg {
    width: 100%;
    height: .31rem;
    background: #fff;
    position: absolute;
    top: 0;
    z-index: 97;
}
.recommend-jd-ks {
    width: 12.5%; //This is controlled by js and is controlled according to the progress of the number of questions!
    height: .31rem;
    background: #4a90ff;
    position: absolute;
    top: 0;
    z-index: 98;
}
.recommend-jd img {
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    z-index: 99;
    height: .31rem;
}

Progress Bar 2

<div class="progressBar">
    <span class="progressPer" style="width: 2rem;">
        <span class="moneyBox">
           <span class="moneyText">¥0.01</span>
        </span>
   </span>
</div>

.progressBar {
    margin: .3rem auto .1rem;
    width: 6.3rem;
    height: .1rem;
    background-color: rgb(72, 11, 29);
}

.progressPer {
    position: relative;
    top: 0;
    left: 0;
    display: inline-block;
    width: 0;
    height: .1rem;
    background-color: #efc283;
}
.moneyBox {
    position: absolute;
    right: -.53rem;
    top: .3rem;
    display: inline-block;
    width: 1.06rem;
    height: .4rem;
    background: url(../images/moneyBox.png)no-repeat;
    background-size: 100% 100%;
}
.moneyBox .moneyText {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1.04rem;
    height: .34rem;
    line-height: .34rem;
    text-align: center;
    color: #efc283;
    font-size: .26rem;
}

9. Questions 1-10 of the test are all on the same page

10. Remove the drop-down box logo of selected and add the following properties

select {
    background: transparent;
        border: 0 none;
        outline:none;
       appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;

}

11. Modify the input placeholder style

.detail-page input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    font-size: .26rem;
    color:#b2b2b2;
    opacity: 1;
}
.detail-page input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   font-size: .26rem;
   color:#b2b2b2;
   opacity: 1;
}
.detail-page input::-moz-placeholder { /* Mozilla Firefox 19+ */
   font-size: .26rem;
   color:#b2b2b2;
   opacity: 1;
}
.detail-page input:-ms-input-placeholder { /* Internet Explorer 10-11 */
   font-size: .26rem;
   color:#b2b2b2;
   opacity: 1;
}

12. Adding disabled to input will bring gray color. Change the color as follows

input:disabled{
      border:1px solid #DDD;
      background-color:#F5F5F5;
      color:#ACA899;
}

13. Align multiple lines of text left and right:

p { 

   text-align: justify;
  text-justify: inter-ideograph;

}

Effect

14. Align the two ends of a single line of text. For example, to achieve the following single line of text alignment

Method 1: Use pseudo-class:

html:

<div class="line">
    <div class="public">Name</div>
    <b>:</b>
    <b>Lin Xiao</b>
</div>
<div class="line">
    <div class="public">ID card</div>
    <b>:</b>
    <b>111111111111</b>
</div>
<div class="line">
    <div class="public">Mobile phone number</div>
    <b>:</b>
    <b>141000000</b>
</div>

CSS:

.line{
 width:100%;
 height:15px;
 margin:5px;
}
.public{
 width:80px;
 height:100%;
 display:inline-block;
 text-align: justify;
 vertical-align:top;
}
.public::after{
 content:"";
 display: inline-block;
 width:100%;
 overflow:hidden;
 height:0;
}

Method 2 uses letter-spacing to solve the problem:

html:

<span style="font-size:12px;"><dl class="hotsearch" style="width:300px;">  
<dt>Hot Searches</dt>  
<dd><a href="#" target="_blank" ref="nav" class="w3">TV</a></dd>  
<dd><a href="#" target="_blank" ref="nav" class="w4">Sexy and beautiful</a></dd>  
<dd><a href="#" target="_blank" ref="nav" class="w3">High heels</a></dd>  
<dd><a href="#" target="_blank" ref="nav" class="w2">Mobile</a></dd>  
<dd><a href="#" target="_blank" ref="nav" class="w2">Alignment</a></dd>  
<dd><a href="#" target="_blank" ref="nav" class="w3">Jeans</a></dd>  
<dd><a href="#" target="_blank" ref="nav" class="w4">Little Jade</a></dd>  
<dd><a href="#" target="_blank" ref="nav" class="w2">Home</a></dd>  
</dl></span>

CSS:

.hotsearch dd{  
float: left;  
line-height: 24px;  
margin-right: 30px;  
overflow: hidden;  
text-align: center;  
width: 4em; /*This value depends on how many characters can be displayed at most, if it is x, then it is x em*/  
}  
.hotsearch dd a{  
display:block;  
}  
.w2{  
letter-spacing:2em; /*If y characters need to be aligned, then (xy)/(y-1), here (4-2)/(2-1)=2em */  
margin-right:-2em; /*same as above*/  
}  
.w3{  
letter-spacing:0.5em; /*If y characters need to be aligned, then (xy)/(y-1), here (4-3)/(3-1)=0.5em */  
margin-right:-0.5em; /*same as above*/  
}

Effect

15. Make the image loading process highly adaptive

Application scenario: During the page layout process, when encountering a carousel or a large picture, and there are other blocks of content below the picture, during the picture loading process, since the height is 0, the elements below will run up and the picture will be loaded. The element will run down, giving the user a jittery feeling.

Solution: Set a div on the outermost layer of the image and set the following style for this div

.img-box {
        overflow: hidden;
        width: 100%;
        height: 0;    
        padding-bottom: 52%; 
        /*Method 2*/
        width:100%;
        /*Height relative to parent width ratio*/
        height: 52%vw;
        background:#eee;
}

16. Implement ellipsis when the text exceeds the limit... (width needs to be set. When the parent element uses flex layout, min-width: 0 needs to be set in display: flex; otherwise ellipsis will fail! !)

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ellipsis-2l {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; // Which line?

17. Vertical scroll bar

To achieve this effect, each dot must be aligned with the time. You can put the dots in the same div as the date, and then use the horizontal line as the background image of the entire record.

html:

<div class="list">
    <div class="list-item">
        <div class="list-item-time flexbox flexbox-middle"><span class="progres2-item"></span><span>Today</span></div>
        <div class="list-item-award yhj">2 yuan coupon, no threshold available<a class="go">Go and use></a></div>
        <div class="list-item-text">Signed in, got 1 White Pigeon Coin</div>
    </div>
    <div class="list-item">
        <div class="list-item-time flexbox flexbox-middle"><span class="progres2-item"></span><span>Today</span></div>
        <div class="list-item-award yhj">2 yuan coupon, no threshold available<a class="list-btn">Go and use it></a></div>
        <div class="excode">Please redeem on iQiyi APP, redemption code: testPw5079</div>
        <div class="list-item-text">Signed in, got 1 White Pigeon Coin</div>
    </div>
    <div class="list-item">
        <div class="list-item-time flexbox flexbox-middle"><span class="progres2-item"></span><span>2018-09-28</span></div>
        <div class="list-item-text">Signed in, got 1 White Pigeon Coin</div>
    </div>
    <div class="list-item">
        <div class="list-item-time flexbox flexbox-middle"><span class="progres2-item"></span><span>Today</span></div>
        <div class="list-item-award yhj">2 yuan coupon, no threshold available<a class="list-btn">Go and use it></a></div>
        <div class="excode">Please redeem on iQiyi APP, redemption code: testPw5079</div>
        <div class="list-item-text">Signed in, got 1 White Pigeon Coin</div>
    </div>
</div>

CSS:

.list {
    padding-top: .1rem;
    padding-bottom: .1rem;
    font-size: .3rem;
    color: #333;
    background-color: #fff;
}
.list-item {
    width: 100%;
    margin-left: .32rem;
    margin-top: -.15rem;
    padding-bottom: .4rem;
    background: url("../images/border.png") no-repeat .1rem .21rem;
    background-size: 1px 100%;
}
  .progres2-item {
      display: inline-block;
      margin-right: .25rem;
      width: .21rem;
      height: .21rem;
      background-color: #4d72e2;
      border-radius: 50%;
  }

/*The last one has no straight line, which means no background. There is also no background when there is only one*/
.list-item:last-of-type{
    background:transparent;
}
.list-item-award,.list-item-text {
    margin-left: .5rem;
}
.list-item-award{
    padding-left: .53rem;
    margin-bottom: .12rem;
    margin-top: .22rem;
    
}
.list-item-text {
    width: 100%;
    padding-left: .46rem;
    padding-bottom: .16rem;
    background: url("../images/sign-icon.png") no-repeat left .05rem;
    background-size: .32rem .25rem;
    font-size: .26rem;
    color: #808080;
    box-sizing: border-box;
    border-bottom: 1px solid #f4f4f4;
}
.list-item:last-of-type .list-item-text {
    border-bottom: 0 none;
}
.list-item .list-btn {
    padding-left: .1rem;
    text-decoration: underline;
    font-size: .28rem;
    color: #316cec;
}

18. Horizontal line background at the bottom of the text

<div class="login-title">Let the little white pigeon know that you are not a robot! </div>

.login-title {
    position: relative;
    height: .39rem;
    margin-top: .4rem;
    font-size: .34rem;
    color: #fff;
    text-align: center;
}
.login-title:after {
    content: "";
    position: absolute;
    width: 5.05rem;
    height: .21rem;
    background-color: #fe923f;
    z-index: -1;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 0;
}

Appendix: Compilation of commonly used CSS styles

1. Background image adapts to the screen

.background{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 1000px;
  z-index: -10;
  zoom: 1;
  background-color: #fff;
  background: url(../../assets/[email protected]) no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center 0;
}

2. Highly adaptive screen

.height{
  width: 200px;
  min-height: 400px;
  overflow:auto;
  height: 100vh;
  display: -webkit-flex;
}

This is the end of this article about detailed explanation of commonly used CSS styles (layouts). For more relevant CSS style layout content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

<<: A brief discussion on the solution to the failure of starting the server installation in MySQL

>>: A detailed summary of HTML tag nesting rules suitable for beginners