gridlayout布局的三种构造方法
GridLayout() 一行一列
GridLayout(int rows, int cols) rows行 cols列
GridLayout(int rows, int cols, int hgap, int vgap) rows行 cols 列, 列间距hgap, 行间距vgap
制作一个如下图所示的框架网页,写出HTML代码
《style type=’text/css’》
#hifm{
width:1000px;
height:600px;
border:1px solid yellow;
float:left;
}
.head{
width:1000px;
height:80px;
border:1px solid yellow;
float:left;
}
.index{
width:160px;
height:455px;
border:1px solid yellow;
float:left;
}
.main{
width:836px;
height:455px;
border:1px solid yellow;
float:left;
}
.foot{
width:1000px;
height:60px;
border:1px solid yellow;
float:left;
}
《/style》
《div id=’hifm’》
《div class=“head“》Head《/div》
《div class=’index’》Index《/div》《div class=’main’》Main《/div》
《div class=’foot’》Foot《/div》
《/div》
请教DIV+CSS高手,这样的网页布局的DIV+CSS代码怎么写
css代码:
《style type=“text/css“》
*{ padding:0; margin:0;}
body{ padding-top:20px;}
.header,.a1,.footer{ height:40px; width:958px; margin:0 auto; border:1px solid #000; text-align:center; clear:both;}-gridlayout
.b,.c,.d{ width:960px; margin:0 auto; clear:both;}
.footer{ border-top:none;}
.a1{ height:100px; border:1px solid #000; border-top:none;}
.b1,.b2,.b3,.b4{ float:left; width:239px; height:80px; border-right:1px solid #000; border-bottom:1px solid #000;}-布局
.b1{ width:238px; border-left:1px solid #000;}
.c1,.c_center,.c_right{ float:left; height:260px; border-right:1px solid #000; border-bottom:1px solid #000;}-gridlayout
.c1,.d_left{ width:298px; border-left:1px solid #000;}
.c_center,.d_center{ width:459px;}
.c_right,.d_right{ width:199px;}
.c2{ height:129px; border-bottom:1px solid #000;}
.c4{ height:171px; border-bottom:1px solid #000;}
.c5,.c6{ float:left; width:99px; height:99px;}
.c5{ border-right:1px solid #000;}
.d_left,.d_center,.d_right{ float:left; height:100px; border-right:1px solid #000; border-bottom:1px solid #000;}-布局
.d1,.d3{ height:49px; border-bottom:1px solid #000;}
.d5,.d6{ float:left; width:99px; height:99px;}
.d5{ border-right:1px solid #000;}
《/style》
html代码:
《div class=“header“》首《/div》
《div class=“a1“》A1《/div》
《div class=“b“》
《div class=“b1“》B1《/div》
《div class=“b2“》B2《/div》
《div class=“b3“》B3《/div》
《div class=“b4“》B4《/div》
《/div》
《div class=“c“》
《div class=“c1“》《/div》
《div class=“c_center“》
《div class=“c2“》C2《/div》
《div》C3《/div》
《/div》
《div class=“c_right“》
《div class=“c4“》C4《/div》
《div class=“c5“》C5《/div》
《div class=“c6“》C6《/div》
《/div》
《/div》
《div class=“d“》
《div class=“d_left“》
《div class=“d1“》D1《/div》
《div》D2《/div》
《/div》
《div class=“d_center“》
《div class=“d3“》D3《/div》
《div》D4《/div》
《/div》
《div class=“d_right“》
《div class=“d5“》D5《/div》
《div class=“d6“》D6《/div》
《/div》
《/div》
《div class=“footer“》尾《/div》
效果如图