Proficient CSS+DIV Web page style and layout--image effect

Referring to the picture effect, small partners may think of the United States 美图秀秀, PS, etc., these software are very good photo processing software, including: black and white, enhanced, Gauss, high contrast, night vision, old photos and pencil drawings and so on. Whether you're a professional photo-photographer or not, we can easily achieve the photo effects we want with photo-processing software. This blog, small series will continue to summarize Css+div's her effect to analyze, interested partners can click on the following links to learn about the basics of CSS before the small series:
Proficient in Css+div Web page style and layout--a tentative study of CSS
Proficient in Css+div page style and layout--css text effects
Proficient in Css+div page style and layout--css paragraph effects
The previous blog, small series mainly explained the knowledge about the paragraph, this time the effect of the picture, we see how to control the image display effect. First, let's look at a picture:

Next, the small series along the above diagram of the context of the various knowledge points for one by one to explain, in the actual combat better grasp:

Picture Effect

picture Border

First, let's look at the code for an example and how it works:

<span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" >
the effect is as follows:
Analyze the above code, Border-style: Control the style of the line (whether it is dotted or dashed); Border-color: It's obviously controlling the color; Border-width: Controls how thick the border is. At the same time, border control the border, not only can use the code inside the way, and we can put all the code to synthesize a sentence, we can write, code and run the effect is as follows:
<span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" >
this becomes very concise, we look at the effect:
Border also has a more powerful function is to be able to modify a single border, such as we write code, what kind of display effect NIE:
<span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" >

The display results are as follows:
Make it easier for us to design, then, let's look at a piece of scaling, example code and running effect as follows:
<span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" >
Analyzing the above code, 50% of the code indicates that the width of the image is currently 50% relative to the body of his parent element, which means that she is half the width of the entire browser. She can guarantee that different browsers will not change the whole page because of her change, she will always keep a relative width with the browser. The image effect is as follows:
 Picture Zoom
 Picture Alignment
 Horizontal Alignment
Horizontal alignment and vertical alignment, let's look at horizontal alignment: We use the text-align to achieve this effect, and look at the code and display effects:

<span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" >
The effect is as follows:
Vertical alignment Unlike horizontal alignment, there are a lot of vertical alignment values, and we compare these values by one by one, and we look at the code:
 
 
<span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" >
The results are as follows:
Picture and  text mixed row
Text wrapping: We start with the code:
<span Style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" >
The effect is as follows:
We have used the first word amplification effect, graphics and text mixed display effect, pictures and words have a very good mix, this is the same word with the picture and text mixed display. We go back to see the code, we can see, the text around the image with the effect of the first word amplification is the same, the use of float:left. In fact, the equivalent of the text as a picture or a picture as text, the same as the first word sinking.
Small Series of words: The blog, the small part of the main simple summary of the CSS in the picture set the effect, a total of three pieces, including the picture style, picture alignment, Text mix, which picture style including the picture of the border effect and image zoom effect, Border-style: Controls the style of the line (whether it is dotted or dashed); Border-color: Obviously control the color, Border-width: Control the thickness of the border, and the horizontal and vertical alignment of the picture, as well as the graphic mix, these small details of knowledge, We also need to practice in the code to better grasp the knowledge, BS study, not to be continued ...
Proficient CSS+DIV Web page style and layout--image effect