Appearance
链接与图片
图片处理
图像格式
- 网络带宽成本很高,图片处理在保证用户体验好的前提下,文件尺寸也要尽可能小
- 图片属性静态文件,不要放在 WEB 服务器上,而放在云储存服务器上并使用 CDN 加速
- 以 JPEG 类型优先使用,文件尺寸更小
- 小图片使用 PNG,清晰度更高,因为文件尺寸小,文件也不会太大
- 网页图标建议使用 css 字体构建如 iconfont 或 fontawesome
格式 | 说明 | 透明 |
---|---|---|
PNG | 无损压缩格式,适合图标、验证码等。有些小图标建议使用 css 字体构建。 | 支持 |
GIF | 256 色,可以产生动画效果(即 GIF 动图) | 支持 |
JPEG | 有损压缩的类型,如商品、文章的图片展示 |
下图的网站标志使用png
类型,这样图片清晰,同时有透明色,当页面底色改变时也不需要修改图片。
下面图片建议使用jpeg
,因为图片比较大使用 png 会造成文件过大,使用jpeg
后尺寸不大而且清晰度也可以接受。
保存透明图
下面介绍在PhotoShop
中快速生成透明 png
的图片效果。
- 保证没有纯色的底
- 选择导出为 png 格式即可
使用图片
在网页中使用 img
标签展示图片,图片的大小、边框、倒角效果使用 css 处理。
<img src="houdunren.png" alt="后盾人"/>
属性 | 说明 |
---|---|
src | 图片地址 |
alt | 图像打开异常时的替代文本 |
网页链接
不能通过一个页面展示网站的所有功能,需要在不同页面中跳转,这就是链接所起到的功能。
<a href="http://doc.houdunren.com" target="_blank" title="文档库">后盾人文档库</a>
选项 | 说明 |
---|---|
href | 跳转地址 |
target | _blank 新窗口打开 _self 当前窗口打开 |
title | 链接提示文本 |
打开窗口
下面设置 target 属性在指定窗口打开。
<a href="https://www.houdunren.com" target="hdcms">
在IFRAME中打开
</a>
<script>
window.open('https://www.hdcms.com', 'hdcms');
</script>
锚点链接
锚点可以设置跳转到页面中的某个部分。
为元素添加
id
属性来设置锚点设置
a
标签的href
属性<a href="#comment-1">跳转到评论区</a> <div style="height: 1000px;"></div> <div id="comment-1" style="background: green;"> 这是后盾人评论内容区 </div>
也可以跳转到不同页面的锚点
<a href="article.html#comment-1">跳转到评论区</a>
邮箱链接
除了页面跳转外可以指定其他链接。使用以下方式也有缺点,邮箱可能会被恶意用户采集到,所以有些用户使用 houdunren#qq.com
然后提示用户 请将#改为@后发邮件
的提示形式。
<a href="mailto:2300071698@qq.com">给后盾人发送邮件</a>
拨打电话
点击以下链接后,手机会询问用户是否拨打电话。
<a href="tel:99999999999">联系客服</a>
下载文件
默认情况下使用链接可以下载浏览器无法处理的文件,如果下载图片需要后台语言告之浏览器mime
类型(可查看后盾人 PHP)相关课程。
<a href="https://www.hdcms.com/HDCMS-201905072207.zip">下载HDCMS</a>