- 1、本文档共65页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
DIVCSS布局入门解析
单击“分类”列表中的区块选项,对相关选项进行设置,单击确定,既可以看到效果 在页面中插入名称为box的DIV,位置点选择“在插入点” 打开“css”面板并选择div.css,新建css规则,在选择类型器中选择ID(仅用于一个HTML元素,在选择名称中输入box) 在弹出的“CSS规则定义”对话框中,分别选择“区块”和“方框”选项,对相关选项进行设置。 删除多余的文本,点击“插入Div标签”,在该Div中插入名称为top的DIV 以相同的方法新建css规则,对“背景”和“方框”的相关选项进行设置,并删除多余的文本 插入FLASH动画,并将该动画的Wmode属性为“透明”,保存页面并保存外部样式表文件 在名为top的DIV后插入名为main的DIV,并用相同方法新建css规则,对“背景”和“方框”的相关选项进行设置 在名为left的DIV中插入图像,并在该DIV后插入名为right的DIV,并以相同的方式建立css规则,其中选择器名称为right css规则定义,分别选择“类型”、“背景”、“方框”的相关选项进行设置 在名为right的DIV文件中输入相应的文本内容,并以同法新建css规则,在选择器类型中选择“类”(可用于任何HTML元素),选择名称为font01 css规则定义,对“类型”的相关选项进行设置,选中相应的文本,在“属性”中的类选择刚定义的样式表font01 新建css规则,设置选择器名称为“font2”,在“css规则定义”中对“方框”的相关选项进行设置 选中相应的文本内容,在“属性”的“类”中应用样式表font2,相同方法,完成页面版底信息部分内容的制作 完成整个页面制作,保存并保存相关的外部样式表 5.4制作流程2 分别新建一个空白的HTML文件和两个CSS文件,并保存 切换到5-5.html文件,打开“CSS样表”面版,单击“附加样式表”按钮,在“链接外部样式表”中,将刚刚新建的两个CSS文件链接到文件 选中CSS.CSS样式表,新建CSS规则,并在弹出的对话框的选择器类型下拉表选择“标签(重新定义HTML元素)”,在选择器名称处输入* 在“CSS规则定义”对话框的“分类”列表中选择“方框”,设置Padding和Margin均为0,然后选择边框选项并设置width为0 用相同的方法新建css规则,在选择器名称中选择body标签,单击确定 在弹出的“CSS规则定义”对话框中,在“分类”列表中分别选择“类型”和“背景”选项,对相关选项进行设置 5.5案例小结 本实例中主要学习了DIV+CSS布局方法,制作过程中要熟练掌握插入DIV的方法和建立CSS规则,以及通过CSS“规则定义”对话框设置常见的CSS属性。通过CSS规则控制页面中文字的格式和对齐方式,为以后直接书写CSS代码做好铺垫 6 课后作业——制作个人网站页面 6.1案例分析 制作过程:1、制作出页面的背景效果 2、 制作页面的主题内容及信息 在制作过程中,注意对导航菜单图像的处理方法 效果图如下: ·6.2技能剖析 实现效果 使用方法 页面的背景图像 #box{ width:1005px height:726px background-image:url(../images/007.jpg); background-repeat:no-repeat; } 1、 剖析步骤: 2、 实现效果 使用技术 页面主体布局 #left{ width:540px; height:681px; margin:10px 0px 0px 53px; } 通过名为left的DIV布局页面主体,在left种插入多个DIV,通过CSS样式进行控制,并分别在各DIV中制作相应的内容。 3、 实现效果 使用技术 版底信息内容格式 #bottom{ width:1005px; height:20px; txt-align:center; padding-top:15px; } 版式信息内容分隔 #bottom span{ margin:0px 5px 0px 5px * 课本:P268—P277 * 2.3相对定位 Position的参数:static、relative、absolute、fixed、inherit static 无特殊定位,静态 relative 相对,对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置 absolute 绝对,将对象从文档流中拖出 ,使用left,right,top,bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位 fixe
文档评论(0)