Advanced CSS skills

1. Rounded border

In CSS3, the rounded border style is added, so that the box can be rounded.

The border radius property is used to set the outer border fillet of the element.

  • Syntax:

    border-radius: length;  
    
    • Parameter values can be numeric or percentage

    • This attribute is a shorthand attribute, which can be followed by four values, representing upper left corner, upper right corner, lower right corner and lower left corner respectively

    • The attributes are written separately: border top left radius, border top right radius, border bottom right radius and border bottom left radius

    • Compatibility: ie9 + browser support, but it will not affect the page layout, so you can use it safely

  • Examples

    /* If it is a square, if you want to set it as a circle, change the value to half of the height or width, or write it as 50% */
    width: 200px;
    height: 200px;
    background-color: pink;
    border-radius: 50%;
    
    /* If it is a rectangle, if you want to set it as a rounded rectangle, change the value to half of the height or width, or write it as 50% */
    width: 300px;
    height: 100px;
    background-color: pink;
    border-radius: 50px;
    
    /* Only two values are given. The first value represents upper left and lower right, and the second value represents upper right and lower left */	
    width: 200px;
    height: 200px;
    border-radius: 10px 40px;
    background-color: pink;	
    
  • Operation results

2. Box shadow

CSS3 has added box shadow. We can use the box shadow attribute to add shadow to the box.

  • Syntax:

    box-shadow: h-shadow v-shadow blur spread color inset/outset;
    
    box-shadow: Horizontal shadow vertical shadow blur distance (virtual and real) shadow size (shadow size) within shadow color/Vulva shadow;
    
    Attribute value describe
    h-shadow Required. The position of the horizontal shadow. Negative values are allowed.
    v-shadow Required. The position of the vertical shadow. Negative values are allowed.
    blur Optional. Fuzzy distance.
    spread Optional. The size of the shadow.
    color Optional. The color of the shadow.
    inset Optional. Change the outer shadow to the inner shadow.
  • be careful

    • The default is outside shadow, but you can't write this word, otherwise the shadow will be invalid

    • Box shadows do not take up space and do not affect the arrangement of other boxes.

  • Examples

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box shadow</title>
    <style>
        .test li {
            list-style: none;
            width: 500px;
            height: 50px;
            background-color: #eee;
            margin-top: 20px;
            padding: 10px;
        }
    
        .test .outset {
            box-shadow: 2px 2px rgba(0, 0, 0, .6);
        }
    
        .test .outset-blur {
            box-shadow: 7px 7px 7px rgba(0, 0, 0, .6);
        }
    
        .test .outset-blur-extension {
            box-shadow: 7px 7px 8px 3px rgba(0, 0, 0, .6);
        }
    
        .test .inset {
            box-shadow: 2px 2px 3px 3px rgba(0, 0, 0, .6) inset;
        }
    
        .test .more-outset {
            box-shadow: 
                9px 9px 3px 3px rgba(255, 0, 0, .6),
                13px 13px 3px 6px rgba(0, 255, 0, .6),
                20px 20px 3px 9px rgba(0, 0, 255, .6);
        }
    </style>
    </head>
    <body>
        <ul class="test">
            <li class="outset">Routine effect of vulva shadow</li>
            <li class="outset-blur">Outer shadow blur effect</li>
            <li class="outset-blur-extension">Outer shadow blur extension effect</li>
            <li class="inset">Inner shadow effect</li>
            <li class="more-outset">Multi layer external shadow effect</li>
        </ul>
    </body>
    
  • Operation results

3. Text shadow

In CSS3, we can use the text shadow attribute to apply shadows to text.

  • grammar

    text-shadow: h-shadow v-shadow blur color;
    
    Attribute value describe
    h-shadow Required. The position of the horizontal shadow. Negative values are allowed.
    v-shadow Required. The position of the vertical shadow. Negative values are allowed.
    blur Optional. Fuzzy distance.
    color Optional. The color of the shadow.
  • Examples

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Text shadow</title>
    <style>
        div {
            font-size: 50px;
            color: orangered;
            font-weight: 700;
            text-shadow: 5px 5px 6px rgba(0, 0, 0, .3);
    
        }
    </style>
    </head>
    
    <body>
        <div>
            You are the shadow,I'm fire shadow
        </div>
    </body>
    
  • Operation results

4. Display and hiding of elements

Similar website advertisements disappear when we click close, but we refresh the page and will reappear!

Essence: let an element be hidden or displayed in the page.

4.1 the display attribute realizes the display and hiding of elements

The display attribute can be used to set an element to show or hide.

Attribute value describe
none hidden object
block In addition to converting to block level elements, there is also the meaning of display elements

Note: after hiding the element, display no longer occupies the original position.

4.2 visibility attribute realizes the display and hiding of elements

The visibility attribute specifies whether an element should be visible or hidden.

Attribute value describe
visible Element visibility
hidden Element hiding

Note: visibility continues to occupy the original position after hiding the element.

4.2 the overflow attribute realizes the display and hiding of elements

The overflow attribute specifies what happens if the content overflows an element's box (exceeding its specified height and width).

Attribute value describe
visible Do not cut content or add scroll bars
hidden The content exceeding the object size is not displayed, and the exceeding part is hidden
scroll The scroll bar is always displayed regardless of whether it is exceeded or not
auto Beyond the automatic display of the scroll bar, not beyond the display of the scroll bar

be careful:

  1. Generally, we don't want the overflow content to be displayed, because the overflow part will affect the layout.

  2. However, if there is a positioning box, use overflow:hidden with caution; Because it hides the excess.

5. Wizard diagram

5.1 why do we need sprite technology

The above figure shows the request schematic diagram of the web page. When a user visits a website, he needs to send a request to the server. Each image on the web page can be displayed to the user only after one request.

However, a web page often uses many small background images as decoration. When there are too many images in the web page, the server will frequently accept and send requests, which will greatly reduce the loading speed of the page.

Therefore, in order to effectively reduce the number of requests received and sent by the server and improve the loading speed of the page, CSS sprite Technology (also known as CSS Sprites and CSS Sprite) appears.

5.2 technical explanation

CSS sprite actually integrates some background images in the web page into a large picture (Sprite). However, each web page element usually only needs a small picture in different positions in the sprite, so it needs to be accurately located to a small picture in the sprite.

In this way, when users visit the page, they only need to send a request to the service, and all the background images in the web page can be displayed.

We need to use CSS:

  • background-image
  • background-repeat
  • background-position
  • The key is to use the background position attribute to locate accurately.

5.3 core summary of the use of Spirit Technology

First of all, we know that css sprite technology is mainly aimed at the background image, and the inserted image img does not need this technology.

  1. Sprite technology is mainly used for background pictures, which is to integrate multiple small background pictures into a large picture.

  2. This big picture is also called sprites sprite or sprite.

  3. To move the position of the background picture, you can use background position.

  4. The moving distance is the x and y coordinates of the target image in the large image.

  5. Generally, it moves upward and left, so the value is negative.

  6. When using sprite image, it is necessary to accurately measure the size and position of each small background image.

25.4 making sprite drawings

CSS sprite actually integrates some background images in the web page into a big picture (sprite picture). What we need to do is to put the small picture together into a big picture.

In most cases, sprites are web art work.

Production details:

  1. The sprite pictures are all small decorative background pictures, and the inserted pictures cannot be put up.

  2. It can be placed horizontally or vertically, but there is an appropriate gap between each picture.

  3. After adding a sprite, it is most convenient to add another sprite.

For small websites with few background pictures, there is no need to use wizard technology, and the maintenance cost is too high. If there are many background pictures, it is recommended to use sprite technology.

6. Font Icon

6.1 generation of font icons

Font Icon usage scenario: mainly used to display some common and commonly used small icons in web pages.

Why not use sprite map?

  1. The picture file is still relatively large.

  2. The picture itself will be distorted when zoomed in and out.

  3. Once the picture is made, it is very complicated to change it.

At this time, there is a technology to solve the above problems, that is, the Font Icon iconfont.

Font icons can provide front-end engineers with a convenient and efficient way to use icons. They show icons, which essentially belong to fonts.

Summary:

  1. If you encounter some small icons with simple structure and style, use font icons.

  2. If you encounter some small pictures with more complex structure and style, use sprite diagram.

6.2 advantages of font icons

  1. Lightweight: an icon font is smaller than a series of images. Once the font is loaded, the icon will be rendered immediately, reducing server requests.

  2. Flexibility: the essence is text, which can change color, produce shadow, transparent effect, rotation, etc. at will.

  3. Compatibility: it supports almost all browsers and can be used safely.

Note: font icons cannot replace sprite technology, but only improve and optimize the icon technology in work.

6.3 using font icons - Download

Two websites are recommended:

  1. Icomoon font: http://icomoon.io

    IcoMoon was founded in 2011 and launched the first custom icon font generator, which allows users to select the desired icon. The content of the font is diverse and comprehensive. The only regret is that the foreign servers have a slow opening speed.

  2. Ali iconfont font library: http://www.iconfont.cn/

    This is an iconfont font icon font library of Ali's mother M2UX, including Taobao Icon Library and Ali's mother icon library. You can use AI to create icons and upload them. The point is, free!

6.4 Font Icon - Import

Take icomoon as an example.

  1. Unzip the downloaded folder. After unzipping, there will be the following files

    • Font folder is the font file. Different browsers support different font formats. Font icons are compatible because they contain font files supported by mainstream browsers.

      • TureType(.ttf) format ttf font is the most common font for Windows and Mac. Browsers that support this font include IE9 +, Firefox 3.0 5+,
        Chrome4+,Safari3+,Opera10+,iOS Mobile,Safari4.2+;

      • Web Open Font Format(.woff) format woff font. Browsers supporting this font include IE9 + and Firefox 3 5+,Chrome6+,
        Safari3.6+,Opera11.1+;

      • Embedded Open Type(.eot) format eot font is a special font for ie, and browsers supporting this font have IE4 +;

      • SVG(.svg) format SVG font is a format based on SVG font rendering. Browsers supporting this font include chrome 4 + and safari 3 1+,
        Opera10.0+,iOS Mobile Safari3.2+;

  2. Copy the font file to the root directory of the project

  3. Global declaration of fonts in css Style: it is to introduce these font files into our page through css.

    The declaration statement can be in the style. In the extracted folder CSS file.

    @font-face {
    	  font-family: 'icomoon';   /* icomoon Is the font icon name, which can be modified. If it is modified, all icomoon s below should be modified */
    	  src:  url('fonts/icomoon.eot?35ulpc');  /* Be sure to pay attention to the problem of font file path */
    	  src:  url('fonts/icomoon.eot?35ulpc#iefix') format('embedded-opentype'),
    	    url('fonts/icomoon.ttf?35ulpc') format('truetype'),
    	    url('fonts/icomoon.woff?35ulpc') format('woff'),
    	    url('fonts/icomoon.svg?35ulpc#icomoon') format('svg');
    	  font-weight: normal;
    	  font-style: normal;
    	  font-display: block;
    }
    
  4. Add small icons in html tags

    <span></span>
    <!-- perhaps -->
    <span>\e900</span>
    

    The contents in the span tag are from the demo in the unzipped folder HTML

    • Open the demo in the browser HTML, find the icon you need to use

    • The box below the icon is what we need

    • When you want to put a slash in front of a label, for example: \ e900, but

  5. Define fonts for labels

    span {
    	font-family: 'icomoon';  /* It must be consistent with the font defined in the previous font declaration */
    }	
    

6.5 Font Icon - added

If the original font icon is not enough at work, we need to add a new font icon to the original font file.

Put the selection in the unzipped folder JSON upload again, then select the new icon you want, download the compressed package again, and replace the original file.

  1. Enter icomoon's website

  2. Select IcoMoon App

  3. Select import icons

  4. The previously selected icon will appear on it. Continue to select the desired icon, and then download it

  5. Unzip the downloaded file and replace the existing font folder in the project with the font folder inside

7. CSS triangle

Some triangles are common in web pages. You can draw them directly with CSS without making pictures or font icons.

  • Practice:

    1. We can simulate the triangle effect with css border

    2. Width height is 0

    3. We need to write all four borders, only keep the required border color, and the rest can not be omitted. We can change them to transparent

    4. In order to be compatible with lower version browsers, add font size: 0; line-height: 0;

  • Example 1 full triangle:

    div {
           width: 0;
           height: 0;
    
           line-height: 0;
           font-size: 0;
    
           border-top: 20px solid red;
           border-right: 20px solid green;
           border-bottom: 20px solid blue;
           border-left: 20px solid yellow;
       }
    
  • The effect is as follows:

  • Example 2 keeps only the required triangles

    div {
    	width: 0;
    	height: 0;
    	
    	line-height: 0;
    	font-size: 0;
    	
    	border: 20px solid transparent;
    	
    	border-bottom-color: orange;
    }
    
  • The effect is as follows:

7.1 CSS triangle reinforcement

Valid only for inline and inline block elements.

Principle:

Main code:

.box {
	width: 0;
	height: 0;
	/* 1.Only the right border has color */
	border-color: transparent red transparent transparent;
	/* 2. The styles are solid */
	border-style: solid;
	/* 3. The width of the top border should be larger, the width of the right border should be smaller, and the other borders should be 0 */
	border-width: 100px 50px 0 0 ;
	}

Example:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS Ingenious application of triangular reinforcement</title>
    <style>         
        .price {
            width: 160px;
            height: 24px;
            line-height: 24px;
            border: 1px solid red;
            margin: 0 auto;
        }
        .miaosha {
            position: relative;
            float: left;
            width: 90px;
            height: 100%;
            background-color:red;
            text-align: center;
            color: #fff;
            font-weight: 700;
            margin-right: 8px;

        }
        .miaosha i {
            position: absolute;
            right: 0;
            top: 0;
            width: 0;
            height: 0;
            border-color: transparent #fff transparent transparent;
            border-style: solid;
            border-width: 24px 10px 0 0;
        }
        .origin {
            font-size: 12px;
            color: gray;
            text-decoration: line-through;
        }
    </style>
</head>
<body>
        <div class="price">
            <span class="miaosha">
                ¥1650
                <i></i>
            </span>
            <span class="origin">¥5650</span>
        </div>
</body>

effect:

8. CSS user interface style

  • The so-called interface style is to change some user operation styles in order to improve the user experience.

    • Change the user's mouse style

    • Form, text field outline

    • Prevent form field dragging

8.1 mouse style (cursor)

Sets or retrieves which system predefined cursor shape the mouse pointer moves over the object.

  • grammar

    cursor: XXX;
    
    Attribute value describe
    default Small white arrow, default
    pointer Little hand
    move Move, cross arrow
    text text
    not-allowed prohibit
  • Examples

    <ul>
      <li style="cursor:default">I'm Xiaobai</li>
      <li style="cursor:pointer">I'm a little hand</li>
      <li style="cursor:move">I'm mobile</li>
      <li style="cursor:text">I'm text</li>
      <li style="cursor:not-allowed">I'm forbidden</li>
    </ul>
    

8.2 outline

Is a line drawn around the element, which is located at the periphery of the border edge and can highlight the element.

 outline : outline-color ||outline-style || outline-width 

But we don't care how many can be set. We usually remove them.

The most direct way to write is: outline: 0; Or outline: none;

Example:

  1. Remove the outline after the input box obtains the focus

     <input  type="text"  style="outline: 0;"/>
    
  2. Remove the outline after the text field obtains the focus

     <textarea style="outline: none;"></textarea>
    

8.3 prevent dragging text field resize

In actual development, we can't drag and drop in the lower right corner of the text field:

<textarea  style="resize: none;"></textarea>

8.4 user interface style summary

attribute purpose purpose
Mouse style Change mouse style cursor There are many styles. Remember pointer
Contour line Modify the default outline of the form We usually remove the outline directly; Border is a border, which we often use
Prevent dragging Mainly for text field resize Prevent users from dragging text fields at will, resulting in page layout confusion

9 vertical align

CSS vertical align attribute usage scenario: it is often used to set the vertical alignment of pictures or forms (inline block elements) and text.

Official explanation: used to set the vertical alignment of an element, but it is only valid for inline elements or inline block elements.

  • grammar

    vertical-align : baseline |top |middle |bottom 
    


    |Attribute value | description|
    |Baseline | by default, the element is placed on the baseline of the parent element|
    |Top | align the top of the element with the top of the highest element in the row|
    |Middle | place the element in the middle of the parent element|
    |bottom | align the top of the element with the top of the lowest element in the row|

  • be careful:

    Vertical align does not affect the content alignment in block level elements. It is only for inline elements or inline block elements, especially inline block elements. It is usually used to control the alignment of pictures / forms with text.

9.1 remove the blank gap at the bottom of the picture

  • reason:

    For inline block elements such as pictures or forms, the bottom line will be aligned with the baseline of the parent box.

    So there will be a blank gap at the bottom of the picture.

  • The solution is:

    • Add vertical align: Middle | top | bottom, etc. to the picture (it is recommended to use)
    • Convert the picture into a block level element display: block;

10. Overflow text ellipsis display

10.1 text display method in white space object

White space sets or retrieves the text display method in the object. Usually we use it to force one line to display content.

Syntax:

white-space: normal;  /* Default processing method */

white-space: nowrap; /* Force all text to be displayed on the same line until the end of the text or encountering br label objects.*/

10.2 text overflow text overflow

Text overflow sets or retrieves whether to use an ellipsis mark (...) to mark the overflow of text in the object

text-overflow: clip;  /* Do not display ellipsis (...), It's a simple cut */

text-overflow: ellipsis;   /* Show ellipsis mark (...) when text overflows in object*/

be careful:

Be sure to force the display in a row first, and then use it with the overflow attribute.

10.3 overflow text is displayed in one line

/*1. Force text to appear on one line first*/
white-space: nowrap;

/*2. Excess hidden*/
overflow: hidden;

/*3. The text replaces the excess with an ellipsis*/
text-overflow: ellipsis;

10.4 multi line text overflow display ellipsis

Multi line text overflow displays ellipsis, which has large compatibility problems. It is suitable for WebKit browser or mobile terminal (most of the mobile terminal is WebKit kernel).

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

It is more recommended to let the background personnel do this effect, because the background personnel can set how many words to display, which makes the operation easier.

11. CSS initialization

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, we need to initialize CSS.

Simple understanding: CSS initialization refers to resetting the style of the browser (also known as CSS reset).

Take JD CSS initialization code as an example:

/* Clear the inner and outer margins of all labels */
* {
    margin: 0;
    padding: 0
}

/* Clear the inner and outer margins of all labels */
blockquote, 
body, 
button, 
dd,
dl, 
dt, 
fieldset, 
form, 
h1, 
h2, 
h3, 
h4, 
h5, 
h6, 
hr, 
input, 
legend, 
li, 
ol, 
p, 
pre, 
td, 
textarea, 
th, 
ul {
	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
}

img {
    /* border 0 Take care of lower version browsers. If the picture contains links, there will be border problems */
    border: 0;
    /* Cancel the problem of blank gap at the bottom of the picture */
    vertical-align: middle
}

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

/* Remove the default font color and underline in a label*/
a {
    color: #666;
    text-decoration: none
}

/*Uniformly set the font color of all a labels when the mouse passes*/
a:hover {
    color: #c81623
}

/* Uniformly set the font of buttons and input boxes */
button,
input {
    /* "\5B8B\4F53" This means that the browser has better compatibility */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
    /* CSS3 Anti aliasing makes 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 all boxes containing class names hide and none */
.hide,
.none {
    display: none
}

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

.clearfix {
    *zoom: 1
}

12. Application of negative margin value

When two boxes with borders are floated together, the adjacent borders become thicker when displayed in the browser.

resolvent:

  • Let each box margin move to the left, and the pixel value of the border thickness just presses the border of the adjacent box.

    margin: -1px;  /* Assume border size: 1px; */
    

Although this can solve the problem that the adjacent border becomes thicker, if you want to make the mouse move to the box on the left, the border of the box will highlight the effect. At this time, the right border of the box on the left will not be displayed because it is pressed by the box on the right.

resolvent:

  • When the mouse passes a box, you can raise the level of the current box (if there is no positioning, add relative positioning (keep the position), and if there is positioning, add z-index).

    div: hover {
    
    	position: relative;  /* Suppose that the adjacent boxes are not positioned */
    
    	z-index: 9999;  /* Suppose that adjacent boxes have positioning */
    }
    

Comprehensive example:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>margin Clever use of negative values</title>
    <style>
        ul li {
            position: relative;
            float: left;
            list-style: none;
            width: 150px;
            height: 200px;
            border: 1px solid red;
            margin-left: -1px;
        }

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

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

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

13. Text around floating elements


A layout like this can take the form of text surrounding floating elements.

Example:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Clever use of text around floating elements</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 300px;
            height: 70px;
            background-color: orange;
            margin: 0 auto;
            padding: 5px;
        }
        .pic {
            float: left;
            width: 120px;
            height: 60px;
            margin-right: 5px;
        }
        .pic img {
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="pic">
            <img src="images/img.png" alt="">
        </div>
        <p>[[highlights] warm up-Brazil 0-1 Peru Neymar substitutes for two bloody players</p>
    </div>
</body>

14. Ingenious use of in-line blocks


The page number is displayed in the middle of the page:

  • Convert these link boxes into inline blocks with gaps in the middle of inline block elements, and add text align: Center to the parent; Inline block elements are centered horizontally.

Example:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ingenious use of in-line blocks</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            text-align: center;
        }
        .box a {
            display: inline-block;
            width: 36px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 36px;
            text-decoration: none;
            color: #333;
            font-size: 14px;
        }
       .box .prev,
        .box .next {
            width: 85px;
        }
        .box .current,
        .box .elp {
            background-color: #fff;
            border: none;
        }
        .box input {
            height: 36px;
            width: 45px;
            border: 1px solid #ccc;
            outline: none;
        }
        .box button {
           width: 60px;
           height: 36px;
           background-color: #f7f7f7;
            border: 1px solid #ccc;        
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="#"Class =" prev "> & lt; & lt; previous</a>
        <a href="#" class="current">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#" class="elp">...</a>
        <a href="#"Class =" next "> & gt; & gt; next page</a>
        To the first 
        <input type="text">
        page
        <button>determine</button>
    </div>
</body>

15. Sliding door

  • background

    For example, when making a web page with many concave elements, how to solve the problem of not having the same shape as the background when making a web page?

    In order to make the background of various special shapes adapt to the amount of text content in elements, CSS sliding door technology appears. It constructs the page from a new perspective, so that the background of various special shapes can stretch and slide freely to adapt to the text content inside the element, which is more usable.

  • Application:

    Sliding doors are most common in various navigation bars, such as Wechat navigation bar: http://weixin.qq.com/

  • core
    The core technology is to use CSS Wizard (mainly the background position) and box padding to expand the width, so as to adapt to the navigation bar with different word numbers.

    The opening part of padding will display the background.

  • The general classic layout is like this:

    <li>
      <a href="#">
        <span>Navigation bar content</span>
      </a>
    </li>
    

    css Style:

    /*1. a Yes, set the left background (left door)*/
    a {
    	 /*Because we are sliding doors, the left-right push-pull has something to do with the text content. At this time, we need to open the box with text, so we need to use inline blocks*/
    	display: inline-block;
    	height: 33px;
    	background: url(images/to.png) no-repeat;
    	margin: 100px;
    	padding-left: 15px;
    	color: #fff;
    }
    /*2. span Yes, set the right background (right door)*/
    a span {
    	display: inline-block;
    	height: 33px;
    	/*Be sure to note that span needs to align the background image to the right*/
    	background: url(images/to.png) no-repeat right top;
    	padding-right: 15px;
    }
    
  • Complete example:

    <head>
    	<meta charset="UTF-8">
    	<title>Wechat navigation bar case</title>
    	<style>
    		* {
    			margin: 0;
    			padding: 0;
    		}
    
    		li {
    			list-style: none;
    		}
    
    		body {
    			background: url(images/wx.jpg) repeat-x;
    		}
    
    		.nav {
    			margin-top: 20px;
    		}
    
    		.nav li {
    			float: left;
    			margin: 0 5px;
    		}
    
    		.nav a {
    			display: inline-block;
    			height: 33px;
    			background: url(images/to.png) no-repeat;
    			padding-left: 15px;
    			color: #fff;
    			line-height: 33px;
    			font-size: 14px;
    		}
    
    		.nav a span {
    			display: inline-block;
    			height: 33px;
    			background: url(images/to.png) no-repeat right;
    			padding-right: 15px;
    		}
    
    		/*After the mouse passes a link, first change the background picture, and then change the span in the link*/
    		/* Note that the no repeat and right attribute values are inherited here*/
    		.nav a:hover,
    		.nav a:hover span {
    			background-image: url(images/ao.png);
    		}
    	</style>
    </head>
    
    <body>
    	<div class="nav">
    		<ul>
    			<li>
    				<a href="#">
    					<span>home page</span>
    				</a>
    			</li>
    			<li>
    				<a href="#">
    					<span>Help and feedback</span>
    				</a>
    			</li>
    			<li>
    				<a href="#">
    					<span>Public platform</span>
    				</a>
    			</li>
    			<li>
    				<a href="#">
    					<span>Open platform</span>
    				</a>
    			</li>
    			<li>
    				<a href="#">
    					<span>Contact me</span>
    				</a>
    			</li>
    		</ul>
    	</div>
    </body>
    

Summary:

  1. a set the left side of the background and spread the padding to an appropriate width.

  2. span set the right side of the background, the padding will be stretched to an appropriate width, and the rest will continue to be stretched by the text.

  3. The reason a includes span is that the whole navigation is clickable.

16. Unicode encoded font

Replace the name of Chinese font with corresponding Unicode code, which can effectively avoid the problem of garbled code when the browser interprets CSS code.

For example:

  • Bold \ 9ED1F53

  • Arial \ 5B8BF53

  • Microsoft YaHei \ 5FAEF6FC5ED1

Examples

font-family: 'Microsoft YaHei' \5B8B\4F53;

17. PS basic operation and common shortcut keys

Because most of the renderings of web art are done by ps, most of our cut-off work is completed in ps.

  • File – > Open: you can open the picture we want to measure

  • ctrl+r: you can open the ruler, right-click the ruler and change the unit inside to pixel

  • View - ruler: you can open the ruler, right-click the ruler, and change the unit inside to pixel

  • ctrl + plus sign: you can enlarge the view

  • ctrl + minus sign: zoom out

  • Press and hold the space bar: the mouse can become a small hand and drag the ps view

  • With the selection tool: you can measure the size

  • ctrl+ d: you can cancel the selection, or click in the blank space next to it to cancel the selection

17.1 PS cut

PS has many ways to cut images: layer cut images, slice cut images, PS plug-in cut images, etc.

  1. Layer cut

    The simplest way to cut a picture: right click the layer - > export PNG slice.

  2. Slice diagram

    1. Using slices to select pictures

      Manually mark out with slicing tool

    2. Export the selected picture

      File menu - > store as the format used by the web device - > select the image format we want - > store.

  3. PS plug-in cut

    Cutterman is a plug-in running in Photoshop, which can automatically output the layers you need to replace the traditional cumbersome process of manually "exporting the format used by the web" and using slicing tools to cut pictures one by one.

    Official website: http://www.cutterman.cn/zh/cutterman

antic

  1. Remove the bullet (DOT) in front of li

    list-style: none;
    
  2. In the navigation bar, instead of using link a directly, we use li to include link (li+a).

    1) li+a has clearer semantics. At first glance, it is an organized list content.

    2) If you directly use a, the search engine can easily identify it as suspected of stacking keywords (deliberately stacking keywords has the risk of being reduced by the search engine), thus affecting the website ranking.

  3. When using fixed positioning, if there is no content in the box, you need to specify the width

  4. Do not use the left and right edge offset attributes at the same time

  5. The start tag and end tag of the textarea tag in the text field are placed in one line when used, otherwise there will be an empty line when clicking the text field in the browser.

Tags: Web Development css3 html5 css

Posted by brandon on Wed, 04 May 2022 23:04:09 +0300