图片在网页设计中占据相当重要的位置。仅用文字建立的网站相对枯燥,使用图文结合是当今大部分网站设计的形式。使用css样式可以设置图片的大小和边框等属性。css没有提供针对图片样式的属性,但是恰当的使用css其他属性和配合页面排布也能创造出很精美的图片效果。
在html中嵌入图片的方式是用img标签。
< img src="picture.jpg" />
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< title >浙江网盛生意宝股份有限公司< /title >
< /head >
< body >
< img src="picture.jpg" />
< /body >
< /html >
以上是一个最简单的在网页中插入图片的方式。其中,src属性是指要插入的图片所在文件夹位置。可以是相对地址,也可以是绝对路径。
在浏览器上使用的图片类型有限,通常为gif和jpeg格式的图片。由于某些格式的图片不能在浏览器中显示,所以在插入网页图片前应先使用ps等图像处理软件进行图片格式转化。
在网页中放置的图片的原始大小往往与设计师需要的图片大小不同。css的width和height属性适用于控制图片的宽度和高度。
width:picwidth
height:picheight
其中picwidth和picheight可以使用任何长度单位来装饰。通常情况下使用像素为单位。 如果原始图片不是一比一的关系,在缩放或放大后会明显拉伸变形。要使图片不变形,可以使用百分比控制图片大小或单独控制高度(宽度) 。
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< title >浙江网盛生意宝股份有限公司< /title >
< style >
img{ width:150px; height:150px}/*设置图片的宽度为150像素,高度为150像素*/
< /style >
< /head >
< body >
< img src="picture.jpg" />
< /body >
< /html >
使用百分比设置图片的宽高能使图片按照等比例缩放。图片最终高度(或宽度)=img标签的父级元素的高度(宽度)X缩放百分比。
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< title >浙江网盛生意宝股份有限公司< /title >
< style >
img{ width:50%; height:50%}/*设置图片的宽度为父元素的50%,高度为父元素的50%*/
< /style >
< /head >
< body >
< img src="picture.jpg" />
< /body >
< /html >
单独设置图片的宽度,图片按照宽度缩放,高度是按照宽度的缩放比例自动变化,整张图片在缩放后比例不变。单独设置图片的高度,同样。
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< title >浙江网盛生意宝股份有限公司< /title >
< style > img{ width:200px; /*设置图片的宽度为200px*/ < /style >
< /head >
< body >
< img src="picture.jpg" />
< /body >
< /html >
为放置在网页上的图片增加边框可以使用图片的边界清晰,排布整齐,也可以使图片更美观。
css的border属性适用许多元素,同样适用于图片。以下是使用border属性的通用语法:
border-width:width;设置边框的宽度
border-style:style;设置边框的样式
border-color:color;设置边框的颜色
其中border-width是指边框的宽度,width可以用任何长度单位设置,border-style是指边框的样式,style指的是设置边框样式的关键字。border-color是指边框的颜色,color可以用任何颜色单位设置。
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< title >浙江网盛生意宝股份有限公司< /title >
< style >
img{ border-width:3px; border-style:solid; border-color:#F00 /*设置边框宽度为3像素;设置边框样式为实线;设置边框颜色为红色*/
< /style >< /head >
< body >
< img src="picture.jpg" />
< /body >
< /html >
边框属性不但可以添加边框,还可以在某些特定的场合去掉边框。
由于网络传输等问题会造成网页上某些图片不能显示。在图片不能正常显示的情况下,为了让浏览者获悉图片包含的信息,应增加图片的替换文字。使用img标签的alt属性,能给图片增添替换文字。在图片不能正常显示的情况下,该替换文字就会出现在浏览器中。
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< title >浙江网盛生意宝股份有限公司< /title >
< style >
img{ border-width:3px; border-style:solid; border-color:#F00 /*设置边框宽度为3像素;设置边框样式为实线;设置边框颜色为红色*/
< /style >
< /head >
< body >
< img src="picture.jpg" alt="该图片不能显示,该图片原为风景图片"/>
< /body >
< /html >
在网页上的图片常常被作为一个超链接,以下是把图片设置为可单击的链接的代码:
< a href=””>< img src=”picture.jpg” alt=”该图片不能显示,该图片原为风景图片”/ >< /a>
其中在a标签中的href属性后的#符号可以用任意网页地址替换。
合理排布图片和文字能使网页显得生动并且充满说服力。图文混排是网页制作的一项重要手段。
相关专题
文本的样式由文字样式和段落样式构成。css提供了丰富的属性来控制文字样式和段落样式。
网页制作包括XHTML页面和CSS样式表,编辑CSS样式的能力是Dreamweaver其中的一个功能。
网盛生意宝,是一家专业从事互联网信息服务、电子商务、专业搜索引擎和企业应用软件开发的高新企业。
网盛,专注与网站建设、网站制作、网站定制开发。公司拥有一支专业、稳定的设计、服务团队。竭诚为您服务。
专注服务于成长型企业-互联网品牌营销,助力企业微营销。
有价值的网络营销服务平台,专业为企业营销型网站建设、让您拥有属于自己的营销型网站。
王经理
浙江网盛生意宝股份有限公司 股票代码:002095
地址:沈阳市和平区青年大街322号 昌鑫大厦F座14层
邮编:110166
电话:024-83959235
E-mail:wy@netsun.com