×

gridlayout 布局 layout布局

gridlayout布局的三种构造方法?制作一个如下图所示的框架网页,写出HTML代码

admin admin 发表于2022-06-27 04:07:58 浏览99 评论0

抢沙发发表评论

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》

效果如图