《Web前端开发项目教程》网页中添加图像和文本-网站首页中图像的应用_第1页
《Web前端开发项目教程》网页中添加图像和文本-网站首页中图像的应用_第2页
《Web前端开发项目教程》网页中添加图像和文本-网站首页中图像的应用_第3页
《Web前端开发项目教程》网页中添加图像和文本-网站首页中图像的应用_第4页
《Web前端开发项目教程》网页中添加图像和文本-网站首页中图像的应用_第5页
已阅读5页，还剩8页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

项目04网页中添加图像和文本任务4-1网页中图像的应用任务4-1网站首页中图像的应用

知识点掌握img标签及其属性的用法掌握常见图像样式的使用技能点能够向网页中添加图像能够熟练调整图像的样式一、插入图像<img>标签用于在HTML页面中嵌入一个图像，严格地讲，是使用<img>标签在页面里创建了一块区域，用以容纳被引用的图像。基本格式：<imgsrc="图像URL"alt="替代文本"[其它可选属性]/><img/>标记是单标记，是行内元素，用于在当前行中插入一幅图像，图像前后的文本默认与图像底部对齐。一、插入图像——src属性src属性指定图像路径及文件名，常见的web端显示图像格式有jpg、gif或png格式。（1）绝对路径绝对路径一般是指带有盘符的路径或完整的网络地址。例如“D:\myweb\img\logo.gif”或者“/images/logo.gif”（2）相对路径相对路径不带有盘符，通常是以当前HTML网页文件为起点，通过层级关系描述目标图像的位置。相对路径的设置分为以下3种：图像文件和html文件位于同一文件夹：只需输入图像文件的名称即可，如<imgsrc="logo.gif"/>。图像文件位于html文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<imgsrc="img/img01/logo.gif"/>。图像文件位于html文件的上一级文件夹：在文件名之前加入“../”，如果是上两级，则需要使用“../../”，以此类推，如<imgsrc="../logo.gif"/>。一、插入图像——alt属性alt属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，给用户提供一些提示信息。该属性虽然是<img>标签的必备属性，但是省略该属性并不会发生错误，但是为方便搜索引擎抓取到图片，同时也为使用屏幕阅读器的残疾人提供方便，推荐网页开发人员在引入图像中都使用这个属性。例如：<imgsrc="logo.gif"alt="网站标志"/>如果图片无法正常显示，则在网页上显示如图：一、插入图像——其它可选属性title：指定当鼠标指向图片时显示的提示信息。width：设置图像在页面中的显示宽度，可以设置为像素，也可以设置为原图片大小百分比的形式。height：设置图像的高度，可以是像素或百分比形式。如果不设置width和height，默认显示图片真实大小。分别设置width和height，则按指定宽高显示。通常情况下，需要调整图片大小时，为了保证图片比例不失调，只设置width属性或者只设置height属性，另一个属性取值会自动按比例变化。二、CSS图像样式——设置图片的宽高width：设置图像的宽度；height：设置图像的高度；在实际应用中，向已经布局好的页面模块中加入图片经常会发生图片过大超过容器盒子大小的情况。【例h4-1-1】如图容器盒子大小为100px*100px，图片大小200px*200px，所以图片默认超出容器显示。<!DOCTYPEhtml><html><head>

<metacharset="utf-8"><title></title>

<styletype="text/css">

.box{ width:100px;

height:100px;

border:1pxsolid;}

</style></head><body>

<divclass="box"><imgsrc="img/h5.jpg"></div></body></html>二、CSS图像样式——设置图片的宽高<!DOCTYPEhtml><html><head>

<metacharset="utf-8"><title></title>

<styletype="text/css">

.box{width:100px; height:100px;border:1pxsolid;overflow:hidden; }

.boximg{width:100%;}

</style></head><body>

<divclass="box"><imgsrc="img/h5.jpg"></div> </body></html>往往容器的大小和位置是在页面布局时就已经确定好的，后续一般不会随意改变，建议在上传图片时事先将图片剪切来匹配容器大小，或者在引用图片时调整图片的样式大小为容器的100%，同时对容器使用overflow:hidden属性，避免图像占据过多的空间。【例h4-1-2】图片大小和容器相匹配。二、CSS图像样式——设置图片的边框<!DOCTYPEhtml><html> <head>

<metacharset="utf-8"><title></title>

<styletype="text/css">

.box{width:200px;height:200px;}

.boximg{width:100%;border-radius:50%;border:1pxsolid;}

</style> </head> <body> <divclass="box"><imgsrc="img/h5.jpg"></div> </body></html>border：设置图像的边框；border-radius:设置圆角图像；margin：设置图像在四个方向的外边距，图像元素虽然是行内元素，但是因为效果为块状，所以可以为其设置margin属性；【例h4-1-3】制作网页中的圆形图。二、CSS图像样式——设置图片的垂直对齐vertical-align：设置同一行中图像与文字的垂直对齐方式。默认情况下，该属性仅仅影响图片、按钮、文字和单元格等元素。常用的取值为：top：图像顶端与第一行文字行内框顶端对齐text-top：图像顶端与第一行文字文本顶线对齐middle：图像垂直方向中间线与第一行文字对齐bottom：图像底线与第一行文字行内框底端对齐text-bottom：图像底线与第一行文字文本底线对齐baseline：图像底线与第一行文字基线对齐<styletype="text/css">

img{vertical-align:top;}

span{line-height:60px;}</style><body>

<h2>图像与文本的对齐关系</h2><hr/>

<div>

<imgsrc="img/h5.jpg"/>

<span>行高60px，文本顶端与图像顶端对齐</span>

</div></body><styletype="text/css">

img{vertical-align:text-top;}

span{line-height:60px;}</style>二、CSS图像样式——将图像转换为块级元素display：取值为block可以将图像转换为块级元素；<img>标记是行内标记，只要没有采用其它换行方法，在浏览器窗口宽度允许的情况下，各个<img>插入的图像都将在一行中显示，可以通过设置图像的display:block;样式属性将其转换为块级元素。<styletype="text/css">

.picimg{ display:block;}</style><body><divclass="pic"><imgsrc="img/h5.jpg"><imgsrc="img/h5.jpg"></div></body>思考<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <styletype="text/css"> .picimg{width:400px;} </style> </head> <body> <divclass="pic"> <imgsrc="img01/banner.jpg"al

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论