Different settings for full coverage of pictures and non-blank line fonts

Different settings for full coverage of pictures and non-blank line fonts

First of all, attach the rendering of the last time to solve this problem. Insert picture description here
Because the picture is smaller than the screen, there will be a problem of repeated pictures. This problem is encountered by many designers who are just getting started, such as me, but it is also very easy to solve. , For this I thought of two solutions, the first one is more foolish to find a larger picture directly, and those who know how to PS can also directly expand it to a suitable size, the second one needs our code Come to solve it. First attach my code
body{background:url() no-repeat center center;
background-size:cover;
background-attachment:fixed;
background-color:#CCCCCC;} The
first line url() directly copy the network in parentheses The network address of the picture no-repeat means that the picture does not repeat. Two centers mean horizontal centering and vertical centering.
background-size: cover; represents that the size of the background image is full coverage, and the image will be enlarged according to the original length and width ratio and put to a suitable size, but some of the images may not be displayed.
background-attachment: fixed; so that the background image does not change with the page sliding
background-color: #CCCCCC;} Define the background color as the image color, not write
here, attach the renderings here, and
Insert picture description here
explain the second question . The second question is not blank and font Different settings.
In the basic web page, if the h tag and p tag are programmed continuously, there will be blank lines.
Example
Insert picture description here
EffectInsert picture description here
In some tests, you will be given a web page for you to program according to the web page, but there is no blank line between the title and the body content, and the font and color are not the same. To solve the blank line problem, you need to use a single character <br >This is called a newline character. There will be no blank lines when a newline character is used in the same label.
Example Insert picture description here
Effect Insert picture description here
This can solve the problem of blank lines, but the problem I encountered requires that the bold text content of the title line is green. If you directly set the p tag to bold and color compile in the <body>, you will find that the title and content are bolded and changed color at the same time, which cannot achieve the expected effect. Here, you need to use sentence nesting between the p tags, bold <b> color <font color=""> Don’t say much, just go directly to the picture above. The
code Insert picture description hereeffect is Insert picture description here
finally attached to the topic I did at the time. I am interested in myself. You can try it.
Topic Insert picture description here
Here is a visual problem, the main text is in green font.
Attach the code (code is not unique) Insert picture description here
renderings Insert picture description here
OK, this article ends here.

Guess you like

Origin blog.csdn.net/weixin_50835854/article/details/109556449