CSS examples


CSS Example

CSS Background

Set the background color of the page

Set the background color of different elements

Set an image as the background of the page

Wrong background image

How to repeat the background image in the horizontal direction

How to position the background image

A fixed background image (this image will not scrolls with the rest of the page)

Set all background properties in one statement

Advanced background example


Explanation of background properties

CSS text

Set the text color of different elements

Text alignment

Remove link underline

Decorate text

Control letters in text

Indent text

Specifies the amount of space between characters Space

Specifies the space between lines

Set the text direction of the element

Increase space between words

Disable text wrapping within an element

Vertical alignment of images within text


Explanation of the Text property

CSS font

Set the text font

Set the font size

Set the font size using px

Set the font size using em

Set font size using percentage and em

Set font style

Set font transformation

Set the font weight

Set all font properties in one statement


Explanation of Font attribute

CSS link

is a visited/unvisited link Add different colors

Use text decoration on links

Specify the background color of the link

Add other styles for hyperlinks

Advanced-Create link box


Link attribute Explain

CSS List

All the different list item tags in a list

Setting an image as a list item tag

Setting an image as a list item tag using a cross-browser solution

Set all lists in one statement Attribute

css Remove list item li Default style


Explanation of list attributes

CSS table

Specifies the th, td element of a table , add a black border

Use border-collapse

Specify the width and height of the table

Set the content Horizontal alignment (text alignment)

Set the vertical alignment of the content (vertical alignment)

Specify the padding of TH and TD elements

Specify the color of the table border

Set the position of the table title

Create a peculiar table


Explanation of table attributes

CSS Box Model

Specify the total width of the element to be 250 pixels

Use the Crossbrowser solution to specify the total width of the element to be 250 pixels


Explanation of the box model

CSS border

Setting four The width of each border

Set the width of the upper border

Set the width of the bottom border

Set the width of the left border

Set the width of the right border


Set the styles of the four borders

Set the style of the upper border

Set the style of the lower border

Set the left border Style

Set the style of the right border


Set the color of the four borders

Set the color of the upper border

Set the color of the lower border

Set the color of the left border

Set the color of the right border


All borders in one statement Properties


Set different borders on each side

All top borders in one statement Property

All under one statement Border properties

All left border properties in one declaration

All right border properties in one declaration


Explanation of border properties

CSS outline

Draw a line around an element (outline)

Set the style of the outline

Set the outline color

Set the width of the outline


##Explanation of outline attributes

CSS margin

Specify the margin of an element

Margin abbreviation attribute

The value set for the top margin of the text is in centimeters

Use The percentage value sets the bottom edge of the text

The centimeter value sets the left margin of the text


Explanation of the Margin property

CSS padding

Set the left padding of the element

Set the right part of the element Padding

Set the top padding of an element

Set the bottom padding of an element

All padding properties in one declaration


Explanation of the padding attribute

CSS grouping and nesting

Group selector

Nested selector


Grouping and Nesting Explained

CSS Dimensions

Set the size of an image using pixel values Height

Use percentage to set the height of the image

Use pixel value to set the width of the element

Use percentage to set the width of the element

Set the maximum of the element Height

Use pixel value to set the maximum width of the element

Use percentage to set the maximum width of the element

Set the minimum height of the element

Use pixel value to Set the minimum width of an element

Use percentages to set the minimum width of an element


Explanation of the size attribute

CSS display

How to hide an element (visibility:hidden)

How not to display an element (display:none)

How to display the content of an element Linked elements

How to display block elements of an element

HHow to use the collapse attribute of a table


##Display Explanation of properties

CSS positioning

The position of the element relative to the browser window

The relative positioning of the element

The absolute positioning of the element

Overlapping elements

Set the shape of the element

How to use scroll bars to display overflow content within the element

How to set up the browser's automatic overflow processing

Use pixel values ​​to set the top of the image

Use pixel values ​​to set the bottom of the image

Use pixel values ​​to set the left side of the image

Use pixel values ​​to set the bottom of the image Right

Change the cursor


Explanation of positioning properties

CSS Float

Simply use the float attribute

Add borders and margins to the image and float it to the left of the paragraph

The title and image float to the right

Let the paragraph The first letter floats to the left

Use the float property to create a picture gallery

Turn on the float - clear property

Create a horizontal menu

Create A webpage without tables


Explanation of Float attribute

CSS alignment element

Use the middle adjustment of margin

Left/right position alignment

Use Crossbrowser solution, set left/right position alignment

Left/right alignment, float

Use Crossbrowser solution, set left/right position alignment, float


Alignment attribute explanation

CSS generated content

Use the URL in brackets The content attribute is inserted after each link

The chapter and subsection numbers are "Section 1", "1.1", "1.2", etc.

quotes attribute specifies quotation marks

CSS pseudo-class

Add different colors of hyperlinks

Add other styles to hyperlinks

Use: focus

:first-child - match The first p element

:first-child - Matches the I element in the first p element

:first-child - Matches all I elements in the first p element Element

Use: lang


##Explanation of pseudo-class

CSS pseudo-element

Set the first letter of the text to a special letter

Set the first line of text to a special letter

Set the first letter of the first line of text to Special

Usage: insert some content before an element

Use: insert some content after an element


Explanation of pseudo-elements

CSS navigation bar

Full style of vertical navigation bar

Full style of horizontal navigation bar


Explanation of navigation bar

CSS Image Gallery

Image Gallery


Image Gallery Explained

CSS Image Opacity

Creating Transparent Images - Mouseover Effect

Create a background image with a transparent box for text


Image opacity explained

CSSimage stitching

Image stitching

Image stitching-navigation list

Hover effect and image stitching


Image stitching explanation

CSS attribute selector

Select elements with title attributes

Select title = one Elements with a specific value

Select title = an element with a specific value (use (~) to separate attributes and values)

Select title = an element with a specific value (use (|) to separate attributes and values) Value)

Attribute Selector Explanation

CSS Attribute Selector

  • CSS Loading Progress Bar

  • CSS paging style

  • CSS progress bar

  • CSS prompt information example

  • CSS text overlay image hover effect

  • CSS text overlay image hover effect - from top to bottom

  • CSS text overlay image hover effect – from bottom to top

  • CSS text overlay image hover effect – from right to left

  • CSS text Overlay Image Hover Effect – Left to Right

  • CSS Text Overlay Image Hover Effect – Fade to Transparent

  • CSS Vertical Button Group

  • CSS button group

  • CSS Loading animation effect

  • CSS Loading animation Effect 2

  • CSS Loading(Loading) Animation Effect 3

  • CSS Loading(Loading) Animation Effect 4

  • CSS Dynamic Search Box

  • CSS User Information Card

  • CSS Card Style

  • CSS previous page, next page styles

  • CSS various prompt information boxes

  • CSS three price list styles

  • CSS switch style

  • CSS makes the DIV appear horizontally centered

  • CSS four direction arrows up, down, left and right

  • CSS feedback information form

  • CSS font-awesome icon menu bar

  • CSS top navigation style example

  • CSS sticky note style effect

  • CSS horizontal scrolling menu

  • CSS vertical menu

  • CSS vertical scrolling menu

  • CSS fixed menu bar

  • CSS responsive login form

  • CSS fixed bottom menu bar

  • CSS drop-down menu

  • CSS alignment of drop-down content

  • CSS navigation bar drop-down menu

  • CSS navigation bar with search box

  • CSS navigation bar with search box- With submit button

  • CSS with search navigation bar-With mention search icon

  • CSS Fixed left navigation bar

  • CSS fixed left navigation bar – highly adaptive

  • HTML/CSS/JS Contact us form template (with Baidu map)

  • CSS Design a web page

←