您的位置：首页 > Web前端

网易公开课学习-认识前端，从一个弹窗案例说起

2016-06-28 20:10 537 查看

你看的到的都是前端工程师开发的。

页面制作：ps切图+html+css

组件化：生产+渠道+用户

页面架构：布局解决方案+响应式+规范与模块化···

产品前端架构：协作流程+技术选型+开发实践

Alert.html源代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>弹窗</title>
<link rel="stylesheet" type="text/css" href="Alert.css">
</head>
<body>
<div class="layer" style="display:none">
<h2>提示</h2>
<p>认识前端-从一个弹窗案例说起。
愿有岁月可回首，且以深情共白头。</p>
<button>ok</button>
</div>
<button id="button">点击</button>
<script type="text/javascript" src="Alert.js"></script>
</body>
</html>

Alert.css源代码：
*{margin: 0;padding: 0;}
.layer{
width: 300px;
padding: 20px;
background: #fff;
border: 1px solid #bbb;
border-radius: 10px;
box-shadow: 0 3px 5px #bbb;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.layer h2{
font-size: 16px;
border-bottom: 1px solid #ddd;
padding-bottom: 5px;
margin-bottom: 20px;
}
.layer p{
font-size: 14px;
text-indent: 2em;
line-height: 1.5;
}
.layer button{
display: block;
width: 100px;
height: 30px;
line-height: 30px;
margin: 30px auto 0;
text-align: center;
background: #333;
color: #fff;
border: 0;
border-radius: 5px;
cursor: pointer;
}

Alert.jsl源代码：

document.getElementById("button").addEventListener(
"click",function(){
document.querySelector(".layer").style.display="block";
}
);
document.querySelector(".layer button").addEventListener(
"click",function(){
document.querySelector(".layer").style.display="none";
}
);

链接：http://study.163.com/course/courseLearn.htm?courseId=1054012#/learn/live?lessonId=1003427033&courseId=1054012

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航