实训七 css基础应用示例

下载文档

ID：6136003

大小：103.00 KB

页数：7页

时间：2018-01-04

收藏

资源描述：

《实训七 css基础应用示例》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、实训七CSS基础应用示例主要内容：本周需要完成的任务：根据前几周的设计，Ø各组创建自己的站点文件夹，并把站点内文件夹结构创建好，搜集相关素材；Ø使用Div+CSS实现网页框架。参考图：操作部分：CSS控制导航条样式提示：请务必做好准备工作。Ø在硬盘上创建一个自己的文件夹，专门存放网页素材和制作的网页。如在E:/盘创建一个“myweb“文件夹。Ø将从FTP上下载下来的”images”文件夹（专门存放图片），存放在自己的“myweb”文件夹内，以备制作网页时使用。Ø将从FTP上下载下来的test.html文件，存放在自己的“my

2、web”文件夹内，这是一个网页HTML代码的标准模版。Ø将test.html复制一份，重命名之后以记事本的方式打开，开始编辑代码。在上一节制作的网页框架的基础上，继续修改。1.首先填充#logo盒子里的内容，修改HTML文档：……

……保存后测试。2.两个问题需要解决：Ø加超链接之后，图片四周有难看的边框；修改CSS文件，为图片添加样式：……#logoimg{border:0;}……Ø

3、不希望logo图片贴着浏览器上边框显示。修改CSS文件，为#logo盒子添加内边距或外边距均可：……#logo{height:60px;background:#fff;margin-top:20px;}……此处选择添加外边距margin，并且根据效果调整高度height为60px，保存后测试。#logo盒子修改到此结束。1.#nav盒子放导航条，首先修改HTML文件：……

• 首页
• 关于我们

  4、i>

• 精彩案例
• 学习资源
• 联系我们

5、g:0;margin:0;}……保存后，测试。3.继续修改，控制

及每一个
• 的高度，并使所有导航条栏目显示在同一行：……#navul{height:42px;}#navulli{height:42px;float:left;}……保存后测试。1.继续修改，先把超链接默认的样式去掉：……#navullia{color:#fff;/*设置文字颜色*/font-size:16px;/*设置文字大小*/font-weight:bold;/*设置文字加粗效果*/text-decoration:none;/*去掉文字修饰效果

  6、，通常用于去掉文字下划线*/line-height:42px;/*设置文字行高，通常用于单行文字垂直居中*/}……保存后测试。2.继续修改，超链接栏目之间拉开距离：你能想到什么方法？先看到每个栏目所在的盒子的样子：……#navullia{color:#fff;font-size:16px;font-weight:bold;text-decoration:none;line-height:42px;background:#000;border:1pxredsolid;}……保存后测试，发现盒子的高度需要设置：……#navull

  7、ia{color:#fff;font-size:16px;font-weight:bold;text-decoration:none;line-height:42px;background:#000;border:1pxredsolid;height:42px;}……保存后测试，发现高度设置不起作用，原因？答：标记跟前面学过的

  、

  标记不同，不是块元素，所以适用于块元素的width、height等属性对标记不起作用；标记叫内联元素，不会霸占空间，占用的空间完全由内容多少决定。要设置内联元素的wi

  8、dth、height等属性，必须先将其转换为块元素：……#navullia{color:#fff;font-size:16px;font-weight:bold;text-decoration:none;line-height:42px;background:#000;border:1px

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

  侵权申诉 举报

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

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