CSS advanced skills / CSS user interface style + vertical align attribute application + common layout skills

catalogue

CSS user interface style

Change mouse style cursor

Form outline

Prevent dragging text field resize

Vertical align attribute application

Realize the vertical centering of inline blocks and text

Solution to the blank gap at the bottom of the picture

Overflow text ellipsis display

        1. Single line text overflow display ellipsis -- three conditions must be met

         2. Multiline text overflow display ellipsis

Common layout skills

Application of negative margin value

        1. The borders of the two boxes do not overlap

        2. The box border changes color

Text around floating elements

Ingenious use of inline block elements

Clever use of CSS triangle

Every web page must be initialized with CSS first

CSS user interface style

Change mouse style cursor

Selector {cursor: pointer;}

Form outline

Add Outline: 0 to the form; Or outline: none; You can remove the default border

    <style>
        input {
            outline: none;
        }
    </style>

Prevent dragging text field resize

It can be dragged larger, resulting in layout disorder. In order to prevent dragging

textarea { resize: none;}

Try to put the text field on top of one line

Vertical align attribute application

Realize the vertical centering of inline blocks and text

Vertical align is often used to set the vertical alignment of pictures or forms (inline block elements) with text

Valid only for inline elements or inline block elements

Syntax: vertical align: baseline | top | middle | bottom

Solution to the blank gap at the bottom of the picture

bug: there will be a blank gap at the bottom of the picture because the block elements in the line will align with the baseline of the text

resolvent:

  1. Add vertical align: Middle | top | bottom, etc. to the picture. (advocate)
  2. Convert the picture into a block level element display: block;

Overflow text ellipsis display

        1. Single line text overflow display ellipsis -- three conditions must be met

Conditions:

1. First force the text {white space: nowrap to be displayed in one line; / / line breaks are not allowed

Flow: hidden part;

 3. Text overflow: ellipsis; / / ellipsis

         2. Multiline text overflow display ellipsis

Multiple lines of text overflow display ellipsis, which has a large compatibility problem. It is suitable for webkit browser or mobile terminal (most mobile terminals are webkit kernel). If you want to use it, you must strictly control the size of the box

            overflow: hidden;
            text-overflow: ellipsis;
            /* Elastic telescopic box model display */
            display: -webkit-box;
            /* Limit the number of lines of text displayed in a block element */
            -webkit-line-clamp: 3;
            /* Sets or retrieves the arrangement of the child elements of the expansion box object */
            -webkit-box-orient: vertical;

Common layout skills

Application of negative margin value

        1. The borders of the two boxes do not overlap

            margin-left: -1px;

Move the box to the left and the box on the right will press against the box on the left

        2. The box border changes color

When the mouse passes, you want to change the border color

              

 1. If the box is not positioned, the mouse can add relative positioning

        ul li:hover {
            /* 1.If the box is not positioned, the mouse can add relative positioning */
            position: relative;
            border: 1px solid blue;
        }

2. If li has positioning, use z-index to improve the level (z-index can be used only when positioning is added)

        ul li:hover {
            /*2.If li has positioning, use z-index to improve the level */
            position: relative;
            z-index: 1;
            border: 1px solid blue;
        }

Text around floating elements

To make text floating, first set a box, then add text and pictures, and let the picture float to the left

        

 

Ingenious use of inline block elements

Use inline block elements to do this:

Put link a in a box to make a become an inline block element. You can set the size (the inline block element itself has a default margin), and then set the border and background

 

 

Clever use of CSS triangle

Make this effect:

Make the blue triangle on the right transparent

 

bottom is 0

top becomes higher

 

left is 0 and top becomes transparent

 

            width: 0;
            height: 0;
            border-color: transparent red transparent transparent;
            border-style: solid;
            border-width: 22px 8px 0 0;

 

 The code is as follows:

    <div class="price">
        <!-- Current price -->
        <span class="miaosha">
            ¥1650
            <i></i>
        </span>
        <!-- Original price -->
        <span class="origin">¥5650</span>
    </div>
        .price {
            width: 180px;
            height: 24px;
            border: 1px solid red;
            margin: 100px auto;
            line-height: 24px;
        }

        .price .miaosha {
            position: relative;
            float: left;
            width: 90px;
            height: 100%;
            background-color: red;
            text-align: center;
            color: #fff;
            font-weight: 700;
            margin-right: 8px;
        }

        /* Transparent triangle */
        .price .miaosha i {
            position: absolute;
            right: 0;
            top: 0;
            width: 0%;
            height: 0;
            border-color: transparent white transparent transparent;
            border-style: solid;
            border-width: 24px 10px 0 0;
        }

        .price .origin {
            font-size: 12px;
            color: gray;
            text-decoration: line-through;
        }

Every web page must be initialized with CSS first

Different browsers have different default values for some tags. In order to eliminate the differences in HTML text rendering between different browsers and take care of the compatibility of browsers, CSS needs to be initialized. (reset the style of the browser during initialization # CSSreset)

Take jd.com as an example:

        /* Clear the inside and outside margins of all labels by 0 */
        * {
            margin: 0;
            padding: 0
        }

        /* em And i italicized text is not tilted */
        em,
        i {
            font-style: normal
        }

        /* Remove the dot of li */
        li {
            list-style: none
        }

        /* border 0 In order to take care of lower version browsers, if the picture contains links, there will be a border by default */
        /* Cancel the problem of blank gap at the bottom of the picture */
        img {
            border: 0;
            vertical-align: middle
        }

        button {
            /* When our mouse passes the button button, the mouse becomes a small hand */
            cursor: pointer
        }

        a {
            color: #666;
            /* Link de underline */
            text-decoration: none
        }

        a:hover {
            color: #c81623
        }

        button,
        input {
            font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
        }

        body {
            /* Carry the zigzag shape to make the reality of the text clearer */
            -webkit-font-smoothing: antialiased;
            background-color: #fff;
            font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
            color: #666
        }

        .hide,
        .none {
            display: none
        }

        /* Clear float */
        .clearfix:after {
            visibility: hidden;
            clear: both;
            display: block;
            content: ".";
            height: 0
        }

        .clearfix {
            *zoom: 1
        }

Tags: Front-end css

Posted by madmax on Fri, 01 Apr 2022 16:33:40 +0300