div+css制作表格(1)”div“应用

 时间:2026-02-13 11:05:49

1、原理,

          应用浮动原理即flaot特性,把表格a和表格b进行排列组成单个一行两列表格,然后把三个这样的表格组成了三行两列的表格因为是单个表格的组成,实际调节像素多少就可以做成自己需要的表格了。如图,单元格r1,r2.边框宽度设定1px,漂移后相邻边框就是2px。整体需要加一个大的外框,这样里外都是2px了。

div+css制作表格(1)”div“应用

2、打开dw(Dreamweaver),新建html。在代码区插入表格的外框

<div class="table">,注意箭头选项的选择。

div+css制作表格(1)”div“应用

3、也可以在把光标移到"table"附近,单击右键如图选择,效果一样的。

div+css制作表格(1)”div“应用

4、.table的css值设定如图示;

.table {

width: 198px;

            height:398px;

            border: 1px solid rgb(0,0,0);

        }

div+css制作表格(1)”div“应用

div+css制作表格(1)”div“应用

5、<div class="table">内插入第一行表格命名为a1图示。css样式a1的设置过程如上步骤。这里设置为;

.a1 {

height: 100px;

width: 200px;

border-top-width: 1px;

border-left-color: #000099;

}

div+css制作表格(1)”div“应用

6、同样设置r1,r2的css样式;但是这里要运用float: left;把r1,r2左浮动。样式为;

.r1, .r2{

            float: left;

            width: 98px;

            height: 98px;

            border: 1px solid #000000;

一行表格就完成了。

div+css制作表格(1)”div“应用

7、把

<div class="a1">

            <div class="r1"></div>

            <div class="r2"></div>

        </div>

复制后把a1分别换成a2,a3,a4分别粘贴在a1和a2,a4的后面如图示。

div+css制作表格(1)”div“应用

8、把a2和a3,a4的样式同样和a1的css样式一样。如图。

div+css制作表格(1)”div“应用

9、单击“设计”或者”预览“如图,就可以在网页和软件上看到一个2px边框两列四行的表格了。

div+css制作表格(1)”div“应用

10、如果想要一个1px的表格。把外框去掉。把每行的下边框设置为零即可。

div+css制作表格(1)”div“应用

  • Dreamweaver:[53]css样式如何应用到网页中去
  • div怎么填充图片
  • 在网页里的图片 如何做到将鼠标放上去后就会变成另一张图片
  • Dreamweaver第一步,如何新建站点?
  • Dreamweaver CS3的时间轴各项说明
  • 热门搜索
    端午节简介 高跟鞋搭配 减肥达人 正确的减肥方法 蔬菜批发生意怎么做 电脑怎么定时开机 男士减肥 新绝代双骄3攻略 冬装搭配 怎么搭配衣服