前端开发-微博、微信等分享制作

本文介绍了如何使用HTML的map元素创建响应式分享图。通过制作分享图,设置usemap属性,定义map元素的分区响应,利用area的href和shape属性实现点击跳转。在CSS中使用相对定位保持图元位置不变。
摘要由CSDN通过智能技术生成

本文利用HTML中的map元素,创建客户分区响应图。步骤如下:
1、首先制作分享图:这里写图片描述

2、在HTML文档中插入图片:usemap 属性值必须为”#+map元素的name值或id”值

3、利用map元素为图制作分区响应:无需使用a元素创建超链接,area的属性中一类是用来图像区域被用户点击后导航到相应的URL*,如href、target等;另一类能表示出用户可点击的各个图像区域,由shape与coord属性共同作用:shape属性用来确定分区的形状,本例使用shape=“rect”(矩形区域),则规定区域的坐标coord=“x1,y1,x2,y2”,具体查看[w3school]。

4、在CSS样式中定位方式使用相对浏览器窗口定位,使得无论滚动条无论怎么滚动,相对浏览器的窗口的位置不变

htmL代码
<div class="fenxiang">
    <
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值