zoukankan      html  css  js  c++  java
  • web-4. 装饰页面的图像

    4. 装饰页面的图像

    4.1 页面颜色的设计

    色彩的一般象征意义:红色是烈火的颜色,象征热情、奔放,也是鲜血的颜色,象征生命;黄色象征华丽、富贵、明快;绿色是大自然中草木的颜色,象征自然和生长,也象征和平与安宁;紫色有庄重感,象征高贵;白色给人以纯洁清白的感觉,象征圣洁。

    (1)暖色调:红色、橙色、黄色、褐色等色彩的搭配。

    (2)冷色调:青色、绿色、蓝色等色彩的搭配。

    (3)将色调完全相反的颜色搭配在同一空间中。

    4.2 图像的基本类型

    1. GIF格式

    GIFGraphics Interchange Format的简称,可交换的图像格式。

    注:“失真”与“不失真”

    指的是图片转换成此格式时,其图像品质是否与原来相同。通常为了增加压缩的效果,一些肉眼看不到的图像信息就会被删除。这就与原来的图像不同了,这个过程是不可以恢复的。

    1. JPEG格式

    JPEG格式是Joint Photographic Experts Group的简称,联合图像专家组。扩展名是.jpg.jpeg

    4.3 图像的插入以及格式

    插入标记<img>

    格式:

    <img src=” ” alt=” ” border=” ” width=” ” height= “ ” align=” ”>

    src用于指定图像原文件的所在路径。

    alt用于为图像添加提示性文字。即当鼠标放在该图像上时,鼠标的旁边就会出现提示性文字。

    border用于为图像设置边框。当没有在图像上添加超链接的时候,图像边框为黑色;当为图像加上超链接的时候,图像边框的颜色与链接的文字的颜色是一样的,为深蓝色。

    widthheight在默认的情况下就是图像的原始大小

    align用于为退昂设置与文字之间的对齐方式。

    hspacevspace用于设置图像与文字之间的对齐方式。

    Top:沿着当前文本行的顶端对齐图像的顶端。

    Middle:沿着当前文本行的顶端居中拜访图像。

    Bottom:沿着当前文本行的底部对齐图像的底部。

    Left:图像在文字的左侧。

    Right:图像在文字的右侧。

    Baseline:英文文字基准线对齐。

    Textop:英文文字上边线对齐。

    absbottom:文字的底线位于图像的底部。

    absmiddle:文字的底线位于图像的中间。

    例子:

    <html>

    <head>

    <title>图像对齐实例</title>

    </head>

    <body>

    <h1 align=center>爱莲说</h1>

    <h3 align=center>周敦颐</h3>

    <p><img src="./connect.jpg" alt="美女" width=150 height=100 align=left>

        水陆草木之花

    </p>

    </body>

    </html>

    4.4 动态替换图像

    动态替换的意思就是,当用户的鼠标移动到图像上时,图像就会变成另一幅画,当离开后又会变成原来的图像。

    例子:

    <html>

    <head>

    <title>动态图像</title>

    </head>

    <body>

    <center><img src="./1.jpg" name="picture" width=400 eigth=600

    onmouseover="picture.src='./2.jpg'"

    onmouseout="picture.src='./1.jpg'">

    </center>

    </body>

    </html>

  • 相关阅读:
    能组成多少个无重复数字且不为5的倍数的五位数有多少个?
    http与https
    观察者模式和发布/订阅模式的区别
    快速排序的最优时间复杂度是 O(nlogn)
    函数实现 composeFunctions(fn1,fn2,fn3,fn4)等价于fn4(fn3(fn2(fn1))
    vue双向绑定代码实现
    node历史版本下载
    阻止scroll冒泡
    中断或取消Promise链的可行方案
    从输入url到页面加载完成发生了什么?——前端角度
  • 原文地址:https://www.cnblogs.com/free-1122/p/9858403.html
Copyright © 2011-2022 走看看