JS Learning Note 6

April on 27

1. List operations:
The commonly used forms of the list are picture forms and information forms, commonly used operations
: Show list, select list, add list, delete list, update list item


Example code:




Two. Page schema

1. Layout scheme:

CSS Reset: All HTML tags are rendered in the browser's default style when they are not set.
A CSS style reset is a default style that is removed from the browser and can be understood as a global style definition. For developers,
It can be inconvenient if you do not reset the style.

2. Layout solution:
Learn about attributes and their attributes in CSS, analyze problems and requirements to choose and design the right layout scheme.

2.1 Horizontal Center

Inline-block + text-align: Good compatibility

<div class= "Parent" >
<div class= "Child" >Demo</div>
</div>

<style>
. Child {
Display:inline-block;
}
. Parent {
Text-align:center;
}
</style>


2.2 Table + margin: Compatible with IE8, no parent element style required

<div class= "Parent" >
<div class= "Child" >Demo</div>
</div>

<style>
. Child {
display:table;
margin:0 Auto;
}
</style>

2.3 Absolute + Transform: Absolute positioning out of the document flow, without affecting the layout of subsequent elements,
CSS3 compatible

<div class= "Parent" >
<div class= "Child" >Demo</div>
</div>

<style>
. Parent {
position:relative;
}
. Child {
Position:absolute;
left:50%;
Transform:translatex (-50%);
}
</style>


2.4 Flex+justify-content: Just set the properties of the parent element, but there are compatibility issues

<div class= "Parent" >
<div class= "Child" >Demo</div>
</div>

<style>
. Parent {
Display:flex;
Justify-content:center;
}

/* or the following method, you can achieve the same effect */

. Parent {
Display:flex;
}
. Child {
margin:0 Auto;
}
</style>



2.5 Center vertically


2.5.1 table-cell+ VERTICAL-ALIGN:IE8 above

<div class= "Parent" >
<div class= "Child" >Demo</div>
</div>

<style>
. Parent {
Display:table-cell;
Vertical-align:middle;
}
</style>

2.5.2 Absolute + transform
Absolute positioning is out of the document flow and does not affect the layout of subsequent elements.
However, if an absolutely positioned element is a unique element, the parent element will also lose height.
<div class= "Parent" >
<div class= "Child" >Demo</div>
</div>

<style>
. Parent {
position:relative;
}
. Child {
Position:absolute;
top:50%;
Transform:translatey (-50%);
}
</style>


2.5.3 Flex+align-items:
Just set parent node properties without setting child elements, with compatibility issues
<div class= "Parent" >
<div class= "Child" >Demo</div>
</div>

<style>
. Parent {
Display:flex;
Align-items:center;
}
</style>




2.6 Horizontal and vertical centering

2.6.1 Inline-block + text-align + Table-cell + vertical-align
Good compatibility
<div class= "Parent" >
<div class= "Child" >Demo</div>
</div>

<style>
. Parent {
Text-align:center;
Display:table-cell;
Vertical-align:middle;
}
. Child {
Display:inline-block;
}
</style>


2.6.2 Absolute + transform

Absolute positioning is out of the document flow and does not affect the layout of subsequent elements.
<div class= "Parent" >
<div class= "Child" >Demo</div>
</div>

<style>
. Parent {
position:relative;
}
. Child {
Position:absolute;
left:50%;
top:50%;
Transform:translate (-50%,-50%);
}
</style>

2.6.3 Flex + justify-content + align-items
Just set the parent node property without setting child elements
have compatibility issues

<div class= "Parent" >
<div class= "Child" >Demo</div>
</div>

<style>
. Parent {
Display:flex;
Justify-content:center;
Align-items:center;
}
</style>


5.3 Multi-column layouts

1. A set of widths, a row of adaptive

1.1 Float + margin

<div class= "Parent" >
<div class= "Left" >
<p>left</p>
</div>

<div class= "Rigth" >
<p>right</p>
</div>

</div>

<style>
. left{
Float:left;
width:100px;
}

. rigth{
margin-left:100px;
}
</style>
To be compatible with ie6,.left join margin-left:-3px;

1.2 float+margin+ (fix)


<div class= "Parent" >
<div class= "Left" >
<p>left</p>
</div>

<div class= "Right-fix" >
<div class= "Right" >
<p>right!</p>
</div>
</div>
</div>

<style>
. left{
Float:left;
width:100px;
}

. right-fix{
Float:right;
width:100%;
Margin-left: -100px;
}

. right{
margin-left:100px;
}
</style>

Good compatibility


1.3 Float + Overflow

<style>
. left{
Float:left;
width:100%;
}

. right{
Overflow:hidden;
}
</style>

1.4 Table

<style>
. parent{
display:table;
width:100%;
table-layout:fixed;
}

. left{
Display:table-cell;
width:100px;
}

. right{
Display:table-cell;

}
</style>


2 2 column width, one row adaptive

<div class= "Parent" >
<div class= "Left" >
<p>left!!! </p>
</div>

<div class= "center" >
<p>center!! </p>
</div>

<div>
<p>Center!</p>
</div>

<div class= "Right" >
<p>right!! </p>
</div>

</div>


<style>
. left,.center{
Float:left;
width:100px;
margin-right:20px;
}

. right{
Overflow:hidden;
}
</style>




Responsive layout

<meta charset= "UTF-8" >
<title> Responsive Layouts </title>


<!--Media Enquiry--
@media screen and (max-width:320px) {
/* window width less than or equal to 320px */
}
@media screen and (min-width:320px) {
/* window width greater than or equal to 320px */
}
@media screen and (min-width:320px) and (max-width:1000px) {
/* window width greater than or equal to 320px and less than or equal to 1000px */
}


<meta name= "viewport" content= "Width=device-width,initial-scale=1.0,user-scalable=no" >


<body>


<!--page Optimization Tips-

<p>
Page optimization can increase the speed of the page to improve the user experience, optimize the page can better improve the effect of SEO and also can improve the readability and maintenance of the code.
You can optimize the page from several aspects:
Reduce the number of requests
Picture Merge
CSS file Merging
Reduce inline styles
Avoid using import in CSS
Reduce file size
Choose the right picture format
Image compression
CSS value abbreviation (shorthand property)
File compression
Page performance
Adjust file load Order
Reduce the number of labels
Adjust selector length
Use CSS to make display performance as much as possible
Enhanced code readability and maintainability
Standardization
The semantics of
Modular


1. Request reduction

The number of requests is directly related to the length of the page load. So for icons you can use sprites to reduce the number of requests for small icons,
For text, you can shrink by merging. (Avoid importing CSS files using import, and requests are synchronous requests)



2. reduce file size
Maximum traffic on the page is generated with multimedia (video or picture) so to reduce file size, developers need to use the appropriate media format and compress the files.


3. Page Performance

The page file is loaded from top to bottom, the style needs to be placed at the top, and the script is placed at the base (because JavaScript loading blocks the drawing of the page).
Reducing the number of labels can also play a role in improving performance, reducing the level of CSS selectors to improve performance.
Reduce the use of performance-consuming style attributes such as the following:
expression. class{width:expression (This.width > 100? ') 100px ': ' Auto ')}
Filter. Class{filter:alpha (OPACITY=50)}
Border-radius
Box-shadow
Gradients
The picture ruler used in the page should match the actual size or the performance will be degraded if the icon is to be redrawn after it is downloaded.
Interactions that can be implemented using styles (class names using CSS) do not use scripts (which require redrawing to cause multiple page renders).
Readability and maintainability
The specification needs to be clarified before development, especially when collaborating with people. Using the HTML5 semantic label to create the page also applies to the ID and class name of the style selector.
The suitability of artifice in the use of development needs to be pondered whether it needs to be used. Modular authoring of pages and styles to improve reusability and reduce file size.
Comment Comments, add comments in your code, and benefit people.
</p>


</body>

JS Learning Note 6