[Css] Reference notes for common design examples of Css and Html (for self-development projects)

content

content

First, the div is centered left and right

2. Adjust the upper and lower dislocation of pictures, icon fonts, etc.

Three, div bottom or top top

4. Proportional distribution of left and right elastic boxes

5. The child DIV uses magin-top, and the parent DIV and child DIV move down at the same time

Six, the custom style of the Checkbox checkbox

7. Bottom button code

Note: white-space: nowrap; code affects the bottom of the top pposition: fixed;

Eight, div does not wrap, the excess part is hidden

Nine, DIV translucent effect

The div is transparent, but the content in the div is not transparent

10. Return to the previous page on the upper left side [left arrow]

11. CSS block code comments

Finally, font-awesome commonly used icon code

---

First, the div is centered left and right

1, div and other block elements centered left and right

margin: 0 auto;

margin: 0 auto;

2. Row-level elements such as span are centered left and right

text-align: center;

text-align: center;

2. Adjust the upper and lower dislocation of pictures, icon fonts, etc.

Relative positioning: position:relative

{
    position:relative; /* 相对定位  */
    left:10px;
    top:10px
}

Three, div bottom or top top

        position: fixed;  /* 浏览器定位  */
        top: 10px;

4. Proportional distribution of left and right elastic boxes

1, father div

  /* 父div */

  .PayList_row {
      display: flex;
      flex-direction: row;
  }

2, child div

    .PayList{
        width: 0px;
        flex-grow: 2;
        background-color: aqua;
    }

5. The child DIV uses magin-top, and the parent DIV and child DIV move down at the same time

子div：magin-top:10px

父div：padding-top: 1px;

Six, the custom style of the Checkbox checkbox

 1. html code

 <span class="checkbox_span">
       <input type="checkbox" class="Checkbox" id="check3">
       <label for="check3" class="checkbox_label"></label>
 </span>

2. css code

<link rel="stylesheet" href="css/CheckBox.css">

    /* 圆圈样式 */
    .Checkbox+.checkbox_label {
        width: 23px;
        height: 23px;
    }

    /* 对勾样式 */
    .Checkbox:checked+.checkbox_label:after {
        left: -1px;
        top: -1px;
        width: 25px;
        height: 25px;
        font-weight:900;
        font-size: 16px;
        line-height: 25px;
    }

7. Bottom button code

Note: white-space: nowrap; code affects the bottom of the top pposition: fixed;

1. html code

    <!-- 底部按钮 -->
    <div>
        <button id="btn_bottom">确认付款</button>
    </div>

2. css code

    #btn_bottom {
        background-color: rgb(254, 95, 43);
        width: 100%;
        height: 55px;
        color: white;
        font-size: 18px;
        position: fixed;
        bottom: 0;
        left: 0;
        border: 0px;
    }

Eight, div does not wrap, the excess part is hidden

        overflow: hidden;
        white-space: nowrap;

Nine, DIV translucent effect

.aaa{
    filter:alpha(Opacity=80);  /*  IE有效 */
    -moz-opacity:0.5; /* 火狐浏览器有效，IE无效 */
    opacity: 0.5; /* 除IE外，所有浏览器都有效 */
} 

The div is transparent, but the content in the div is not transparent

background:rgba(0,0,0,0.2);

10. Return to the previous page on the upper left side [left arrow]

css code

    /* #region  === 【返回箭头】===*/

    #ReturnPage {
        width: 30px;
        height: 30px;
        background-color: rgb(69, 69, 69,0.6);
        border-radius: 50px;
        color: white;
        font-size: 25px;
        line-height: 15px;
        text-align: center;
        position: fixed;
        top: 10px;
        margin-left: 10px;
    }

    #ReturnPage i {
        position: relative;
        top: 1px;
        left: -1px;
    }

  /* #endregion */

Introduce font-awesome icon file

<link href="js/font-awesome/css/font-awesome.min.css" rel="stylesheet">

html code

        <!-- 返回箭头 -->
        <a href="javascript:window.history.go(-1)">
            <div id="ReturnPage">
                <i class="fa fa-angle-left"></i>
            </div>
        </a>

11. CSS block code comments and Line spacer code

  /* #region === 【】=== */

  /* #endregion */

Dividing line

    .line_1 {
        height: 1px;
        background-color: rgb(250, 250, 250);
    }

    .line_2 {
        height: 4px;
        background-color: rgb(250, 250, 250);
    }

    .line_3 {
        height: 8px;
        background-color: rgb(250, 250, 250);
    }

    <div class="line_3"></div>

12. Specify the title font name font-family

<style>
    @font-face {
        font-family: "myfont";
        src: url('css/fonts/Hiti.otf');
    }
    .div{
        font-family: "myfont";
    }
</style>

Finally, font-awesome commonly used icon code

1. Quote

<link href="js/font-awesome/css/font-awesome.min.css" rel="stylesheet">

2. Common icons

 <i class="fa fa-angle-left"></i> 左箭头<br />

fa-map-marker    fa-angle-double-downfa-chevron-circle-left

fa-chevron-up     fa-heart      fa-heart-o  fa-times fa-close

 fa-check  fa-comment-o    fa-commenting-o     fa-commenting

 fa-cog      fa-camera       fa-bars      fa-image    fa-info-circle

  fa-sort-down     fa-street-view     fa-tag    fa-users fa-list-ul

   fa-user   fa-user-circle-o    fa-user-o    fa-user-plus    fa-yen

  fa-minus-square      fa-minus-square-o    fa-plus-square fa-plus-square-o

 fa-th-large        fa-table    fa-th-largefa-rotate-left  fa-share-alt  

 fa-share-alt-square    fa-star   fa-star-half-o   fa-star-o   fa-remove     fa-plus

fa-paper-plane   fa-pencil-square-o   fa-paint-brush     fa-paper-plane-o

 fa-phone       fa-phone-square    fa-envelope     fa-envelope-o

fa-diamond     fa-drivers-license-o    fa-credit-card        

fa-check-circle  fa-circle-thin