Home > Article > Web Front-end > Proficient in CSS DIV web page style and layout page background_html/css_WEB-ITnose
Proficient in CSS DIV web page style and layout page background_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:51:171234browse
In the last blog, we briefly summarized the picture effects of CSS. This time we will talk about how CSS sets the background of the web page. The background of the web page is an important part of the entire web page. She directly decided The style and tone of the entire web page. This blog briefly summarizes how to use CSS to set background color and background image. First of all, let's look at a picture:
Then, the editor will explain the various knowledge points in detail with the context of the above thinking map. First, let's look at the page background of the page background. The color, example code and running effect are as follows:
Page background color
<span style="font-size:18px;"><span style="font-size:18px;"><html><head><title>背景颜色</title><style><!--body{ background-color:#5b8a00; /* 设置页面背景颜色 */ margin:0px; padding:0px; color:#c4f762; /* 设置页面文字颜色 */}p{ font-size:15px; /* 正文文字大小 */ padding-left:10px; padding-top:8px; line-height:120%;}span{ /* 首字放大 */ font-size:80px; font-family:黑体; float:left; padding-right:5px; padding-left:10px; padding-top:8px;}--></style> </head><body> <img src="mainroad.jpg" style="float:right;"> <span>春</span> <p>季，地球的北半球开始倾向太阳，受到越来越多的太阳光直射，因而气温开始升高。随着冰雪消融，河流水位上涨。春季植物开始发芽生长，许多鲜花开放。冬眠的动物苏醒，许多以卵过冬的动物孵化，鸟类开始迁徙，离开越冬地向繁殖地进发。许多动物在这段时间里发情，因此中国也将春季称为“万物复苏”的季节。春季气温和生物界的变化对人的心理和生理也有影响。</p> <p>对农民来说，春季是播种许多农作物的季节。在春季，地球的北半球开始倾向太阳，受到越来越多的太阳光直射，因而气温开始升高。随着冰雪消融，河流水位上涨。春季植物开始发芽生长，许多鲜花开放。冬眠的动物苏醒，许多以卵过冬的动物孵化，鸟类开始迁徙，离开越冬地向繁殖地进发。许多动物在这段时间里发情，因此中国也将春季称为“万物复苏”的季节。</p></body></html></span></span> The running effect is as follows:
CSS settings The background color is particularly simple: background-color, using hexadecimal design method. Background color can not only set the background color for web pages, but also divide web pages into blocks. Let’s look at next, use background color to divide the page into blocks. The example and code are as follows: > The running effect is as follows:
Another point to mention is that we did not set the color for the body part in the code, but we did set the color for the topbanner and leftbanner, so the ones without set colors inherit the body ones, and after setting them, they overwrite the original ones. Through background color and segmentation of the entire web page, good layout effects can be achieved. CSS can not only set the background color of the page, but also add pictures to the background. Let’s take a look at the example code and the running effect: :
<span style="font-size:18px;"><span style="font-size:18px;"><html><head><title>利用背景颜色分块</title><style><!--body{ padding:0px; margin:0px; background-color:#ffebe5; /* 页面背景色 */}.topbanner{ background-color:#fbc9ba; /* 顶端banner的背景色 */}.leftbanner{ width:22%; height:330px; vertical-align:top; background-color:#6d1700; /* 左侧导航条的背景色 */ color:#FFFFFF; text-align:left; padding-left:40px; font-size:14px;}.mainpart{ text-align:center;}--></style> </head><body><table cellpadding="0" cellspacing="1" width="100%" border="0"> <tr> <td colspan="2" class="topbanner"><img src="banner1.jpg" border="0"></td> </tr> <tr> <td class="leftbanner"> <br><br>首页<br><br>分类讨论 <br><br>谈天说地<br><br>精华区 <br><br>我的信箱<br><br>休闲娱乐 <br><br>立即注册<br><br>离开本站 </td> <td class="mainpart">正文内容...</td> </tr></table></body></html></span></span> From the above hours of effect, we see that this small picture is covered with this page in horizontal and vertical. , represents confidence and strength. I hope that friends who read this blog post will be confident and strong in the new year. No matter what difficulties they encounter, they will be brave and fearless. We just saw a small picture that can be filled with repetition. The entire page, but if we don't want it to be repeated like this, how should we set it up? Look at the example and code below: ’ ‐ ’ s ’ s ’ s ’ s ’ s ’ s with If you set background-repeat to repeat-x, what surprises will await us? Friends, you can try it yourself. We just saw the repetition of the background image. It doesn’t matter whether it is the X-axis or the Y-axis. Starting from the upper left corner, if we want to change these, how should we set it? Next, let’s look at the position of the background image. The example code and running effect are as follows:
>
The running effect is as follows:
<span style="font-size:18px;"><html><head><title>背景图片</title><style><!--body{ background-image:url(03.jpg); /* 页面背景图片 */}--></style> </head><body></body></html></span> By setting the position of the background of the picture, you can make good use of some large pictures as the background of the entire web page, and The text is above. We can see from the effect just now that the relative position of the background image and text is fixed, and they move together with the image. So how should we set a fixed background image? Let's look at the following example and the running effect:
Fixed background image
The running effect is as follows:
<span style="font-size:18px;"><html><head><title>背景重复</title><style><!--body{ padding:0px; margin:0px; background-image:url(bg1.jpg); /* 背景图片 */ background-repeat:repeat-y; /* 垂直方向重复 */ background-color:#0066FF; /* 背景颜色 */}--></style> </head><body></body></html></span> We See the background-attachment: fixed in the code to fix the background image. When the text moves, the background image will not move with the movement of the image.
Message from the editor
: In this blog post, the editor briefly summarizes the relevant knowledge of setting the page background. It mainly connects the page background, uses the background color to divide the page into blocks, and the page background image , the repetition of the background image, the position of the background image and the fixed background image. Among them, the background color is used to divide the page into blocks. Table is used in the entire body to divide the blocks. You can see the display effect as above. There is something else to say here. Yes, we did not set the color for the body part in the code, but we set the color for the topbanner and leftbanner, so the ones without set colors inherit the body ones, and after setting them, they overwrite the original ones. Through background color and segmentation of the entire web page, good layout effects can be achieved. BS study to be continued...