Html,css,js,jq

Css:

<style>

<!--Property Selector--

    . Container input[type= "text"][name= "TXT"]{
        BORDER:3PX solid red;
    }

<!--correlation Selector--

. C1 #l1 A. cc1{}      Spaces: Indicates the next level of a label, or next level ... To find one or a lot of labels.
</style>
<div class= "Container" >
    <input type= "checkbox"/>
    <input type= "Radio"/>
    <input type= "text" name= "txt"/>
    <input type= "File"/>
    <input type= "Submit"/>
    <input type= "button"/>
    <input type= "image"/>
</div>

the difference between margin and padding in CSS:

<!--in CSS margin refers to the distance from its own border to the border of another container, which is the outer distance of the container. In CSS, padding refers to the distance between the inner border of another container within itself and the inside of the container. -

<div style= "border:1px solid red;with:300px;height:300px" id= "D1" padding:20px>
    <div style= "border:1px solid yellow;margin:20px;with:200px;height:200px" id= "D2" ></div>
</div>

Note: D1 in the padding, when the padding changes, the change is D1 itself; D2 margin, when margin changes, the change is D2 itself

Position

    Fixed: Position in browser window
    Relative: Relative position
    Absolute: Generally used in conjunction with relative, absolute positioning relative to the parent (relative)

<div id= "Content" style= "Height:2000px;background-color: #ddd" >
    <div style= "background-color:beige;width:300px;position:relative;height:300px;margin:0 Auto" >
                <a style= "position:absolute;right:0;bottom:0" >absolute</a>
    </div>
</div>
<a style= "position:fixed;right:30px;bottom:30px;" href= "#content" > Back to Top </a>

margin:0 Auto is          centered relative to the parent label

Div: No Add " <div style= "Clear:both" ></div> "Background color red does not show

scroll bar style= "Overflow:auto" in Div; style= "Overflow:hidden" Hide scroll bar

<div style= "background-color:red" >
    <div style= "Float:left;" >111</div>
    <div style= "float:right;" >222</div>
    <div style= "Clear:both" ></div>
</div>

Display
None:          hide does not show
Block: Change to blocks level label
Inline: becomes inline label

body{
margin:0 Auto;
    the entire page is centered

Js:

var name = ' Eric ';           Local variables
name = ' Alex '; Global variables
Self-executing functions:

(function (ARG) {
    Alert (ARG);
}) ("888");

document.getElementById (' L1 ');

Document.getelementsbyname (' L1 ')

document.getElementsByTagName (' div ')

Window.onload = function () {
    
}//Page Load Complete

Document.ready = function () {
    
}//page Frame loading complete

Window.location.href = "Http://www.baidu.com"
Current Page Jump

window.open (' http://www.baidu.com ')
Open new tab page jump


JQ:
Extension methods:

$.extend ({
    "Erbi": function () {
        Return "SB";
    }
});

Responsive: When the page width is greater than 768px, the. CLS style takes effect

@media screen and (min-width:768px) {
    . cls{
        background-color:red;
    }
}

Fillet properties: border-radius:50%;

Pseudo-class and pseudo-elements

/* When the mouse moves to the a label, perform the following style */
. header. Menu a:hover{
     Background-color:green;
}
When you encounter a problem with layout, float:

. clearfix:after{
    Content: ".";
    Visibility:hidden;
    Display:block;
    height:0;
    Clear:both;
}

Html,css,js,jq