视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
如何实现chrome浏览器新标签页的效果_html/css_WEB-ITnose
2020-11-27 16:31:21 责编:小采
文档
 CSS Chrome

我想做一个类似chrome浏览器 新标签页的效果

遇到有3个问题,望大家指导

1.超链接
上面是图片 下面是文字
点中图片和文字都可以跳转到指定页面

可是我看标签下不能使用标签
这种效果如果做出

是不是该这样?





  • 2.图片自适应窗口大小
    看了网上许多图片自适应窗口的例子
    可是chrome这种效果还是模拟不出

    3.点击超链接图片时
    会有深灰色背景
    这种效果css怎么做出


    回复讨论(解决方案)

    1.就那样就行
    2.body尺寸设为百分比,img尺寸设为百分比,就是说img及其上级标签都未百分比尺寸就可以了
    3.用半透明的层遮盖一下不就有灰色效果了

    1.就那样就行
    2.body尺寸设为百分比,img尺寸设为百分比,就是说img及其上级标签都未百分比尺寸就可以了
    3.用半透明的层遮盖一下不就有灰色效果了

    继续请教

    针对问题2. 我也是用百分比设置尺寸
    可是我发现 chrome浏览器在最大化和普通窗口下的图片长度占的百分比会不一致
    这是怎么实现的?

    针对问题3. 能告诉再详细点吗,我不是很明白

    1.就那样就行
    2.body尺寸设为百分比,img尺寸设为百分比,就是说img及其上级标签都未百分比尺寸就可以了
    3.用半透明的层遮盖一下不就有灰色效果了

    3 我做出来了
    用opacity设置透明度

    2 还是有疑惑


    1.就那样就行
    2.body尺寸设为百分比,img尺寸设为百分比,就是说img及其上级标签都未百分比尺寸就可以了
    3.用半透明的层遮盖一下不就有灰色效果了

    3 我做出来了
    用opacity设置透明度

    2 还是有疑惑

    用meta 改一下不同宽度调用的CSS文件


    1.就那样就行
    2.body尺寸设为百分比,img尺寸设为百分比,就是说img及其上级标签都未百分比尺寸就可以了
    3.用半透明的层遮盖一下不就有灰色效果了

    3 我做出来了
    用opacity设置透明度

    2 还是有疑惑
    实在不行就window的resize事件中js获取页面的尺寸,然后设置img的width,height,并不复杂,js获取页面尺寸的代码百度搜一下就有了



    1.就那样就行
    2.body尺寸设为百分比,img尺寸设为百分比,就是说img及其上级标签都未百分比尺寸就可以了
    3.用半透明的层遮盖一下不就有灰色效果了

    3 我做出来了
    用opacity设置透明度

    2 还是有疑惑
    实在不行就window的resize事件中js获取页面的尺寸,然后设置img的width,height,并不复杂,js获取页面尺寸的代码百度搜一下就有了

    ok
    我另外查了网上,还可以用js获取屏幕尺寸,调用不用的css
    问题解决,谢谢

    下载本文
    显示全文
    专题