文字块一
文字块二
文字块三
”,而用“
文字块一
文字块二
文字块三
”更合适。 用DIV+CSS设计思路是这样的: 1.用div来定义语义结构;2.然后用CSS来美化网页,如加入背景、线条边框、对齐属性等;3.最后在这个CSS定义的盒子内加上内容,如文字、图片等(没有表现属性的标签),下面大家跟我一起来做一个实例加深对这个步骤的理解。先看结果图: CSS排版结果图 演示地址:css2.html 用div来定义语义结构 现在我要给大家演示的是一个典型的版面分栏结构,即页头、导航栏、内容、版权(如下图) 典型版面分栏结构 其结构代码如下:
上面我们定义了四个盒子,按照我们想要的结果是,我们要让这些盒子等宽,并从下到下整齐排列,然后在整个页面中居中对齐,为了方便控制,我们再把这四个盒子装进一个更大的盒子,这个盒子就是BODY,这样代码就变成:
很简单的页面布局啊,例如第一张图,首先一个大的盒子,把他们都装起来,然后先分左右两个div,
然后左边的盒子再分三个盒子,第二个盒子再分左右两个盒子,第三个盒子也是一样。
或者左边的直接分两个盒子,第二个盒子分四个盒子,
设置浮动,给每一个小盒子设置width:calc(50%);
这样只能装两个盒子一行,剩下的自动换到下一行。
显示的结果是一样的,但是要注意同级浮动的影响,
要给第三个盒子清除同级浮动。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)