码迷,mamicode.com
首页 > Web开发 > 详细

第11章 在网页中使用图像

时间:2016-06-14 20:57:54      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:

11.1 在网页上放置图像

技术分享
        <!-- <img />标签的src和alt属性是XHTML网页要求的.src属性标识图像文件,alt属性指定关于图像的描述性文本 -->
        <img src ="myimage.gif"alt = "My Image" />
View Code

11.2 用文本描述图像

技术分享
        <!-- title属性对<img />标签不是必需的.title属性类似于alt属性,实际上,在两个属性都指定的情况下,
            在工具提示中title属性将覆盖alt属性-->
View Code

11.3 指定图像高度和宽度

技术分享
        <!-- width 和 height指定高度 -->
        <img src = "" alt = "" width = "200" height = "100" />
View Code

11.4 对齐图像

  11.4.1 水平对齐图像

技术分享
        <!-- float:left 指定图像左对齐,float:right 指定图像右对齐 -->
        <img src = "" alt = "Tunnel View" width = "100" height = "80" style = "float: right; padding: 6px;" />
View Code

  11.4.2 垂直对齐图像

技术分享
        <!--
            vertical-align: text-top //与同一行中最高的图像或者文本的顶部对齐
            vertical-align: text-bottom //与文本的底部对齐
            vertical-align: middle //与同一行中其他内容的中心对齐
            vertical-align: baseline //与文本的基线对齐
        -->
View Code

11.5 将图像变为链接

11.6 使用背景图像

技术分享
        <!--
            background-color: 指定元素的背景颜色.
            background-image: 指定作为元素背景的图像,url("xxx")
            background-repeat: 指定图像重复的方式.可以是水平或者垂直方向
                repeat,repeat-x,repeat-y,no-repeat
            background-position: 指定图像开始相对于其容器的位置
                top-left,top-center,top-right,center-left,center-center,center-right,bottom-left,bottom-center,bottom-right
            -->
View Code

11.7 使用图像映射

  11.7.1 为什么图像映射不总是必要的?

  11.7.2 映射图像中的区域

  11.7.3 创建用于图像映射的HTML

技术分享
        <img src = "map.png" usemap = "#countymap" style = "border: none;width: 650px;height: 509px" />
        <map name = "countymap" id = "contymap">
            <!-- shape 指明该区域为矩形,圆形还是不规则多边形
                coords给出区域的像素坐标,href指定区域链接的页面,alt让你能够提供于该区域形状相关联的一小段文字-->
            <area shape = "rect" coords = "100,136,116,152" href="http://www.whitemancounty.org/"
                  alt = "Whiteman County, WA" title = "Whiteman County WA" />
        </map>
View Code

11.8 总结

技术分享
        <!--
            <img /> 将图像放在网页中
            <map>...</map> 客户端图像映射,由<img usemap="..." />引用,包含一个或多个<area />标签
            <area /> 在用户端图像映射中定义可单击的链接
            属性
            src = "地址"
            alt = "取代图像的描述"
            title = "标题"
            width = "宽度"
            height = "高度"
            style = "border-style:none"
            style = "vertical-align:alignment"
            sytle = "float:float"
            usemap = "名称"
            shape = "值"
            cords = "值"
            href = "链接URL
         -->
View Code

第11章 在网页中使用图像

标签:

原文地址:http://www.cnblogs.com/revoid/p/5585412.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!