正文

js点击事件 登录

IP云
IP云V管理员/6 阅读
08/14
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/login.css"/>
<script type="text/javascript">
window.onload=function(){
var btn=document.querySelector("button");
btn.onclick=function(){
var box=document.querySelector(".box");
box.style.display="flex";
}
var close=document.querySelector(".close");
close.onclick=function(){
var box=document.querySelector(".box");
box.style.display="none";
}
}
// document.querySelectorAll() 找全部
// 配合 遍历使用 找到所以button
// document.querySelector()找一个
</script>
</head>
<body>
<button type="button">显示登录框</button>
<div class="box">
<div class="content">
<span class="close">&times;</span>
</div>
</div>
</body>
</html>

*{
margin: 0;
padding: 0;
}
body,
.box{
width: 100%;
height: 600px;
}
body {
position: relative;
}
.box{
position: absolute;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.333);
display: flex;
justify-content: space-around;
align-items: center;
display: none;
}
.box .content .close{
float: right;
width: 16px;
display: block;
}
.box .content{
width: 750px;
height: 380px;
background-color: #FFFFFF;
}

// document.querySelectorAll() 找全部
// 配合 遍历使用 找到所以button
// document.querySelector()找一个
面试题：

26. 行内元素有哪些?块级元素有哪些?CSS 的盒模型
(1) 块级元素：div p h1 h2 h3 h4 form ul
(2) 行内元素: a b br i span input select
(3) Css 盒模型:内容，border ,margin，padding
27. 列出 display 的值，说明他们的作用。
(1) block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
(2) none 元素不显示，并从文档流中移除。
(3) inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
(4) inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。
(5) list-item
象块类型元素一样显示，并添加样式列表标记。
(6) table 此元素会作为块级表格来显示。
(7) inherit 规定应该从父元素继承 display 属性的值。
28. position 的值，relative 和 absolute 定位原点
(1) absolut 生成绝对定位的元素，相对于值不为 static 的第一个父元素进行定位。
(2) fixed （老 IE 不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。
(3) relative 生成相对定位的元素，相对于其正常位置进行定位。
(4) static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index
声明）。
(5) inherit 规定从父元素继承 position 属性的值。
29. 页面导入样式时，使用 link 和@import 有什么区别
(1) link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务；@import 属于 CSS 范
畴，只能加载 CSS。
(2) link 引用 CSS 时，在页面载入时同时加载；@import 需要页面网页完全载入以后加载。
(3) link 是 XHTML 标签，无兼容问题；@import 是在 CSS2.1 提出的，低版本的浏览器（IE5 以
下）不支持。
(4) link 支持使用 Javascript 控制 DOM 去改变样式；而@import 不支持。30. 解释下浮动和它的工作原理
(1) 浮动出现的最开始出现的意义是用来让文字环绕图片而已。
(2) float 可以自动包裹元素。float 会导致高度塌陷。
(3) float 为什么会导致高度塌陷：元素含有浮动属性 –> 破坏 inline box –> 破坏 line box 高度
–> 没有高度 –> 塌陷。
(4) 什么时候会塌陷：当标签里面的元素只要样子没有实际高度时会塌陷。浮动会脱离文档流。产
生自己的块级格式化上下文。