Springboot: controller access files through Resource Interface

Access files through classpath.

Springboot will  scan /META-INF/resources/; /resources/; /static/ and/public/ folders when you tell it find something in the “Classpath”. 

Using Resource interface to instantiate an ClassPathResource. 

		Resource resource =new ClassPathResource("RelativePathOfYourFile, root of  /META-INF/resources/; /resources/; /static/ or /public/");
		
		try {
			String path =resource.getFile().getAbsolutePath();
			
		} catch (IOException e) { 
			// TODO Auto-generated catch block
			e.printStackTrace();
		}

CSS基本笔记(CSS Memo)

1. Reasons to use CSS: DRY, Clean

Examles: 1.

<h1 style="color: #98c7d4;"> Hellow World! </h1>
2.
<head>
<style>
h1 { color: #98c7d4; }
</style>
</head>

This two way maybe will repeat numerous times, so the paragraph of code will be large. The best way is making a External sheet in the following way:

<head>
<title>CSS Cross Country</title>
<link rel="stylesheet" href="styles.css" />
</head>

This will make your codes DRY(Don’t Repeat Yourself)


2.Cascade Order(something about the code priority)

 

Using !important < Inline style arttribute  < In the <head>  < External <link>

 


3.Primary DOM selectors

Example:

<h1 class="intro" id="header">Hello World!</h1>

-Element selector
h1{
 color:#aba4ac;
 margin-bottom:10px;
}
-Class selector
.intro{
  color:#abc4ac;
  margin-bottom:10px;
}
-ID selector
#header{
  color:#abc4ac;
  margin-bottom:10px;
}

4.Float <float: left/right/none;>

when we put pictures and paragraphs in a container, we could us Float to deal with their relation.

*Floated elements stack up to the parent edge, then move down to the next available edge. 

*Take care with elements that have differing heights-the first available edge isn’t always below.

 

Clearfix

/*Originally developed by Tony Aslett and Refined by Nicholas Gallagher */
.group:before
.group:after{
  content:"";
  display:table;
}
.group:after{
  clear:both;
}
.group{
  zoom:1;/*IE6&7*/
}

 

5. Inheritance & Specificity

Override parent properties: nested selector

    0      ,0     ,0     ,0

inline style     #if ID       #of class   #of element

 

 6.BOX

Total box width = content width + padding width +border width

 

Box overflow:

overflow: visible /auto/hidden /scroll

↑when content beyond the container boundaries;

 

Positioning:<position: static/relative/absolute/fixed;>

 

Z-index:

z-index:1;

↑Overlaping

Example:

<article>

  <img class="Green" src="Green.jpg" alt="Ski!"/>

  <img class="sled" src="sled.jpg" alt="Sled!"/>

</article>
.Green, .Brown{

  z-index:1;

}
.Brown{

  z-index:1;

}

In these case the Brown class should be above the Green class

 

7. Display Types:<display: block/inline/inline block;>

block:<div><p><ul><ol><li>

inline:<span><a><em><img>

 

8.Horizontal Centering

In block level:

margin: 0 auto;

in inline block level:

text-align:center;

 

9. Image Cropping

Solutions:

Overflow:hidden;

Or we could

.cropping img {

  height: 300px;

  width:auto;

}