026 - 回眸一笑百媚生

不二如是 · 发表于 2019-4-17 09:38:08

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2019-4-30 10:07 编辑

上一集：025 - 这终究是一个语义为王的时代

登录/注册后可看大图

万众瞩目的零基础入门学习Web开发（H5&C3）开始更新了！！！

在Web新纪元 |【鱼C#视频课程】剧透这个系列的诞生，时间总是善待任何想拿它搞事情的存在体。

很幸运，一切就这样开始了，开局总会有些不足，但一切在慢慢变好，不是吗？

作为，吹水阁中最爱吹水（爱干无意义事情）的鱼油，整套教程的亮点（槽点）由我来承包～

关注本系列推送（最下方有订阅方式）的鱼油，会享受到一个福利：

会比正常推送，早一个时间节点，看到还未出炉的美味课程

哈哈，废话不多说了，#敲黑板时刻！

在线视频：传送门

课程思维导图

猛戳

登录/注册后可看大图

超清

1、map + area 元素

通过 map 内嵌 area 元素，并结合 img 元素，我们可以实现在图片指定区域进行跳转的操作。

首先创建 img 元素，并创建 usemap 属性：

<img src="../img/pic.jpg"  usemap="#myImage">

图片路径大家可以自行更换哦，注意usemap的值"#myImage"

# 必须要写，后面的值，就是 map 元素 name 属性的值：

<map name="myImage">
<!--内部包含area元素-->
</map>

通过在 map 元素中添加 area 元素来指定跳转区域：

<map name="myImage">
    <area shape="circle" coords="784,241,163" alt="Cup of coffee" href="https://fishc.com.cn" target="_blank">
    <area shape="poly" coords="279,230, 867,549, 636,975, 46,655" alt="Book" href="https://item.jd.com/12573534.html" target="_blank">
    <area shape="rect" coords="710,818,886,1008" alt="Turtle" href="https://man.ilovefishc.com" target="_blank">
</map>

关于属性的详细用法可以参看API宝典：传送门

现在有几个点要注意：

游客，如果您要查看本帖隐藏内容请回复

再次提醒，如果 area 元素使用了href 属性，那么 alt 属性一定要有值哦！

2、picture + source 元素

还记得我们在：004 - 一只特立独行的猪讲 style 元素的 media 属性玩法吗。

picture 元素和 source 元素组合使用，也能实现按照浏览器尺寸变化，加载不同的图片效果：

<picture>
    <source media="(min-width: 1024px)" srcset="big.jpg">
    <source media="(min-width: 512px)" srcset="small.jpg">
    <img src="normal.jpg" alt="小姐姐" style="width:auto;">
</picture

当浏览器尺寸大于1024px，显示big.jpg图。

当浏览器尺寸大于512px并小于1024px，显示small.jpg。

当浏览器尺寸小于512px或者不支持picture元素时，就显示img元素。

3、figure + figcaption 元素

这两个元素的组合，常用于网页配图，略微有点点鸡肋，因为 img 元素用alt属性也可以实现。

还是属于“语义化”上的操作：

<figure> 
        <figcaption>Three different breeds of dog.</figcaption> 
        <img src="dog1.jpg" alt="Maltese Terrier"> 
        <img src="dog2.jpg" alt="Black Labrador"> 
        <img src="dog3.jpg" alt="Golden Retriever"> 
</figure>

figcaption 元素代表了 figure 元素的一个标题或者说是其相关解释。

并不是每一个 figure 元素都需要一个 figcaption。

但是在使用 figcaption 时，它最好是 figure 块的第一个或者最后一个元素。

课后作业，完成了吗？

传送门

登录/注册后可看大图

下一集：027 - 一个时代的结束(上)

如果有收获，别忘了评分

：

登录/注册后可看大图

这位鱼油，如果喜欢本系列学习笔记，请订阅专辑☞（传送门）（不喜欢更要订阅

）

登录/注册后可看大图

zyl125657 · 发表于 2019-7-25 11:04:01

by2014 · 发表于 2019-8-3 14:14:58

韩某人 · 发表于 2019-8-25 18:01:54

SaaS

莫西莫西 · 发表于 2019-8-30 10:09:01

药水哥 · 发表于 2019-9-1 01:09:11

5555555555555555555555555555555

cc887498 · 发表于 2019-10-3 19:53:05

注意

大风包子 · 发表于 2019-11-12 18:29:09

康康

MYlindaxia · 发表于 2020-3-9 10:11:27

<img>的usemap要加#
area如果使用了href属性那么alt一定要有值

Fire4EVER · 发表于 2020-6-19 16:37:38

昵称_cwb · 发表于 2020-8-24 09:43:59

查看

ingram123 · 发表于 2020-12-15 09:18:51

natapon · 发表于 2021-1-8 13:00:57

回复看看看

只想白嫖 · 发表于 2021-1-19 09:45:02

Bright06 · 发表于 2021-3-3 12:32:47

鱿鱼追不上我 · 发表于 2021-3-9 00:16:27

O2H2O · 发表于 2021-7-8 10:53:39

要注意啥

心驰神往 · 发表于 2021-8-3 09:18:39

看看

沈点心 · 发表于 2021-8-24 15:10:09

归林22 · 发表于 2021-10-21 14:46:22

账号		自动登录	找回密码
密码			立即注册

[学习笔记] 026 - 回眸一笑百媚生

马上注册，结交更多好友，享用更多功能^_^

本帖被以下淘专辑推荐: