## css&html
1. Slice Export Export web format picture
2.tinypng.com (website of compressed pictures)
3. <img src = "Image / Picture name .jpg (picture address)" alt "image description"> (alt only loaded in the picture when a failure occurs) (alt conducive to the picture search)
4.overflow: hidden; (beyond hidden)
5.
<A href = "URL" target = "_ black">
Home
</a>
(Hyperlinks) (_ black page opens in a new window) (write full URL)
6.a {
text-Decoration: none;
}
(remove the hyperlink underline)
7.f12 (view the page source code)
8.nav_ul A {
color: # 333;
}
(hyperlink color to black)
9.nav_ul a: hover {
}
(when the mouse to change the background color of hyperlinks to the upper hyperlink)
10.ctrl + '+' to enlarge PS canvas
11.line-height: row height; (so that the vertical center line text)
12.block tags: block-level tag (dominate line; set width and height)
inline tags: tags restrained within the row labels (coexistence line; set width and height)
inline- block: the block row (row coexistence; easily set width and height)
the display: inline-block; (plate change properties easily change the width and height)
13.text-align = left: Center; (centered horizontally content)
14. English: Arial, Verdana
Chinese : Microsoft elegant black (Microsoft yahei), Times New Roman (Simsun), bold, Ping Fang
font-family: ....; (English font front, Chinese fonts, the Chinese font fight quotes)
font-size: 16px; (set the font size)
(font settings) safe fonts
15.transition (transition animation) (who changed who wrote the above)
Transition: All 0.5s; (transition animation time) (only for change in value: for example, wide HIGHER)
If the value is not changed, it is possible to use opacity = 0; opacity = 1; two were written in the tag to achieve change in value
add animation to a label:
(1) first add style to the label in the css file (
animation: animation name (taken lightly) animation time linear (the the uniform motion) figures (the number of executions animation, do not write the default is 1,
if instead of using infinite number, unlimited will perform the animation) alternate (the label is to backtrack after executing animation);
)
(2) again Add css file style:
@keyframes animation name (same as (1) the name of the animation) {
0% {
original location;
}
20% {
transition position;
}
............. .
100% {
ending animation position;
}
}
(. 3) animation-delay: time infinite (infinite motion) Alternate (back and forth); (written animation tag corresponding css file, represents the corresponding delay time at the beginning of the animation)
16 .span labels (make a small amount of text With the specified style)
17. Hidden label (still) display after hiding: none;
A UL-.nav: hover {
the display: none;
}
display label display: inline / block / inline- block;
18. One method of changing the label margin-top: -150px; (moved upward to apply a label 150 pixels)
margin-bottom: ....; (downward movement)
19. The scaling transform (modified)
provided: Write above that at which use the above hidden job exceeds
transform: scale (1,1); (in the horizontal direction, the vertical direction amplified double)
(1 can change the value to zoom in and out)
rotational transform: (rotateX) (180deg ); // rotate 180 degrees about the x-axis
transform: (rotateY) (180deg) ; // rotate 180 degrees about the y-axis
transform: (rotateZ) (180deg) ; // rotate 180 degrees about the z-axis
to change the rotation origin
tranform-origin: 0 480px; ( x axis, y axis)
perspective (near the far smaller)
perspective: 500px;
20.CSS3 filters (color change picture, internet search)
21. the common style reference to previous references the content
22. alt + right (fast selected layer)
23. see when you export pictures jpg and png size, choose small; if as large as the election png
24. the hidden beyond the content should overflow: hidden; written on the picture, not written on the hyperlink
25.p tags: indicates a paragraph (text is on a separate line, into pieces)
26. Location: position (To be controlled by the left and the top position of the label)
position: static; (static positioning) Default
Absolute; (absolute positioning) placeholder can not running around in the browser (to cover the other tabs)
Fixed; (fixedly positioned, in terms of the browser window corresponds to a fixed position in the browser by left, top )
relative; (relative positioning) of the tube tag absolute positioning, the label Sun
z-index: value; (all positioning tab having a z-index value, the default is 0. the larger, smaller label can cover, for invalid static position)
so that a close contact with the outer label page (right can be changed by changing the position of the label and the top value): z-index: value;
right: 50%;
top: 50%;
margin-right :-( tag page width + width);
. 27 "> symbol" linker only label
28. The transparent and translucent (change the transparency)
Opacity: ~ 0. 1; (better 0.8)
filter: Alpha (Opacity = 0 ~ 100); // old browsers (IE8 etc.)
29. transparent color
RGB (255, 0 0 ~ ~ ~ 255 255, 0);
RGBA (0 ~ 255, 0 255, 0 ~ ~ ~ 255, 0. 1);
can be used directly png image background image cut down can achieve
30.ul and li are block elements (without writing a lateral width can be covered)
31. icon style page
(1) img tag: the contents of the picture only use (not recommended)
(2) CSS background add decorative images, including icons (i tags: italic italic text)
font-style: italic; (italics)
(. 3) I tags: icon (which is a reserved inline tag)
(4) pseudo object, pseudo tags: (tags: tags before: After (plus at the forefront of a label before the label)
(to add a label to be visible before connet in which: "";))
functionally equivalent restrained tag
32. the single line of text exceeds Hide and ellipsis
indispensable
width: label the restriction width;
overflow: hidden;
White Space-: nowrap; (force not wrap)
text-overflow: E llipsis; (if the text overflows, appeared ellipsis)
33.h1 tag ( `<h1> News </ h1>`) (headlines tag)
34.border-bottom: 1px Dashed # 333; li tag presented below that the thickness of a black color 1px dashed line
35. Total page tag: a tag at several li tags div
div tag: text-align = left: Center;
a labels: the display: inline-Block;
36.Math.floor () (rounded down)
Math.ceil () take (up whole)
Math.round () (rounded)
# Js
priority class is higher than the tag
1. console output (console.info ();)
? 2.x> Y (console.info (X)) :( console.info (Y)); (maximum output ) (if x> y output value of x, otherwise the output value of y)
3. rounded down (Math.floor (25.4);) equal to 25
rounding up (Math.ceil (25.4);) equal to 26 is
4 NaN3 (Not a Number)
5. the function parameter
function parameter object comes with a built-in!
arguments "parameter"
number arguments.length arguments
arguments [0] for specific parameters
6.clink click event
7. four mantra (js)
Find a tag
1. Find (tag event where) yourself: onclick written inside the this
2 the event was a built-in function objects: event event object
target event.target event, where the event label (in the js file)
3. find a tag by the above mentioned id
the document document object, especially a page
corresponding tag in html using id = "mydiv" control up
var mydiv = document.getElementById ( "mydiv" ); (js files)
to acquire, change the label content
acquisition: xx.innerHTML tag of html content
div onclick = "this.innerHTML = 'he \' llo '" Hello / div (Click hello, hello then becomes hello)
Change: xx.innerHTML =' new content ';
. \ role: 1 remove special meaning: symbol \ '\'
Add special meaning: letters
to acquire, change the label property
acquisition: tag attributes.
change: label = new property attribute;
[custom attributes] write their own property
var y = xx.getAttribute ( "property name"); (acquired its property)
xx.setAttribute ( "attribute name", "property value");
change the label style (you must first find the label) (= FU then id.onmouseover)
(1) the label .style attribute = "attribute value"; (direct change) (for small changes)
xx.style.background = "# F00";
(2) (before the change to change the class name class style)
xx.className + = "the new class name";
(css file must be written in the style of the new class name)
(new spaces in front of the class name essential)
most classic approach does not change the original style :()
var classZz = / \ b new class name \ b /; (\ style similar name had previously b does not replace, \ b the new class name \ b are not independent words)
var cN = xx.className;
= cN.replace xx.classNam (classZz, "");
(regular: \ b word of the beginning and end)
8. Button tag (tag should form on the inside)
INPUT tag: `<input type =" button "value =" - ">` ( single label; "-" indicates a button content)
(Button into push button) (Submit to submit button: Submit data)
text box: `<input type =" text "value =" text box text ">`
<Input type = "text" value = "text on the text box" placeholder = "text prompts on a text box, for example: Enter password:">
Password box: `<input type =" password "value =" password ">`
9. The form elements
Form: form tag
1. accept user input [content]: Click a mouse, keyboard, voice ......
data will put in the form elements in
the data processing 2: daemon to be processed
<action = "background processing of address" form>
<the INPUT of the type = "the Button" value = "-">
</ from>
10.js in to convert a string to a numeric
parseInt (string) (converts string into an int) (found only integer) (int type found in non-stop reading data)
from the left of the string to start looking data
parseFloat (string) (the data string into float type) (available decimal)
Number the (string) (cast)
whether 11. Analyzing data NaN3
isNaN (NUM) is compared to true, as the error to false
12. the secondary menu :( premise: first menu level to do)
// make two labels cover other labels
secondary menu must have absolutely positioned
a menu must have a relative positioning
var li = id name .getElementsByTagName ( "li") ; (likely to find a number of variables li, the nature of the array)
(you can avoid a lot of id) id name below to find all of the specified tag
var li = id name .children; (to find a menu of all li)
li: Nth-Child (1) (at the first li li tag)
find a tag: qyerySelector function
13.var mytime = new date (); ( can be specified in () time points: minutes and seconds with the date when separated) (Get the moment of execution of the code) (current time) (month acquired computer Less a month: a computer from January 0-11)
(beyond the 11 month automatic New Year's Eve)
14. name = setInterval (start timer)
clearInterval (name) (abort timer)
15. Navigation through the column (a write-width min: ....;)
16.var NUM = Math.random (); (a randomly generated number 0-1)
17. prevented jump page click the hyperlink
<a href="javascript:void(0)">
</a>
18. A content right
text-align = left: right;
19. A acquires the index value
in the cycle: the name of the array [i] Name (themselves a) = i; // index value stored
console.info (this name.); // obtaining the index value
20. the numerical value acquiring a float
parseFloat (a.value)
21. a tag or attribute is determined whether there is:
iF (. tag name attribute name) {
}
22.var Student = {};
student.name = "" ;
Student [ "name"] = "";
23. A calling function must be written in parentheses after the name of the function
24. the array empty
array name = [];
## classic statement
common style:
* {
margin: 0;
padding: 0;
}
.clears {
Clear: both;
height: 0;
Line-height: 0;
font-size: 0;
overflow: hidden;
}
body {
font- Family: Arial, Verdana, "in the Microsoft YaHei", "the Simsun";
}
a {
text-Decoration: none;
Color: # 000;
}
img {
border: none;
/ * pictures on the hyperlink in some older browsers ( ie) have a blue border * /
}
UL, Li, OL {
List-style: none;
}
<meta name = "Keywords" content = "( separated by a comma)" />
<Meta name = "the Description" Content = "(a complete sentence.)" />
1./* Clear float * /
.clears {
Clear: both;
height: 0;
Line-height: 0;
font-size: 0;
overflow: hidden;
}
2.background: URL (../ Images / nav_bg.png ) REPEAT-X;
/ * make the background image by nav nav_bg.png lateral confluence * /
3.line-height: 82px; / * make the text vertically centered * /
4./* changed when the mouse on a hyperlink hyperlinks and background color * /
.nav_ul a: hover {
background: URL (../ Images / nav_hover_bg.png) REPEAT-X;
}
5. the
/ * ID = "NUM"; JS achieve subtraction * /
/ *
jia.onclick = function () {
var = Number num.innerHTML;
Number = Number The (Number) +. 1;
num.innerHTML = Number;
}
jian.onclick = function () {
var = Number num.innerHTML;
Number = Number (number) - 1;
= Number num.innerHTML;
}
* /
7. The regular expression:
regular expression written: var zz = / Rules /;
regular use of expressions:
var = ZZ / of He / I; (I ignore rule string represents capitalization) (i, then we should not case sensitive)
var = ZZ / of He / G; (G represents the global lookup)
var STR = "Hehe"; (quotes the content is to be detected)
Alert (zz.test (str)); (judged whether the rules meet the default is true, is not satisfied to false)
var zz = / abc * / i ; (* representative of at least 0 c, can have up to an infinite number C)
var ZZ = / ABC + / I; (+ representatives of at least 1 c, can have up to an infinite number C)
var zz = / abc / i; (c optional behalf, if there is only one c c?)?
var = ZZ / he | xyz / i; (| as long as he and the representative of one of the xyz)
var ZZ = / abc {2} / i ; ({2} have two consecutive c Representative together)
var = ZZ / ABC {2,} / I; (2 {,} must be representative of at least two successive c together)
var = ZZ / (abc) {2} / I; ({2} have two consecutive Representative together abc)
var = ZZ / abc {2,4} / I; ({2,4} together have at least two representatives c, c can have at most 4 together)
var = ZZ / [ABC] / I; ([ABC] must be representative of at least one a or a or a b c)
var = ZZ / [^ abc] / i; ([^ abc] Representative have at least one addition a, b, c letters)
var = ZZ / [AZ] / I; ([AZ] at least one must be a representative of the z letters)
var ZZ = / [^ AZ] / I; ([^ AZ] Representative have at least one addition to a letter than z)
var ZZ = / \ W (lowercase) / i; (\ w Representative letters, numbers, underscore)
var ZZ = / \ S (uppercase) / i; (\ S can not be representative of spaces)
var ZZ = / \ b ...... \ b / ; ( must be a single word, no other kind)
var zz = / ^ abc / i ; (^ abc abc as the representative To begin)
var = ZZ / abc $ / I; ($ abc abc behalf To ending)
8. A heart beat achieve animation
.red {
background: F00 #;
font-size: 30px;
Animation: 0.5s ANI Infinite;
}
@keyframes ANI {
0% {
Transform: Scale (1,1);
}
80% {
Transform: Scale (1.5, 1.5);
}
100 {%
Transform: Scale (1,1);
}
}
9. The termination of the function is
return false; (any value may be returned)