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

026 - 回眸一笑百媚生

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

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



http://xxx.fishc.com/forum/201803/20/094616suu10rovsa60kazi.jpg

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

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

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

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

关注本系列推送（最下方有订阅方式）的鱼油，会享受到一个福利：
会比正常推送，早一个时间节点，看到还未出炉的美味课程


哈哈，废话不多说了，#敲黑板时刻！{:10_281:}



在线视频：传送门



课程思维导图


猛戳http://xxx.fishc.com/forum/201803/31/110408mxpszds1j1xxxahm.gif超清



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宝典：传送门

现在有几个点要注意：
**** Hidden Message *****
再次提醒，如果 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 块的第一个或者最后一个元素。



课后作业，完成了吗？

传送门



http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif

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



如果有收获，别忘了评分{:10_281:} ：

http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif

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

http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif



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

{:5_92:}

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

{:5_95:}

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

SaaS

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

{:5_102:}

药水哥 发表于 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

1

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

查看

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

1

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

回复看看看

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

11

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

{:10_254:}{:10_254:}{:10_254:}

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

{:9_231:}

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

要注意啥

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

看看

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

{:7_130:}

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

26
页: [1] 2
查看完整版本: 026 - 回眸一笑百媚生