CSS basic content 2

CSSBasic Content2

Last time we saidCSSBasic Attributes,Introduction to Selector.This articleArticleContinue discussionCSSRelated content in.I usedCodeYesCSSContent.

Let's take a look at the writing of the pseudo selector..

Supported as selector in Some browsers,Some do not support.One reason is compatibility issues.,One is add on the head without adding:! Doctype

 

Requirement:

1.Black, no underline

2.Hover the mouse, Red, underlined

3.Activation status, yellow with no underline

4.After the access, it will be blue, underlined, and bold.

 

I,Pseudo Selector

Pseudo selector demo

The following is a question,

Requirements:

There are two hyperlinks on the page. The links above are still the style just now. The connections below are red by default. The mouse is black and the mouse is black. The mouse is blue and the mouse is yellow.

How can this problem be achieved?

2. Use different pseudo selectors on one page

Use different pseudo selector for demonstration on one page

Next let's take a lookCSSThree usage methods:

III,UseCSSThree methods

IV,Link to external style sheets

External style table Result demonstration

If we only want to useCSSPart of the style, I have to connect to the wholeCSSFile. Therefore, we can write multipleCSSFile, eachCSSThe file contains a relatively small amount of content. If you want to use one, you can use one. If you want to use more than one, you can combine them.

Next, let's take a look at the document stream:

For ease of demonstrationCSSAll are written in one page.

V,Stream Layout

We found a small problem. The elements we wrote are still a small distance from the border of the browser. Why is there such a small distance?

VI,Set the distance between the element and the browser border

Let's look at this question.

VII,RemovePSpacing Between labels

8,Absolute Positioning

Position:Absolute

IX,Z-Index

10,Fixed

FixedEffect demonstration

Position: relative;Relative positioning

XI. Relative positioning

Next we will create a rectangular advertisement in the lower right corner of the screen.

12. Ad effect code

Advertising effect

Next let's talk about it.Div + CSSLayout:

We recommend that you set it in the first place!DoctypeAdd. It is to tell the browser what specifications this document uses.

I used to write articles about the layout in the financial industry. It's interesting.

XIII,Div + CSSLayout

Below we provide some information, you can do it and see the following documents.

Author: QQ: 1329412715

 

 

Next let's take a look.CSSTo raise the priority:

14. Set the highest priority

@ Import url(xx.css );

InCSS, Add to otherCSSFile reference.

15th,Import url(xx.css)

Next, let's talk about:Box Model.

16. Box Model

17. Box Model Demonstration

Let me talk about it.Framework:

Not many frameworks are used, but sometimes they are used.

Where the framework is used, the Forum. Display two or more parts on a page.

We write a framework that contains various search engines.

18. Basic Framework form

19. What should we do if the framework is like this?

20. Specific division

The drag-and-drop function in a specific framework can be set as follows:MsdnHow to find. ToFramesetFor example.

21. Self-learning search methods

Next, let's take a look at how to link to another page:

22. Click Next to jump to another page

Click Next to jump to another page

23. displayed in a large window

Displayed in a large window

IFRAMEIt is also a nested framework..

Embed a page somewhere on a normal page. For example, we often see advertisements.

24,IFRAME

IFRAMEDemo

List of recent articles by the author:

C # basic tutorial (free of charge, the best gift for code lovers. Note: The authors share their carefully organized basic C # tutorials without any commercial purposes. I hope to share my experiences with more code lovers. Please give me more advice !!!)
Layer 3	Layer 3 (1)
SQL database ado.net	Database Application diagram 1
	Database Application details 2
Process-oriented, object-oriented, and advanced	Process-oriented, object-oriented in-depth understanding 1
	Process-oriented, object-oriented in-depth understanding 2
	Object-oriented deep understanding 3
Winform Basics	Winform Basics
	Commonly used controls in winform
Process-oriented	Comparison of three cycles
	Method (I) in C)
	Our common Array
Object-oriented	Thought Change
	C # super-class and easy-to-use classes
	The use of destructor and namespaces in C #
	C # super-class and easy-to-use strings
	How to quickly process strings in C #
	Value Type, reference type, and others
	Arraylist and hashtable
	Arraylist and hashtable
	File Management
	Polymorphism
	Section on other issues in C #
GDI +	The GDI + code I have collected over the years
	The GDI + Code 2 I collected over the years
HTML overview and CSS	HTML language that you cannot ignore
	You can't ignore HTML 2.
	HTML language 3 that you cannot ignore
	CSS basic content-special contribution to the Mid-Autumn Festival
JavaScript basics	JavaScript basics 1