Div CSS layout introductory tutorial (5)_html/css_WEB-ITnose

作者:番茄红了
四、页面制作(1)----用好border和clear

　　由于找工作找房子的原因，隔了这么久才能开始写教程，心里感觉很对不起一直在关注本站的朋友，今天是找到房子的第二天，于是赶快继续写教程。

　　这一节里面，主要就是想告诉大家如何使用好 border和 clear这两个属性。

　　首先，如果你曾用过table制作网页，你就应该知道，如果要在表格中绘制一条虚线该如何做，那需要制作一个很小的图片来填充，其实我们还有更简单的办法，只要在 中加入这么一段就可以了，你可以试试：
　　

　　大家可以再次参考手册，然后你就能明白dashed、solid、dotted...等的作用，利用它们你可以制作出许多效果来，实线、虚线、双线、阴影线等等。

程序代码

　　以上代码便可以实现设计草图中的banner，在css.css中加入以下样式：

程序代码

#banner {
    background:url(banner.jpg) 0 30px no-repeat; /*加入背景图片*/
    width:730px; /*设定层的宽度*/
    margin:auto; /*层居中*/
    height:240px; /*设定高度*/
    border-bottom:5px solid #EFEFEF; /*画一条浅灰色实线*/
    clear:both /*清除浮动*/
}

　　通过border很容易就绘制出一条实线了，并且减少了图片下载所占用的网络资源，使得页面载入速度变得更快。

　　另一个要说明的就是 clear:both，表示清除左、右所有的浮动，在接下来的布局中我们还会用这个属性：clear:left/right。在这里添加clear:both是由于之前的ul、li元素设置了浮动，如果不清除则会影响banner层位置的设定。

程序代码

    

    

    

    

The above is the main part of the page. We add the following styles in css.css:

Program code

#pagebody {
width :730px; /*Set width*/
 margin:8px auto; /*Centered*/
}
#sidebar {
 width:160px; /*Set width*/
text-align:left; /*text left aligned*/
float:left; /*float left*/
clear:left; /*floats are not allowed on the left*/
overflow:hidden; /*Hide the part beyond the width*/
}
#mainbody {
width:570px;
text-align:left;
float:right; /*Float right*/
clear:right; /*Floating is not allowed on the right side*/
overflow:hidden
}

In order to see the effect, it is recommended to add the following to #sidebar and #mainbody Code, you can delete this code after the preview is completed:

Program code

border:1px solid #E00;
height:200px

Save the preview effect and you can find that the two layers float perfectly and meet our layout requirements. The actual width of the two layers should be 160 2 (border) 570 2 = 734px, which has exceeded the width of the parent layer. Due to clear The reason is that these two layers will not be misaligned, so that the page we lay out will not be misaligned due to too long content (such as pictures).


The overflow:hidden added later can automatically hide parts of the content that are too long (such as pictures). Usually we will see that when some web pages are loaded, the layout is stretched because the images are too large, and the layout does not return to normal until the page is downloaded. This problem can be solved by adding overflow:hidden.

Proper use of every attribute in CSS can solve many problems. Maybe they have nothing to do with the page you are laying out, but you must know the role of these attributes. When you encounter problems , you can try to use these properties to solve the problem.

The source file can be downloaded again in the next section.

Related articles:
Div CSS layout introductory tutorial (1) # -- Page layout and planning
Div CSS layout introductory tutorial (2) # -- Writing the overall layer structure and CSS
Div CSS layout introductory tutorial (3) # -- Making the top of the page (1)
Div CSS layout introductory tutorial (4) # -- Making the top of the page (2)----Use list

to make a menu
Div CSS layout introductory tutorial (5) # -- Make good use of border and clear
Optimize your CSS code #