创建CSS布局页面(上机实训任务).doc

创建CSS布局页面(上机实训任务).doc

ID:53873161

大小:346.50 KB

页数:8页

时间:2020-04-10

创建CSS布局页面(上机实训任务).doc_第1页
创建CSS布局页面(上机实训任务).doc_第2页
创建CSS布局页面(上机实训任务).doc_第3页
创建CSS布局页面(上机实训任务).doc_第4页
创建CSS布局页面(上机实训任务).doc_第5页
资源描述:

《创建CSS布局页面(上机实训任务).doc》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库

1、上机任务:创建CSS布局页面【任务环境】:完成任务的机器需要安装如下软件:Windowsxp操作系统,Dreamweaver8.0,Ie7.0浏览器/Firefox浏览器【操作流程规范】:一、创建站点,然后创建页面index.html。在index.html页面中编写第一个div与css。xhtml结构:此处显示id"header"的内容

CSS代码:#header{color:#FFFFFF;background-color:#666666;height:100px;width:700px;o

2、verflow:hidden;}#headerh1{font-size:20px;margin-left:20px;margin-top:20px;display:block;}图:一、通过Dreamweaver8的可视化操作来完成二栏式布局。XHTML结构:

……
CSS代码:#layout{width:700px;}#layout#left{background-color:#8dad1f;float:left;

3、width:150px;}#layout#right{padding:10px;float:left;width:530px;}图:一、设计列表XHTML结构:

  • IE捉迷藏
  • UL的不同表现
  • IE3px问题
  • 高度不适应
  • IE断头台问题
  • ……CSS代码:#layout#left#titlelist{margin:0px

    4、;padding:0px;list-style-type:none;}#layout#left#titlelistli{color:#FFFFFF;padding-top:5px;padding-bottom:5px;padding-left:10px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#a3c431;}图:一、创建导航XHTML代码:

    IE捉秘藏问题

  • <

    5、ahref="#">首页

  • CSS入门
  • CSS高级技巧
  • CSShack
  • ……CSS代码:#header#navli{float:left;list-style-type:none;}#header#nava{display:block;background-color:#999999

    6、;color:#FFFFFF;padding:5px;margin-left:3px;text-decoration:none;}#header#nava:hover{background-color:#787878;}#header#nav#current{color:#666666;background-color:#FFFFFF;}#header#nav{margin-left:400px;margin-top:36px;}图:一、编写与应用cssXHTML结构:

    捉迷藏问题(

    7、="strongText">PeekabooBug)是IE浏览器中的一个非常典型的对CSS的支持上的bug,说他是bug毫不为过,捉迷藏问题主要出现在IE6浏览器,当div应用稍显复杂的时候,常常出现的情况是在用于版式布局的时候,有时候当我们制作一个左右二栏的网页,而每个栏中又有一些链接、div等,这个时候容易引发捉迷藏问题,如本例中的代码:

    ……CSS代码:.strongText{color:#996600;background-color:#FFFF99;font-weight:bold;}图:二、css代码测试

    8、IE浏览器:Firefox浏览器:

    当前文档最多预览五页,下载文档查看全文

    此文档下载收益归作者所有

    当前文档最多预览五页,下载文档查看全文
    温馨提示:
    1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
    2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
    3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
    4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。