鱼C论坛

 找回密码
 立即注册
查看: 2546|回复: 4

[庖丁解牛] 0 0 9 5 - 手动打造炒鸡提示图层

[复制链接]
发表于 2017-3-24 16:05:50 | 显示全部楼层 |阅读模式
购买主题 已有 3 人购买  本主题需向作者支付 5 鱼币 才能浏览

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-3-6 22:26:39 | 显示全部楼层
<!DOCTYPE html>
<html lang='en'>
<head>
        <meta charset='utf-8'>
        <title>Tip Tip</title>
        <style type='text/css'>
                html,body{height:100%;width:100%;}
                body{background:#ec4f33;margin:33px;}
                body p{font-size:33px;font-family:'kaiti';text-align:left;text-indent:2em;}
                #tip{position:fixed;height:100%;width:100%;top:0;left:0;z-index:555;}
                #tip-content{position:absolute;background:rgba(0,245,255,.9);z-index:55;box-sizing:border-box;
                                        margin-left:33%;width:600px;height:600px;}
                #tip-content button{margin-left:23%;padding:22px 34px;border-radius:13px;cursor:pointer;outline:none;}
                #tip-content h1{text-align:center;padding-bottom:12px;border-bottom:3px sloid #FFF;}
                #tip-content p{text-align:center;text-indent:2em;}
                #tip-content button:hover{background:#FFDEAD;}
                #tip{
            transition: all .6s;
            visibility: hidden;
            opacity: 0;
        }
        #tip.show{
            visibility: visible;
            opacity: 1;
        }

        </style>
</head>
<body>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('a, #close, #tip-bg').click(function(e){
            e.preventDefault(); //阻止默认点击事件
            $('#tip').toggleClass('show'); //切换show类
            $('#tip-content').toggleClass('show');
        });
    });
</script>
<p>第一个方法是,好点子应该以人为本。周其仁举了德国数学家<a href=''>莱布尼茨</a>的例子,他当年花了12年,才改进了法国人原来只能做加减法的计算器,变成了可以做加减乘除。为什么莱布尼茨会做这些呢?那个时候德国没有工业化,人力成本非常低,计算对人们来说还是份不用风吹日晒的好工作。但是莱布尼茨却不这么认为,他觉得,重复性的活动不是人应该做的,人应该要去做创造性的工作,这就是我们今天说的“以人为本”的想法。想想看,我们今天很火的机器人、人工智能,最开始也是想要解放人类才研究的。</p><br><br>
   <p> 第二个方法是,好点子应该先针对一个问题,然后遵循科学原理,顺藤摸瓜找到解决办法。周其仁提到,他曾经去硅谷考察了二三十家高科技企业,考察过程当中他发现一款电子眼镜就是这么研发出来的。这款电子眼镜想解决的问题就是,帮助盲人“看”世界,当然了这个“看”是加引号的。那它遵循的科学原理是什么呢?科学家发现,人能够看见外界事物,并不是通过眼睛,眼睛只是外部图像的接收器,真正成像是在大脑。盲人的眼睛虽然丧失了功能,外部图像无法接收进来,但是大脑还是能成像的。知道了原理之后,研发者又发现,人的舌头底下是最敏感的,所以他们就通过在盲人的舌头底下夹一个电子传感器,来解决外部图像的接收问题。当然了在这当中,还有无数的细节,但比细节更重要的是你的想法。</p><br><br>
    <p>第三个方法是,好点子是可以“平移”的,一个领域里的好点子,也许能够平移到很多不同的领域里去。举个例子,以色列周围的国家常常处于战争当中,而以色列又是个小国家,所以每天都面临着火箭炮满天飞的情况。于是以色列人发明了反火箭入侵系统,能够把经过的火箭弹打下来,还不造成其他损失。这个发明成功到什么地步呢,过去警报一响,以色列人全部都躲进防空洞。用了这个系统后,警报一响,民众反而抬头拿着手机拍天空,因为他们坚信一定能够打下来。后来这套系统经过改良,做成微型导弹放在血管里打血栓,效果也很好。所以,好的想法特别需要有抽象能力,可以平移到很多不同的领域,举一反三甚至是举一反十。
</p>
<div id='tip'>
        <div id='tip-bg'>
        </div>
        <div id='tip-content'>
         <h1>鱼C小百科</h1>
        <p>你们或许会问:<br>
        小甲鱼到底能坚持多久?<br>
        我说是一辈子,你信吗?<br>
        ……<br>
        最后<br>
        小甲鱼渴望和大家一起成长,<br>
        十年前我们仰望星空,<br>
        十年后我们将俯视大地。<br>
        未来的天空,<br>
        必将为我们留下一片灿烂的曙光!</p>
                <button id='show'>已阅,伴坛终老!</button>
        </div>
</div>
</body>
</html>
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-3-6 22:27:33 | 显示全部楼层
<!DOCTYPE html>
<html lang='en'>
<head>
        <meta charset='utf-8'>
        <title>Tip Tip</title>
        <style type='text/css'>
                html,body{height:100%;width:100%;}
                body{background:#ec4f33;margin:33px;}
                body p{font-size:33px;font-family:'kaiti';text-align:left;text-indent:2em;}
                #tip{position:fixed;height:100%;width:100%;top:0;left:0;z-index:555;}
                #tip-content{position:absolute;background:rgba(0,245,255,.9);z-index:55;box-sizing:border-box;
                                        margin-left:33%;width:600px;height:600px;}
                #tip-content button{margin-left:23%;padding:22px 34px;border-radius:13px;cursor:pointer;outline:none;}
                #tip-content h1{text-align:center;padding-bottom:12px;border-bottom:3px sloid #FFF;}
                #tip-content p{text-align:center;text-indent:2em;}
                #tip-content button:hover{background:#FFDEAD;}
                #tip{
            transition: all .6s;
            visibility: hidden;
            opacity: 0;
        }
        #tip.show{
            visibility: visible;
            opacity: 1;
        }

        </style>
</head>
<body>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('a, #close, #tip-bg').click(function(e){
            e.preventDefault(); //阻止默认点击事件
            $('#tip').toggleClass('show'); //切换show类
            $('#tip-content').toggleClass('show');
        });
    });
</script>
<p>第一个方法是,好点子应该以人为本。周其仁举了德国数学家<a href=''>莱布尼茨</a>的例子,他当年花了12年,才改进了法国人原来只能做加减法的计算器,变成了可以做加减乘除。为什么莱布尼茨会做这些呢?那个时候德国没有工业化,人力成本非常低,计算对人们来说还是份不用风吹日晒的好工作。但是莱布尼茨却不这么认为,他觉得,重复性的活动不是人应该做的,人应该要去做创造性的工作,这就是我们今天说的“以人为本”的想法。想想看,我们今天很火的机器人、人工智能,最开始也是想要解放人类才研究的。</p><br><br>
   <p> 第二个方法是,好点子应该先针对一个问题,然后遵循科学原理,顺藤摸瓜找到解决办法。周其仁提到,他曾经去硅谷考察了二三十家高科技企业,考察过程当中他发现一款电子眼镜就是这么研发出来的。这款电子眼镜想解决的问题就是,帮助盲人“看”世界,当然了这个“看”是加引号的。那它遵循的科学原理是什么呢?科学家发现,人能够看见外界事物,并不是通过眼睛,眼睛只是外部图像的接收器,真正成像是在大脑。盲人的眼睛虽然丧失了功能,外部图像无法接收进来,但是大脑还是能成像的。知道了原理之后,研发者又发现,人的舌头底下是最敏感的,所以他们就通过在盲人的舌头底下夹一个电子传感器,来解决外部图像的接收问题。当然了在这当中,还有无数的细节,但比细节更重要的是你的想法。</p><br><br>
    <p>第三个方法是,好点子是可以“平移”的,一个领域里的好点子,也许能够平移到很多不同的领域里去。举个例子,以色列周围的国家常常处于战争当中,而以色列又是个小国家,所以每天都面临着火箭炮满天飞的情况。于是以色列人发明了反火箭入侵系统,能够把经过的火箭弹打下来,还不造成其他损失。这个发明成功到什么地步呢,过去警报一响,以色列人全部都躲进防空洞。用了这个系统后,警报一响,民众反而抬头拿着手机拍天空,因为他们坚信一定能够打下来。后来这套系统经过改良,做成微型导弹放在血管里打血栓,效果也很好。所以,好的想法特别需要有抽象能力,可以平移到很多不同的领域,举一反三甚至是举一反十。
</p>
<div id='tip'>
        <div id='tip-bg'>
        </div>
        <div id='tip-content'>
         <h1>鱼C小百科</h1>
        <p>你们或许会问:<br>
        小甲鱼到底能坚持多久?<br>
        我说是一辈子,你信吗?<br>
        ……<br>
        最后<br>
        小甲鱼渴望和大家一起成长,<br>
        十年前我们仰望星空,<br>
        十年后我们将俯视大地。<br>
        未来的天空,<br>
        必将为我们留下一片灿烂的曙光!</p>
                <button id='show'>已阅,伴坛终老!</button>
        </div>
</div>
</body>
</html>
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-9-15 14:40:32 | 显示全部楼层
本帖最后由 幽梦三影 于 2018-9-15 15:32 编辑

为什么tip的width和height不设置100%就不能居中提示框
tip-content设置 left:50% 为什么恰好居中呢?不是稍靠右么
关于height width 100% 以及position一直很模糊
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-10-7 16:26:28 | 显示全部楼层
幽梦三影 发表于 2018-9-15 14:40
为什么tip的width和height不设置100%就不能居中提示框
tip-content设置 left:50% 为什么恰好居中呢?不是 ...

tip的width和height设成100%就是和父元素长宽相同,也就是body元素,这样才能使背景半透明蒙版全部覆盖浏览器显示部分;
如果不设置,其子元素因为全部不在文档流中造成内容塌陷,长宽变为零就没法使用 left:50%定位了,也不能使用蒙版了;
tip-content不但设置了left:50%还设置了margin-left,值基本上是tip-content元素的一般,这样本来在偏右位置又回来元素一半宽度,正好居中。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-11-24 21:17

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表