用border做圣诞树.docVIP

圣诞树 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN /TR/xhtml1/DTD/xhtml1-strict.dtd html xmlns=/1999/xhtml lang=zh-CN head style #cont{ height: 400px; width: 300px; background: gray; } #head{ float: left; border-top:50px solid gray; border-right: 50px solid gray; border-bottom: 50px solid green; border-left: 50px solid gray; margin-left:100px; margin-right:100px; } #main{ float: left; clear: left; border-right:50px solid gray; border-bottom:50px solid green; border-left: 50px solid gray; margin-left:100px; margin-right: 100px; } #foot{ float: left; clear: left; border-top:50px solid green; border-left: 25px solid green; margin-left: 140px; margin-right: 100px; } /style title新建网页/title meta http-equiv=Content-Type content=text/html; charset=utf-8 / meta name=description content=布尔教育 / /head body div id=cont div id=head/div div id=main/div div id=foot/div /div /body /html 上面的程序是一个圣诞树的模型，灰底绿树，想要看效果自己复制粘贴，今天我就借着这个圣诞树讲一下border在div中的应用。 Border英文边界的意思，div在HTML中是盒子的意思，border就是盒子的边，那盒子边的有很多的属性，上下左右的边界宽度，颜色，形状，首先我们要知道边实际上只是一条线，本身只有对应长度，两条垂直交叉的边才会组成一个平面，平面才有长宽，还有border的长是左右边，宽是上下边这个需要理解一下，上面程序中用到了一个父div（cont）和三个子div其中父div设置了宽度高度还有背景颜色为灰色。 第一个子div（head）：首先我们设置它是浮动的，因为我们要用到margin，只有是浮动的div中margin的上边距才会有效，这个很重要，普通的父子div的上边距时候margin的时候会产生重叠效果挺有意思，随后主角登场border的四个边，全是50px，属性是实线，颜色只有下边线是绿色其余都是和父div相同的颜色，上下边线50px是指垂直方向上的，左右边线是指水平方向上的这样我们将这四条边组合到一起他们就形成了一个正方形，但是每个相邻的两条边他们相结合的时候都是对角线互嵌到一起的这样就分成了四个三角形将其中三个三角形全设置成与主div一样的颜色留下一个三角形，OK了。 第二个div（main）：基本上与第一个相同，但是它没有上边border，但它仍旧实现了三角形并且实现了圣诞树，这里包含了一个重要的知识点，首先我们仍旧设置子div为浮动的，然后换行就是让其左侧不允许出现浮动，接着我们可以看到border的左边和右边是50，下边是50，那么他们组成的矩形是个长多少宽多少的，很显然左右两边控制的是长度而下边控制的是宽度所以是一个长一百宽五十的长方形，虽然组成的是长方形可他们的对角线仍旧是互嵌的，所以仍旧会 产生一个三角形。 这第三个，也是设置浮动的，换行。它的功能是树干，需要一个长方形，垂直方向的长方形，我们只需要一个上边和一个左边，下面为大家用一个比较生动的比喻，我们现在需要一个长方形，前面说了上边的宽度是垂直方向上的，但是无论多宽border是线在宽也是线，根本无法用二维方式去观察，那好，垂直方向上它宽，水平方向就是0，这时我们把左边border加入到上边的体内也就是让他们融合，左边呢是水平方向上的宽度，垂直方向是线的基准，当他们两个遇到一起时呢会互相渗透，最后互相撑起彼此的世界，在对角线处会产生各自的边界，这样就产生了矩形，也就