返回
创建CSS布局页面(上机实训任务)

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

ID：38518823

大小：346.50 KB

页数：8页

时间：2019-06-14

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

《创建CSS布局页面(上机实训任务)》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

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;overfl

2、ow: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;width:150p

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

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

    4、st-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、>

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

    6、x;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结构：

    捉迷藏问题(PeekabooBug

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

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

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

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

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