>  기사  >  웹 프론트엔드  >  如何实现chrome浏览器 新标签页的效果_html/css_WEB-ITnose

如何实现chrome浏览器 新标签页的效果_html/css_WEB-ITnose

WBOY
WBOY원래의
2016-06-21 09:43:362096검색

CSS Chrome

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

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

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

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

    是不是该这样?

        
    • 如何实现chrome浏览器 新标签页的效果_html/css_WEB-ITnose

    •   



      • 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
        问题解决,谢谢

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.