Python WeChat Subscription Applet Course Video

https://edu.csdn.net/course/detail/36074

Python Actual Quantitative Transaction Finance System

https://edu.csdn.net/course/detail/35475

CSS Cascading Style Sheet

Three characteristics

Cascade: The same style overrides

Inheritance: Attributes can be inherited down

Priority: The smaller the range, the higher the weight

selector

basics

tag chooser

1 body {
2	 color:#fff;
3 }

Class selector

1 .people‐first {
2 	color:green;
3 }

id selector

1 #laowang {
	2 color:yello;
3 }

Wildcard Selector

* {
2	 margin: 0 ;
3	 padding: 0 ;
4 }

advanced selectors

Descendant Selectors

1 ul li {
2	 list‐style;none;
3 }

Child selectors

1 h3>a {
2 	line‐height:36px;
3 }

Union selector

1 div,
2 p {
3 	font‐size:14px;
4 }

Pseudo Class Selector

1 a::hover {
2 	background‐color:springgreen;
3 }
a::link
a::visited
a::hover
a::active
input::focus

Adjacent Sibling Selectors

h1 + p {
    margin-top:50px
}

font attribute

1 font‐style:italic;
2 font‐weight: 400 ;
3 font‐size:16px;
4 font‐family:"Microsoft Yahei";
5 font:italic 400 16px "Microsoft Yahei";

Download and Use of Font Icons

text attribute

1 color:pink;
2 text‐align:center;
3 text‐decoration:none;
4 text‐indent:2em;
5 line‐height:26px;

Block Element

E.g. h p div ul li

• Exclusive Line
• Wide and high margin control
• Width default inheritance
• Mainly as a container

Inline elements

Such as a strong b em

• A row can be multiple
• Width and height cannot be set
• Default width is its own width
• Very inline elements can only hold text or other inline elements

Note: Links cannot be placed in connection labels
Note: Block-level elements can be placed in links, but it is best to convert a to block-level element safety

Inline block element

Such as img input td

• Can be multiple in a row (with gaps)
• Width and height can be set
• Width is default
• Element Display Mode Conversion

1 display:block;
2 display:inline;
3 display:inline‐block;

BackgroundBackground

1 background‐color:transparent;
2 background‐img:url(./xx);
3 background‐repeat:repeat | no‐repeat | repeat‐x | repeat‐y;
4 background‐position:center center;
5 background‐attachment:scroll | fixed;
6 background:pink url(./) no‐repeat fixed center top;

1 background‐size:500px 200px;//cover equal-ratio full coverage, contain equal-ratio width-height coverage

Operation and Use of Wizard Maps

Box model

border or margin

1 border‐width:5px;
2 border‐style:solid; // Dashed dotted
3 border‐color:black;
4
5 border:5px solid black;

1 margin:0 auto;//Center the box horizontally
2 margin‐left:‐1px;//For removing adjacent borders

border-collapse

border-collapse: collapse;

border collapse Property sets whether the boundaries of the table are merged into a single border, or as if they were standard

Display separately as in HTML.

border-radius

1 border‐radius:10px;
2 border‐radius:1px 2px 3px 4px;//Start at top right corner
3 border‐top‐left‐radius:...;

Box Shadow

1 box‐shadow: 10px 10px 5px ‐5px rgba(0,0,0,.3);

2 Horizontal Shadow Vertical Shadow [Blur Dimension Color Outside or Inside]

Text Shadow

1 text‐shadow:10px 10px 5px rgba(0,0,0,.3);

float floating

1 float:left;

Floating characteristics:

• Deviate from Standard Flow
• One line, top aligned
• Features with inline blocks

Clear Float

1. Extra Labeling

1 <div>
2 <div>Box div>
3 <div class="clearfix">div>
4 div>

1 .clearfix {
2     clear: both;
3 }

2. Parent Add overflow

1 <div class="clearfix">
2 <div>Box div>
3 div>

1 .clearfix {
2     overflow:hidden;
3 }

3.: Afterpseudo element

1 <div class="clearfix">
2 <div>Box div>
3 div>

1 .clearfix::after {
2     content: "";
3     display: block;
4     height:  0 ;
5     clear: both;
6     visibility: hidden;
7 }
8
9 .clearfix {
10     *zoom:  1 ;
11 }

4. Double Pseudo Elements Float Clearly

1 <div class="clearfix">
2 <div>Box div>
3 div>

1 .clearfix:before,
2 .clearfix::after {
3     content: "";
4     display: table;
5 }
6
7 .clearfix::after {
8     clear: both;
9 }
10
11 .clearfix {
12     *zoom:  1 ;
13 }

Location

Static Positioning (Understanding)

1 position:static;

Relative positioning

1 position:relative;

Absolute positioning

1 position:absolute;

Fixed positioning

1 position:fixed;

Sticky Location (Understanding)

1 position:stycky;

Edge offset

top

bottom

left

right

priority

1 z‐index:2;

Element Show and Hide

display mode

1 display:block | inline | none ;
2 Block level inline none

Visibility

1 visibility:inherit | visible | hidden;
2 Inheritance Visible Hide

overflow part

1 overflow:visible | hidden | scroll | auto;
2 No cutting,Hide scrollbar auto without scrollbar

User Interface Styles

Mouse Style

1 cursor:default;

1 cursor:pointer;

1 cursor:move;

1 cursor:text;

1 cursor:not‐allowed;

form sheet

1 input {
2 	outline:none;
3 }

Text Field Style

1 textarea {
2 	resize:none;
3 }

align

1 vertical‐align:baseline | top | bottom | middle;
2 				  Baseline alignment Top line Bottom line Midline

White crevice at bottom after baseline alignment

Text Omission

Single line text overflow display ellipsis must satisfy three conditions

1 white‐space:nowrap;
2 overflow:hidden;
3 text‐overflow:ellipis;

New Features for CSS3

selector

attribute selectors

Select input with value

1 input[value]{}

Select input with value="text"

1 input[value="text"]{}

Select div at the beginning of icon

1 div[class^=icon]{}

Select div at end of data

1 div[class$=data]{}

Select div with iii

1 div[class*="iii"]{}

Structural pseudo class selector

1 :first‐child{}
2 :last‐child{}
3 :nth‐child(n){}//n can be even, odd odd even numbers for keywords 1, 2, 3

1 :first‐of‐type
2 :last‐of‐type
3 :nth‐of‐type(on)

Pseudo Element Selector

1 div::before{
2 content="";
3 }
4 div::after{
5 content="";
6 }

C3 box model

1 box‐sizing:conten‐box;//Traditional box model
2 box‐sizing:border‐box;//Borders don't take up size, they squeeze content

Filters

1 filter:blur(5px);//Make Boolean Blur

Other

1 width:calc(100%‐800px);

transition

1 transition:all 1s;//Selected attribute takes time when the motion curve starts

Transformation

1 transform:translate(100px,‐50px);//Pure Move, Keep Source
2 transform:rotate(45deg);//Rotate 45 degrees clockwise
3 transform:scale(2,2);//Double the length and width
4
5 transform:translate() rotate() scale();//Abbreviation

3D Conversion

1 transform‐style:flat | preserve;//Open 3D space (not by default)
2 prespective:500px;//Open Perspective Set Perspective Height
3
4 transform:translate3d(x,y,x);//3d Move

animation

1 animation‐name:Animation Name;
2 animation‐duration:3s;//Animation Time
3 animation‐timing‐function:ease;//Motion Curve
4 animation‐delay:5s;//Start after five seconds
5 animation‐iteration‐count:ifinite;//Infinite repetitions
6 animation‐direction:alternate;//reverse
7 animation‐fill‐mode:forwards;//keep
8
9 animation:Animation Name Animation Time [Whether the speed curve starts playing times and ends in reverse];

Standard viewport viewport settings

1 2         content="width=device‐width,

3 initial‐scale=1.0,
4 user‐scalable=no,
5 maximum‐scale=1.0,
6 minimum‐scale=1.0">

Streaming Layout (Percentage)

Width is percentage

flex layout

1 display:flex;

Set spindle direction

1 flex‐direction: row;
2 row‐reverse//Right to Left
3 column//top to bottom
4 column‐reverse//Bottom to Top

Set the arrangement of subelements of the main axis

1 justify‐content:flex‐start;// Left alignment (default)
2 flex‐end Right alignment
3 center Centered
4 space‐around Average distribution
5 space‐between Start with side-by-side margins and average score

Set whether child elements wrap

1 flex‐wrap:nowrap;//No line break (default)
2 wrap;//Line Break

Set the arrangement of child elements on the side axis (single line)

1 align‐items:flex‐start;// Left Alignment
2 flex‐end Right alignment
3 center Centered
4 stretch Stretch (default)

Set the arrangement of child elements on the side axis (multiple lines)

1 align‐content:flex‐start;// Left Alignment
2 flex‐end Right alignment
3 center Centered

4 space‐around Average distribution
5 space‐between Start with side-by-side margins and average score
6 stretch Stretch (default)

flex subattribute

1 flex:50%;
2 align‐self:flex‐start;How subitems are arranged on the side axis (Understanding)

rem Adaptation Layout

em parent font size

rem HTML font size

Media Query

1 @media screen and (min‐width:500px){ //If the screen is greater than or equal to 500px
2 html{
3 font‐size:14px;
4 }
5 }

less

1 @color1: skyblue;
2 @font14: 14px;
3 body{
4 background‐color:@color1;
5 font‐size:@font14;
6 a{
7 text‐decration:none;
8 &:hover{
9 background‐color:@color1;
10 font‐size:14px+16;
11 }
12 }
13 }
14 @import"common"//Multiple less s merge together to produce a css file

Responsive Layout

Bootstrap Framework