实验六 CSS布局
学号 201114004 姓名 王渝迪 专业 计算机科学与技术 成绩
【实验目的】
掌握用CSS的布局。
【实验内容】
1、熟悉Dreamweaver软件的环境;
2、会使用CSS进行布局。
【实验步骤】
1. 打开Dreamweaver,新建HTML文件。在代码中body中插入一个DIV标签。然后选择标签,新建CSS规则,在新建的CSS规则中,对新建的规则进行设置。
2. 对背景项设置,可以设置背景色;对方框项设置,可以设置标签的宽,高,和浮动(左对齐,右对齐,居中,无),以及方框位置的Padding和Margin进行设置;对边框设置,设置它的类型、宽度和颜色。这是一栏布局。
3. 二栏布局是在一栏布局的基础上再新建一个DIV标签。对新建的标签进行同样的设置,在设置方框的浮动时,选择不同的浮动,会出现不同的效果,如一个DIV标签设置为左对齐,另一个设为右对齐。这种效果还可以通过所建规则中的定位进行设置。
4. 嵌套布局。将第三个div嵌套在另一个div中。
【实验结果】
【实验心得和体会】
通过本次的实验,我熟练掌握了div布局技巧。能够完成简单的css+div布局。如上图。现在网页设计过程中基本都是使用css+div的格式进行布局。学会css+div对于网页设计来说有很重要的意义。