0 0 9 5 - 手动打造炒鸡提示图层

不二如是 · 发表于 2017-3-24 16:05:50

购买主题 已有 3 人购买 本主题需向作者支付 5 鱼币 才能浏览

庚午 · 发表于 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>

复制代码

庚午 · 发表于 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>

复制代码

幽梦三影 · 发表于 2018-9-15 14:40:32

本帖最后由幽梦三影于 2018-9-15 15:32 编辑

为什么tip的width和height不设置100%就不能居中提示框
tip-content设置 left:50% 为什么恰好居中呢？不是稍靠右么
关于height width 100% 以及position一直很模糊

爱学习的懒懒君 · 发表于 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元素的一般，这样本来在偏右位置又回来元素一半宽度，正好居中。

账号		自动登录	找回密码
密码			立即注册

不二如是不二如是当前离线 UID 378930 日志相册贡献荣誉积分 53754 狗仔卡	发表于 2017-3-24 16:05:50 \| 显示全部楼层 \|阅读模式购买主题已有 3 人购买本主题需向作者支付 5 鱼币才能浏览本帖被以下淘专辑推荐: · HTML5 & CSS3 - 庖丁解牛\|主题: 205, 订阅: 34
	想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
	回复使用道具举报置顶卡千斤顶显身卡

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

本帖被以下淘专辑推荐: