Start from scratch _javascript_ series (--css<2>) (new window open, background picture fill, bottom text, tips, CSS selector finishing)

Front Note: Pictures and part of the content quoted in the NetEase cloud classroom, so, invasion, private messages, delete.

This one was last week.

(10) Open a Web page as a new window

Will

<a href= "www.baidu.com" ></a>

New properties:

<a href= "www.baidu.com" target= "_blank"></a>

Can.

(11) About the inexplicable gap between the blocks

Suppose you have HTML code:

<div id= "a" >

<div id= "MM" >

Aa

</div>

</div>

<div id= "B" >

<div id= "MM" >

Bb

</div>

</div>

It has CSS properties:

#mm {

margin:20px;

}

Problem:

If you dye block A and B, you will find that there will be a certain gap between Block A and block B (Transparent).

Workaround:

① to the parent block A and B of MM, add a property:

padding:1px;

(cannot be 0). (The background color will automatically fill the void area)

② If you want to avoid gaps that occur in other directions, then only in the direction you want (for example, setting properties for Padding-top and Padding-buttom only)

(12) Background image (full fill)

HTML code:

<!--background picture--

<divid= "Layer1" >

</div>

CSS code:

#Layer1

{/* Because the background picture cannot be scaled, so set */

Position:absolute;

width:100%;

height:100%;

Z-index:-1;

opacity:0.7;

}

Can

(13) The input box has text when it is empty and disappears after entering the content.

<input id= "keyword" type= "text" placeholder= "filter" value= ""/>

Here's placeholder= "filter" is the bottom text

(14) When the mouse moves to the top, display the prompt

such as code:

<input id= "Baoji" type= "text" placeholder= "Please enter Number" style= "text-align:right;width:75px" title= " can enter decimal ">

Effect:

(HTML) Tag map

Note: This image is intercepted from NetEase Cloud class.

(16) Set text to center vertically

The easy way to do this is: in CSS properties, set

Line-height:xx px;

Where the XX, the value and the height of this div block is the same.

(17) Picker Finishing

Selector Selector	Method	Html	Example
Id	#id名	<p id= "a" >	#a {xxxx}
Class	. Class Name	<p class= "a" >	. a{xxx}
Wildcard characters	Wildcard name	<div>	DIV{XXXX} If it is *, all elements are represented
Property	Disabled	<input disabled> <xx type= "button>	[Disabled] {xxxx} [Type=button] {XXX}
Select all of the class= "a"	[Class~=class name]	<x class= "a B" > <x class= "a" > Two are selected at a time	[Class~=a] {XXX}
Select all the values of a property with PP	[Attribute |=pp]	<p lang= "pp" > <p lang= "BPP" > are to be selected.	[LANG|=PP] {XXX}

Ii

Select the href inside, there are # (2nd, 3), this symbol is in English state, SHIFT + 6

③

Select href inside, format is PDF (i.e. the second one)

④

Select all the tags (i.e. 1 and 2) with lady.163.com in the href.

④ Pseudo class Selector

A:link that all links are styled;

A:visited indicates the style of the visited link;

A:hover said, the mouse moved up after the style;

A:active that the user's mouse clicks up after the style

Where hover and active can also take effect on others.

If all four are used, write them sequentially.

⑤ Styles in different states

Enabled indicates the style when available;

Disabled indicates that the style is not available;

Checked indicates that the style is selected. (such as a radio box)

⑥ and List-related

LI:FIRST-CHILD{XXXX} represents the first style

Li:last-child{xxx} represents the last style

Li:nth-child (even) {XXX} represents the style of odd and even-numbered items, odd represents odd-numbered items. Note that if there are other <p> or <li> tags or other, although the label name is different, but still affect the order of the effect (such as an odd number of even).

Even can be modified, such as using 2n+2 (n starting from 0), representing the selection of 2, 4, 6 sub-elements.

You can also change to: Li:nth-last-child (2n+2) {XXX} for the 2nd, 4, 6, here are 5, 3, 1 items

⑦ only one child element is selected

HTML code such as:

Affects only AA

⑧ for a custom list, select the first <dd>


Dd:first-of-type{color:red}
The effect is Dave Shea that item turns red (but people post and postal publishing house does not change)
First-of-type represents the first element of this type (DD).
Can be changed to Last-of-type (last)
Nth-of-type (even) indicates an even number of
Nth-last-of-type (2n) the inverse of an even-numbered element
⑨ selected in the A-label range, only a B label for the B label


If the first line has 2 <span>, and the second line has only one <span>
If you are coloring the second line of CSS, use
SPAN:ONLY-OF-TYPE{XXXX}
⑩ not commonly used.
: Empty selects elements of the page that do not have child elements
: Root selects the Roots tab
: Not () does not contain elements of a selector, parameters are simple selectors
: Target selects the targeted element selected by the anchor.
: lang () language elements for certain special values
When a simple selector is combined, it represents the elements that all two criteria conform to.

Start from scratch _javascript_ series (--css<2>) (new window open, background picture fill, bottom text, tips, CSS selector finishing)