In this blog, we will continue to analyze other effects of CSS + Div. At least it will be enough, right. I have talked about some basic things. For details, see:
Proficient in CSS. Div webpage style and layout (2)-Section
Proficient in CSS. Div webpage style and layout (2)
Proficient in CSS. Div webpage style and layout (1)
Let's talk about the text effect. This time we talk about the image effect. We can see how to control the image display effect.
Image style:
In this part, let's first talk about the border of the image and look at the Code:
<HTML>We know from the code that border-style: controls the line style (whether it is a dotted line or a dotted line); border-color: clearly controls the color; border-width: controls the Border width. At the same time, I also want to say that when border controls the border, not only can we use the method in the code, but also we can combine all the code into a sentence, we can write like this: let's look at the code of Test2:
<HTML>In this way, it becomes concise and achieves the same effect. Let's look at the effect:
Border also has a powerful function to modify a single border. For example, we write this statement:
<HTML>This is as follows:
This makes our design easier.
Let's take a look,Image Scaling:
We also start from the code:
<HTML>This 50% indicates that the width of the current image is 50% to the width of its parent element body, that is, half of the width of the entire browser. He can ensure that different browsers will not change the entire webpage because of his changes, and he will always maintain a relative width with the browser.
Let's see the effect of this image:
If we change to a fixed width, for example, to change 50% to 80 PX, we will find that the browser will not change. Let's continue and set the height value to 60%.
Let's take a look: You can compare the results by yourself.
Image Alignment:
In terms of horizontal and vertical alignment, we first look at horizontal alignment: We use text-align to achieve this effect, to see the code and display results:
<HTML>Effect:
Vertical Alignment is not like horizontal alignment. There are many vertical alignment values. We compare these values one by one. Let's look at the Code:
<HTML>:
Text mixing:
Text circle: Starting from the code,
<HTML>The effect is as follows:
We have adopted the first-character zoom-in effect, the text-text mixed display effect, the image and text are well mixed, which is the same as the word text mixed display. Let's go back and look at the code. We can see that the effect of the text surrounding image is the same as that of the first word amplification, and float: Left is used. In fact, it is equivalent to regard text as an image or an image as text, and the first word is also sunk.
Finally, I wish you a happy Mid-Autumn Festival.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
