css Basic knowledge

Let's start with a small example :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="background-color:#2459a2;height: 48px;">1</div>
<div style="background-color:red;">2</div>
<div style="background-color:green;">3</div>
</body>
</html>

We can see that we are div Medium plus style, There are background-color,height Equal attribute , In this way, the original nothing div Added background color, height, etc .

css Compiling

  • Set... On the label style attribute :width,height,background.......
  • Written in head Inside , Write a <style> Write style in the label :
<head>
<style>
#i1{
background-color:red;
height:48px
}
</style>
</head>
  • Create a single .css File format , stay .css Write style in file , stay html In the document head The tag introduces the .css file :
<link rel="stylesheet" href="common.css" />

css The comments in :/**/

Selector use css

1. tag chooser :

div{background-color:red; } 
<div > </div>

2.class Selectors :

.bd{background-color:red; } 
<div class='bd'> </div>

3.id Selectors :

#idselect{background-color:red; } 
<div id='idselect' > </div>

4. Association selector ( Space )

#idselect p{background-color:red; } 
<div id='idselect' > <p> </p> </div>

5. Combination selector :( comma )

input,div,p{ background-color:red; }

6. Attribute selector :

input[type='text']{ width:100px; height:200px; }

css Priority in

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: red;
color: white;
}
.c2{
font-size: 58px;
#color:black;
} </style>
</head>
<body>
<div class="c1 c2">asdfas</div>
</body>
</html>

We set up a div There are two class name , And then I set up a color:white, The effect is as follows :

And now we have .c2 Of css Zhongba color:black Remove comments from , The effect is as follows :

We will in <div> Add... To the tag :style="color:blue", So the effect of the display is as follows :

This involves css The priority of the style :( Nearby principle )

style--->c2----c1( here c2,c1 My priority is to look at css Whose style is written below , If above head Labeled style The two positions in the label are interchanged , So that is c1 Is greater than c2)

frequently-used css Style in

1. Frame

Default 4 Add... To all sides :

 border:1px solid/dotted red (1 Pixels , Solid line / Dotted line , Red ):

Just add left and right :

border-left-right:1px solid/dotted red

2.height,width,line-height,color,font-size,font-weight:

height,width: Height , Width

height:48px;width:200px     or     height:48px;width:80%( You can use specific values or percentages )

text-align:center, Center horizontally

line-height Row height :

If we want to center the text vertically, we can use this property ( Row height pixels ==height Pixels ), namely height:48px,line-height:48px, The font is centered .

font-size font size :font-size:12px;

font-weight The style of the font :100-900,bold( In bold ),bolder( More thick ),inherit,initial,lighter,normal,unset

color The font color ;

3.float attribute : float

If we write 2 individual div, What about this 2 individual div It's going to be one line each , If we want a div On the left 20%, One div On the right 80%, I want two div Join up in a row , It needs to be used float

First of all, we don't have to float The effect of :

<div style="background-color: red;width:20%;">div1</div>
<div style="background-color: green;width:80%">div2</div>

If we let these two div All float to the left :

<div style="background-color: red;width:20%;float:left;">div1</div>
<div style="background-color: green;width:80%;float:left">div2</div>

The two coincide , And a station 20%, One takes up 80%

If I change to div1 Occupy 20% Float to the left ,div2 Occupy 60% Float right : Then there will be space in the middle 20%

<div style="background-color: red;width:20%;float:left;">div1</div>
<div style="background-color: green;width:60%;float:right">div2</div>

Now let's write a box , There's some in there div:

<div style="width: 300px; border: 1px solid red;">
<div style="width:96px;height:30px;border:1px solid green;float:left"></div>
<div style="width:96px;height:30px;border:1px solid green;float:left"></div>
<div style="width:96px;height:30px;border:1px solid green;float:left"></div>
<div style="width:96px;height:30px;border:1px solid green;float:left"></div>
<div style="width:96px;height:30px;border:1px solid green;float:left"></div>
<div style="width:96px;height:30px;border:1px solid green;float:left"></div>
<div style="width:96px;height:30px;border:1px solid green;float:left"></div>
</div>

We can see that it works float We can do a lot of similar front-end page one by one style , Our outermost div The height of the wall is smaller with the inside div More and more .

But there's a problem , We can see a red line on it , He's the outer layer div Border , Why father div I don't have my border , There's only one ? This is the use of float And then there's the problem .

resolvent :

In the father div Add this paragraph to the end of :<div style="clear:both;"></div>

such , Father div The border of the window is shown

4.display

First of all, let's look at a paragraph :

<div style="background-color: red;">div1</div>
<span style="background-color: green;">span1</span>

Now we want to turn the block level label into an in-line label :display:inline

<div style="background-color: red;display:inline;">div1</div>
<span style="background-color: green;">span1</span>

We want to make span This in-line label becomes a block level label :display:block;

********

In line labels : Unable to set height , Width ,padding,margin

Block level label : You can set the height , Width ,padding,margin

<span style="background-color: red;width:200px;height:48px;">span1</span>
<a style="background-color: red;">chaolianjei</a>

We can see that it doesn't work at all

display:inline-block;

have inline, Default to how much you have ;

have block, You can set the height , Width ,padding,margin

<span style="background-color: red;width:200px;height:48px;display: inline-block;">span1</span>
<a style="background-color: red;">chaolianjei</a>

added display:inline-block; after ,span You can set the width and height :

display:none; Make the label disappear :

5.padding margin(0 auto) padding , Margin :

margin:

margin:0 auto; Up and down for 0, Centered around

6.position:

  • fixed----> Fixed somewhere on the page , Scroll wheel , The position won't change either
  • absolute----> Absolute positioning , Just use it , When the wheel rolls , The position will change , Want to be with relative Use it together
  • relative

fixed:

Let's look at a bunch of code first :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 50px;height:50px;background-color: black;color:white"> Return to the top </div>
<div style="height: 5000px;background-color: #dddddd"></div>
</body>
</html>

Now what we want is “ Return to the top ” This div Fixed in the lower right corner of the browser

<div style="width: 50px;height:50px;background-color: black;color:white;
position:fixed;bottom:20px;right:20px;"
> Return to the top </div>

I am here style Added in

position:fixed;bottom:20px;right:20px;

So we put that div It's fixed in the lower right corner .

Let's do another example : Some websites , Its menu bar is always on top of the browser , Even scroll bars scroll , The menu bar in the head doesn't change either , How should we do this :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height:48px;
background-color: black;
color: #dddddd;
position:fixed;
top:0;
right:0;
left: 0;
}
.pg-body{
background-color: #dddddd;
height:5000px;
margin-top:50px ;
}
</style>
</head>
<body>
<div class="pg-header"> Head </div>
<div class="pg-body"> Content </div>
</body>
</html>

In fact, you just need to add the color code on it , Below margin-top It's to make pg-body You can go down a little bit , Show the whole thing

relative+absolute:

I have now 3 individual div:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="position: relative;height:200px;width:400px;border: 1px solid red;margin:0 auto;text-align: center;">div1</div>
<div style="position: relative;height:200px;width:400px;border: 1px solid red;margin:0 auto;text-align: center;">div2</div>
<div style="position: relative;height:200px;width:400px;border: 1px solid red;margin:0 auto;text-align: center;">div3</div>
</body>
</html>

I want to div1 Put a small black box in the lower left corner of the box , div2 Put a small black box in the lower right corner of the ,div3 Put a small black box in the upper left corner of the , What to do :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="position: relative;height:200px;width:400px;border: 1px solid red;margin:0 auto;text-align: center;">
div1
<div style="width:50px;height:50px;background-color: black;position:absolute;left:0;bottom:0"></div>
</div>
<div style="position: relative;height:200px;width:400px;border: 1px solid red;margin:0 auto;text-align: center;">
div2
<div style="width:50px;height:50px;background-color: black;position:absolute;right:0;bottom:0"></div>
</div>
<div style="position: relative;height:200px;width:400px;border: 1px solid red;margin:0 auto;text-align: center;">
div3
<div style="width:50px;height:50px;background-color: black;position:absolute;left:0;top:0"></div>
</div>
</body>
</html>

as long as relative and absolute Match , Then set the top,left,right,bottom The value of , This value can be positive or negative

There's another scene : Let's click a button , Then a small window will pop out , At this time, there is no way to operate things outside the window , Such as : I click on the big modal box , And then I jumped out large model, But there is no way to operate in the gray area

This is a typical three-tier model : The text itself is a layer of , The gray mask is a layer of , The pop-up box is a layer of . So how do we do that ?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width:400px;height:100px;background-color: white;
position: fixed;top:50%;left: 50%;
margin-top: -50px;margin-left:-200px;
z-index:10;"></div>
<div style="position: fixed;background-color: black;top:0;bottom:0;right:0;left: 0; opacity: 0.6;z-index: 9;"></div> <div style="height:5000px;background-color: green;"></div>
</body>
</html>

The effect is shown in the figure : There is a green Of div, And then there's a black Of div, It's just transparency , There's a middle white on the top div

analysis : First, let's talk about two new attributes :

opcity:0.6; Set transparency , The value is 0-1

z-index:9, set priority , The higher the value, the higher the priority

Let's start with two div, One is green , One is black . This is very simple . We'll add a third layer below . The key is the above two attributes , If the transparency property doesn't exist , When it comes to two layers , The black will completely cover the green , If there is no priority attribute , So we're doing the third div You don't know who's covering who .

Here we also record the centering method :

position: fixed;top:50%;left: 50%;
margin-top: -50px;margin-left:-200px;

Set up 50%, And then use margin Return to half the width and height , This will allow a div centered

7.overflow

We set up one div Width and height , Now I want to be in this div Put a picture in , That picture has its own height and width . If it is distributed directly, it will exceed div The scope of the display , What shall we do then ?

stay style Add overflow attribute :

  • hidden: The part beyond is hidden
  • auto: The excess will be given to the scroll bar

8.hover

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
position: fixed;
top:0;
right:0;
left:0;
height:48px;
background-color: #2459a2;
line-height:48px;
}
.pg-body{
margin-top:50px;
}
.w{
width:980px;
margin:0 auto;
}
.pg-header .menu{
display: inline-block;
padding:0 10px;
color:white;
}
/* When the mouse moves to the current label , following css Property will take effect */
.pg-header .menu:hover{ background-color: blue;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="w">
<a class="logo">logo</a>
<a class="menu"> All </a>
<a class="menu">42 District </a>
<a class="menu"> Duan Zi </a>
<a class="menu">1024</a>
</div>
</div>
<div class="pg-body">
<div class="w"></div>
</div>
</body>
</html>

hover When the mouse moves to the hyperlink , Would be right. hover Of css The attributes in are in effect

9.background

background-image:url('image/4.jpg'): The background is a picture , If this div Bigger than the size of the picture , The picture will be repeated all the time

Application scenarios : Gradient background , We just need a very narrow picture , You can use this property , Let the whole background be this gradient image

background-repeat:no-repeat/repeat-x/repeat-y: Change the property to set whether the picture should be repeated , Horizontal or vertical repetition

background-position:10px 10px Select a position on a graph to display

Application scenarios : Websites sometimes use a map to store a lot of icons , You can choose which coordinate to use

The page layout

One 、 Main station layout :

<div class="pg-header">
<div style="width:980px;margin:0 auto;">
Content automatically centers
</div> </div>
<div class="pg-content"></div>
<div class="pg-footer"></div>

Two 、 Background management layout

It's all three parts , Head , Middle content , And the tail :

Let's look at the changes in the middle first :

One is that the menu and content of the middle content are not changed , Scroll bar appears when there is more content on the right

We use it position:fixed How to do it :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0 auto;
}
.left{
float:left; }
.right{
float:right;
}
.pg-header{
height:48px;
background-color: #2459a2;
color:white;
}
.pg-content .menu{
position: fixed;
top:48px;
left:0;
bottom:0;
width:200px;
background-color: #dddddd; }
.pg-content .content{
position: fixed;
top:48px;
bottom: 0;
left:200px;
right:0;
background-color:purple;
overflow: auto;
}
</style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-content">
<div class="menu left">a</div>
<div class="content left">
<p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p>
<p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p>
<p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p>
<p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p>
<p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p>
<p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p>
</div>
</div>
<div class="pg-footer"></div>
</body>
</html>

We use position:fixed The menu bar and content bar are fixed , And then when there's too much content, we can use overflow:auto Add a scroll bar , So the layout is realized

Another category is the intermediate content. If there are too many , Let's make the menu on the left follow the scroll bar :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0 auto;
}
.left{
float:left; }
.right{
float:right;
}
.pg-header{
height:48px;
background-color: #2459a2;
color:white;
}
.pg-content .menu{
position: absolute;
top:48px;
left:0;
bottom:0;
width:200px;
background-color: #dddddd; }
.pg-content .content{
position: absolute;
top:48px;
bottom: 0;
left:200px;
right:0;
min-width: 980px;
/*background-color:purple;*/
/*overflow: auto;*/
}
</style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-content">
<div class="menu left">a</div>
<div class="content left">
<div style="background-color: purple">
<p style="margin: 0;">afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p>
<p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p>
<p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p>
<p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p>
<p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p>
<p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p>
</div> </div>
</div>
<div class="pg-footer"></div>
</body>
</html>

The difference from the first category is , We're going to use position:absolute Positioning :

postion:absolute This attribute , The initial positioning can be done at the beginning of the page generation , But as you scroll through the scrollbars , The positioning will change , Scroll with the scroll bar , So we can use this feature to operate .

If you want the background to follow , You can use a div Wrap the content in , And then here div There is a background-color, So the background color can be added along with the content .

If we want to use absolute To achieve the first kind of situation , We just need to add on the basis of the second category overflow:auto, You can go back to the first situation , Very convenient .

Of course, let's consider a situation , If our browser keeps shrinking , We also need to make sure that our content is displayed normally , This time you need to scroll right and left , We can set up the content div Minimum width of min-width:980px, When the width is less than this, the scroll bar appears , Just ok 了

Let's look at the head changes :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="fontawesome-free-5.0.8/web-fonts-with-css/css/fontawesome-all.min.css">
<style>
body{
margin:0 auto;
}
.left{
float:left; }
.right{
float:right;
}
.pg-header{
height:48px;
background-color: #2459a2;
color:white;
line-height: 48px;
}
.pg-header .logo{
width:200px;
background-color: cadetblue;
text-align: center;
}
.pg-header .user{
height:48px;
position: relative;
margin-right:60px;
padding:0 20px; }
.pg-header .user:hover{
background-color: #204982;
}
.pg-header .user .a img{
height:40px;
width:40px;
margin-top: 4px;
border-radius:50%;
}
.pg-header .user .menu2{
position:absolute;
top:48px;
right:-10px;
background-color: white;
width:100px;
z-index:10;
display: none;
color:black;
text-align:center;
}
.pg-header .user .menu2 a{
display: block;
border-bottom: 1px solid black;
text-decoration:none;/* Remove the underline of hyperlinks */ }
.pg-header .user:hover .menu2{
display:block;
}
/* Links not visited */
.pg-header .user .menu2 a:link{
color:black;
}
.pg-header .user .menu2 a:hover{
background-color: #dddddd;
}
.pg-header .icons{
padding:0 20px;
}
.pg-header .icons:hover{
background-color: #204982;
}
.pg-content .menu{
position: absolute;
top:48px;
left:0;
bottom:0;
width:200px;
background-color: #dddddd; }
.pg-content .content{
position: absolute;
top:48px;
bottom: 0;
left:200px;
right:0;
min-width: 980px;
/*background-color:purple;*/
overflow: auto;
z-index:9;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="logo left">logo Icon </div> <div class="user right">
<a class="a" href="#">
<img src="1.jpg">
</a>
<div class="menu2">
<a href="#"> My information </a>
<a href="#"> Cancellation </a>
</div>
</div>
<div class="icons right">
<i class="far fa-envelope"></i>
<span>5</span>
</div>
<div class="icons right">
<i class="far fa-bell"></i>
<span>3</span>
</div>
</div>
<div class="pg-content">
<div class="menu left">a</div>
<div class="content left">
<div style="background-color: purple">
<p style="margin: 0;">afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p>
<p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p>
<p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p>
<p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p>
<p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p>
<p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p><p>afasdf</p>
</div> </div>
</div>
<div class="pg-footer"></div>
</body>
</html>

The effect picture shown is the following effect :

What you need to know :

About hyperlinks :

a:link {color: #FF0000} /* Links not visited */
a:visited {color: #00FF00} /* Links visited */
a:hover {color: #FF00FF} /* Mouse over link */
a:active {color: #0000FF} /* Selected links */
text-decoration:none;/* Remove the underline of hyperlinks */

About borders :

border-radius:50%;/* Turn the border into an ellipse */

About the appearance and disappearance of the menu bar , no need js How to do it :

.pg-header .user .menu2{
display: none;
}
.pg-header .user:hover .menu2{
display:block;
}/* This can be achieved , When the mouse is on the avatar, the menu bar appears automatically , The menu bar is hidden automatically when the mouse moves away */

About the menu bar icon :

To https://fontawesome.com/icons Download the icon pack , Then import css file , And look for related pictures on the website html, You can show :

<link rel="stylesheet" href="fontawesome-free-5.0.8/web-fonts-with-css/css/fontawesome-all.min.css">/* Import css file */
<i class="far fa-envelope"></i>/* Apply the icon to html*/
<i class="far fa-bell"></i>

The front-end study ---css More articles on basic knowledge

  1. The front-end study ——css Basic knowledge of , Selector and html Templates 、 Worthy of collection html label

    One .css Needed html( use html5 standard ) DTD, Document type declaration : <!Doctype html> Text encoding statement : <meta charset="utf-8" ...

  2. vue— You have to know js data type The front-end study CSS In the middle Event delegation and this Give Way js Debugging is easier —console AMD &amp;&amp; CMD Pattern recognition course notes ( One ) web attack web Safety XSS JSONP &amp;&amp; CORS css location react Summary

    vue— You have to know   Catalog More summary   Jab here Properties and methods grammar Compute properties Special properties vue Style binding vue Event handler Form control binding Parent-child component communication Transition effects vue Summary of experience javascript ...

  3. python And front end HTML/CSS Basic knowledge learning notes

    1. File structure : HTML The fixed structure of the file : <html> <head>...</head> <body>...</body> </ht ...

  4. The front-end study ---html Basic knowledge of

    HTML Basic knowledge Study html Let's first look at HTML The essence : web Framework essence We are learning socket, We create a socketserver, And then run it , There is one client The client wants to connect socket Server side , ...

  5. jsp Study ---css Basic knowledge learning ,float,position,padding,div,margin

    1. Common page layout design sketch : Code : <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  6. The front-end study ——css Practical technology

    One ,css Control text styles Text related css There are many attributes , Include : color;font-size;font-weight;text-transform( Case write uppercase etc. );text-decorat ...

  7. Web The front-end study ——CSS

    One .CSS brief introduction CSS Full name cascading style sheeding, Cascading style list .CSS Not only can you statically decorate a web page , You can also work with a variety of scripting languages to dynamically format the elements of the web page . Two .CSS form 1. Selectors (1) ...

  8. The front-end study -- Css -- Generation and solution of high collapse

    In the document stream , By default, the height of the parent element is held open by the quilt element , That's how high the child is , How high is the parent element . But after setting the float for the child element , The child element is completely detached from the document stream , This will cause the child element to be unable to hold up the parent element , Causes the height of the parent element to collapse . because ...

  9. The front-end study -- Css -- float

    Block elements are arranged vertically in the document stream by default , So these three div From top to bottom , If you want the block elements to be arranged horizontally in the page , Block elements can be detached from the document stream . Use float Float the elements , To break away from the document flow Optional value : none, The default value is , Elements ...

Random recommendation

  1. block Summary with the agent

    The principle of agency use : The parameters of the proxy method are the values to be passed , The return value of the proxy method is the value to get ( That is, the value returned by the class to be called ), And the value in the implemented proxy method is the value to be passed by the original class ( Set up delegate=self),   such as 2 Classes A,B ...

  2. Cocos Studio1.5.0.1 Develop learning notes ( One )

    hear Cocos Studio For a long time , Mainly because of bone animation . So far Cocos2d-x The only way to play animation is 2 Kind of : The first one is : It's playing sequence animation , That is to load every frame of the animation into the cache , Use it when you need to play it Animation ...

  3. Jump different according to different needs Activity Another way of writing

    The code is as follows : /* Android Asynchronous Http Client Sample Copyright (c) 2014 Marek Sebera <marek.sebera@gm ...

  4. android static achieve Service And Activity On Handler communicate

    for static Understanding , Only applicable to static Understanding , No joy, no spray. The first way : leave Service In order to get Activity Of static Variable , Call the getHandler() obtain Handler To send a message ...

  5. ZOJ 1489 HDU1395 2^x mod n = 1 mathematics

    2^x mod n = 1 Time Limit: 2 Seconds      Memory Limit:65536 KB Give a number n, find the minimum x t ...

  6. Problem solved , But why ?could not find the main class.program will exitmain

    Learn again today socket Write a simple online chat , In the case of simple function implementation , On a whim, I wanted to make this program executable jar package , So that you can double-click on the desktop to run . Refer to the article I wrote before <> Play two jar But later ...

  7. The law of indexing --IS NULL, IS NOT NULL You can't use indexes

    Mysql  Home page of series articles =============== 1  Data preparation 1.1  Build table DROP TABLE IF EXISTS staff; CREATE TABLE IF NOT EXISTS st ...

  8. android Customize xmls File attribute

    When using to customize View Of xml You need to add xmlns: Prefix =http://schemas.android.com/apk/res/ Your customization View The package path . Here is a simple example : chart ...

  9. SpringBoot19 Integrate SpringSecurity01 -&gt; Environment building 、SpringSecurity verification

    1 Environment building 1.1 Create a SpringBoot project Project scaffolding -> Click to go to 1.2 Create a Restful Interface Create a new one Controller The class can package com.example ...

  10. Spring AOP Implementation mechanism

    author : name Dean Tripod http://www.importnew.com/28342.html AOP(Aspect Orient Programming), It's called aspect oriented programming , As a complement to object-oriented ...