Development tools and key technologies: Visual Studio and Html, CSS, JS
Author: Huang Can
Write time: 2019.6.2-2019.6.8
Html Code / Label
Connection CSS
style (style): <link rel="stylesheet" href="css文件路劲">write the following in the title tag, head tag
Connecting
javascript: <script src="javascript文件路劲"></script>Usually at the end of writing in the body tag, the tag can be written in the title below, in the head tag
<div></div>Tag is used to package code, encapsulated code is written in the div, a block-level tag
<a href=”跳转路径（网址）”></a>Anchor tags, also known as a tag
<img src=”图片路径” alt=””/>Insert Picture (self-closing tags)
<label for=”XXX”></label>Table tags
<span></span> Inline tag
<ul></ul>Unordered list
<ol></ol>Ordered list
<li></li>Available in an ordered / unordered list
<b></b>Bold face
<u></u>Underline
<p></p>Segment (text)
<s></s>Strikethrough
<hr>Level
<l></l>italics
<em></em>italics
<small></small>Display small fonts
<big></big>Large font display
<tt></tt>Typewriter font
<strike></strike>Strikethrough
<sub></sub>Subscript characters
<sup></sup>Superscript characters
<blink></blink>Text blinking effect
<center></center>Aligned to the
<pre></pre>Display in accordance with the original style
Blank
<h1></h1>~~<h6></h6>Title Tag
<br>Wrap
placeholderText Box Tips
<textarea></textarea>Text fields
input label
<input,type="text">Text Box
<input,type="password">Password box
<input,type="submit">Submit button
<input,type="checkbox">Check box
<input,type="radio">Single box
<input,type="reset">Reset button
<input,type="image">Picture button
<input,type="hidden">Hidden Field
<input,type="button">Button
<input,type="file">Browse documents
Table tags
<table> Defines a table
<caption>Table header.
<th>Header table.
<tr>Defines a table row.
<td>Defines a table cell.
<thead>Defines a table header.
<tbody>Body definition table.
<tfoot>Defines a table footer.
<col>Define attribute table column.
<colgroup>Defines a table column group.
Css Code
width width
height height
margin Margin
padding padding
background background
position location
centent center, center
float float
top top
right on the right
bottom below
left left
border border
The solid line solid
dashed dotted line
color color
font font
size size
fixed fixed
display properties
length length
line-height line height
border-radius fillet
font-size font size
box-shadow shadow
z-index: 1; Level
transparent transparent
Infinite Unlimited
text-align: center; centered text
font-weigh Text Size
position: relative; relative positioning (self-centered)
position: absolute; absolute positioning
position: fixed; fixed positioning (usually in the upper left corner of the screen as the center)
text-decoration: none; cancel underscore
list-style: none; li removing dots
text-decoration: underline; Underline
overflow: hidden; hide excess
display: block; label changes within the block-level row label
font-weight: bold; font bold
display: inline-block; horizontal display block element
nth-of-type () Structure Selection
text-align: center; text horizontal center
maring: 0 auto; horizontal center
border-radius: 5px; border provided rounded corners
display: none; the element hiding
clear: left; Clear float
size-background:
Cover picture size adaptation
transform: translateX (,, px) to the X-axis moving
selecting a first first-child element
nth-child (n) to select the first n elements
font-family font change
float: left left floating
float: right floating right
Even rows (the even) the odd lines (odd)
outline: none; text box to select cancel effect
background-size: cover picture size adaptation
border-color: transparent transparent transparent # 65aac3;
production triangle
box-shadow: 2px 5px 10px #CCC set shadow
cursor: pointer; hover variant slap
cursor: not-allowed; hover change can not click
Clear float
.clear:after{
content: '';
display: block;
clear: both;
}
.clear{
zoom:1;
}/*游览器兼容性*/
CSS3 animation function
transition transition function
transform transfer function
animation animation function
transform: This attribute is used to set the deformation. This property supports one or more deformation function
rotate (angle): This function is used to set the rotation angle element
skew (): This function is used to effect a distorting element disposed
scale (sx, xy): This function is used to set a zoom effect element
translate (tx, ty): This function is used for the displacement of the setting element
transform-origin: origin element to change the position of the center position of the element is not the origin element
transition-property: Specifies the dynamic simulation of the transition or CSS properties
transition-duration: Specifies the time required to complete the transition
transition-timing-function: function specifies the transition
transition-delay: Specifies the delay time began to appear
matrix (m11, m12, m21, m22, dx, dy): This function is based on a transform matrix function foregoing four parameters transformation matrix composition, the latter dx, dy mainly refers to a localized coordinate axis amount of shift
transition: (all 0.5s ease); attribute
Time-Delay effect Transition: 0.06s;
(delay) 2D animation
Animation animation: move 1.8s;
@keyframes XXX {0% {} 15% {} ..........} functions keyframe
JavaScript（js）
window.οnlοad = function () {...} loading events occur
document.getElementByld ( "id corresponding to Html name") acquired by element ID
document.getElementsByClassName ( "clas corresponds Html name") by acquiring the elements calss
document.getElementsByTagName ( "tag name corresponds to"); by the element tag name Get
Method function function
Console.log (); console output
alert (); pop-up boxes
declare variables var
confirm (): pop-up query box
prompt (); input dialog
parentNode parent element
the parseInt (...) to convert the string to the corresponding integer
parseFloat () to convert the string to the corresponding float
document.write (); output to the page
Window.onmousewheel mouse wheel events
event.detail Firefox and other sightseeing obtains scroll value
Get the value of the roller moves event.wheelDelta
Window.onresize form changing the size of the event
XXX.οnclick = function () {} click event
XXX.innerHTML = ""
dynamically added element content
. Var XXX = XXX insertCell (); dynamic insertion cell
XXX.style.display = 'none';
provided element properties
Such as Firefox roller event listener's tour; window.addEventListener ( 'DOMMouseScroll', wheel, false)
event.preventDefault (); event.returnValue = false; stop tour is rolling strip rolling behavior
Function declaration: Function + + function name (parameter 1, parameter 2 ...) {...}
Timer setTimeout (go, interval); function name
\ B backspace character
\ F formfeed
\ N newline character
\ R carriage return character
\ T tab tab
\ 'Escape