day15 CSS JS DOM初探
居中 line-hight 是上下
text-line 是左右
实现一个返回顶部的功能：
1 先写好CSS
2 写动作JS
写一个悬浮菜单：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
margin: 0 auto;
height: 48px;
width:980px;
background-color: aquamarine;
color: coral;
position: fixed;
top: 0;
left: 20px;
right: 20px;
line-height: 48px;
text-align: center;
}
.pg-body{
margin: 0 auto;
background-color: #dddddd;
width:980px;
height: 5000px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="pg-header">此处为菜单</div>
<div class="pg-body">此处为内容</div>
</body>
</html>
效果：
上下滚动菜单始终固定在顶部
实现一个点赞按钮的效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="position: relative;width: 500px;height: 200px;border: 1px solid red; margin: 0 auto;">
<div style="position: absolute;left: 0;bottom: 0;width: 50px;height: 50px;background-color: aquamarine"></div>
</div>
<div style="position: relative;width: 500px;height: 200px;border: 1px solid red; margin: 0 auto;">
<div style="position: absolute;right: 0;top: 0;width: 50px;height: 50px;background-color: aquamarine"></div>
</div>
</body>
</html>
效果：
实现一个遮罩层，就是平时的弹出选择框，即模态框：
加透明度：
opacity 设置遮罩层的透明度 0-1 的范围
三层
设置一个值，谁的大谁在上面：
z-index
实践：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="background-color: white;
/*display: none;*/
z-index: 10;
position: fixed;
height: 400px;
width: 500px;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -200px;
border: 1px brown;
">
<div style="display: inline">姓名</div><input type="text"/>
<div style="display: inline">密码</div><input type="text"/>
</div>
<div style="background-color: blue;
/*display: none;*/
position: fixed;
z-index: 9;
top:0;
bottom: 0;
left: 0;
right: 0;
opacity: 0.5;"></div> <div style="height: 5000px;background-color: coral;"> hehhehhehe</div>
</body>
</html>
效果：
图片的问题：
overflow
可以设置隐藏或者自动生成滚动条
设置上右下左的间隔：
伪类：
鼠标移到后应用：
当鼠标移到当前标签上时，就会使得下面的css生效
hover
实践：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
position: fixed; /* 设置为固定位置*/
right: 0; /*距离右边0*/
left: 0; /*距离左边0*/
top: 0; /*距离上边0*/
height: 48px; /*高度为48像素*/
background-color: #2459a2; /*背景颜色*/
line-height: 48px; /*设置上下居中，和高度一样才能居中*/
}
.pg-body{
margin-top: 50px; /*设置距离顶部50像素，避免menu挡住body*/
}
.w{
width: 980px; /*全局宽度 980像素*/
margin: 0 auto; /*自动居中*/
}
.pg-header .menu{
display: inline-block; /*设置标签为行内块级混合标签，可以设置高度和宽度*/
padding: 0 10px 0 10px; /*设置标签上下左右的距离*/
color: white; /*字体颜色*/
}
.pg-header .menu:hover{ /*此属性是当鼠标移动到此时应用*/
background-color: dodgerblue; /*背景颜色*/
}
</style>
</head>
<body>
<div class="pg-header">
<div class="w">
<a class="logo">LOGO</a>
<a class="menu">段子</a>
<a class="menu">1024</a>
<a class="menu">42区</a>
</div>
</div>
<div class="pg-body">
<div class="w">ddddd</div>
</div>
</body>
</html>
渐变色 就是一个非常细的图片一直自动堆叠
高度增加 也是自动堆叠
控制图片怎么堆叠，使用下面的
其实图标都是只用一个图，然后通过调整
就能显示一个图片不同的位置
实践：
<body>
<div style="height: 100px;"></div>
<div style="height: 20px;width:20px;background-image: url(icon_18_118.png);border: 1px solid red"></div>
</body>
显示不同位置：
<body>
<div style="height: 100px;"></div>
<div style="height: 20px;
width:20px;
background-image: url(icon_18_118.png);
background-position-x: 0px;
background-position-y: -58px;
border: 1px solid red"></div>
</body>
相对的位置，如点赞的图案：
有个问题，图片会挡住输入，修改后就好了
实践：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="user-input" style="padding: 5px;">
<div style="display: inline-block;width: 100px;text-align: right;">账号：</div>
<div style="display: inline-block;width: 300px;height:30px;position: relative;">
<input type="text" style="height: 30px;
width: 270px;
padding-right: 30px"></input>
<span style="position:absolute;
right: 6px;
top:10px;
background-image: url(user.jpg);
height: 16px;
width: 16px;
display: inline-block"></span>
</div>
</div>
<div class="passwd-input" style="padding: 5px;">
<div style="display: inline-block;width: 100px;text-align: right;">这是密码：</div>
<div style="display: inline-block;width: 300px;height:30px;position: relative;">
<input type="text" style="height: 30px;
width: 270px;
padding-right: 30px"></input>
<span style="position:absolute;
right: 6px;
top:10px;
background-image: url(i_pwd.jpg);
height: 16px;
width: 16px;
display: inline-block"></span>
</div>
</div>
</body>
</html>
开始 javascript
一门独立的语言
和java没半毛钱关系
helloworld
写代码的位置，两种形式：
1在html 文件中：
2 单独文件，引入到html文件中：
先执行js 从上往下读运行
js没有完成之前 网页就一直等待js完成，这样对用户就不友好
解决办法就是把js放在html尾部
写在body 内部的最下面：
写的时候先写 var
斟酌以后确实是全局，再去掉var
定义函数：
在控制台打印日志：
console.log(1)
根据id找到内容：
获取内容：
获取子列表：
拼接字符串：
做一个滚动条效果：
实践：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function func() {
var tag = document.getElementById('i1');
var content = tag.innerText;
var f = content.charAt(0);
var l = content.substring(1,content.length)
var new_content = l + f;
tag.innerText = new_content;
}
setInterval('func()',500);
</script>
</head>
<body>
<div id="i1">欢迎老男孩莅临指导 </div>
</body>
</html>
效果：
join 添加分隔符
循环：
DOM
做了一个动作就是把文档转换为一个对象
改变数据：
document.getElementById('i1').innerText = 'new数据'
实现模态框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.c1{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: black;
opacity: 0.6;
z-index: 9;
}
.c2{
width: 500px;
height: 400px;
background-color: white;
position: fixed;
left: 50%;
right: 50%;
top: 50%;
margin-left: -250px;
margin-top: -100px;
z-index: 10;
}
</style>
</head>
<body>
<div>
<input type="button" value="添加" onclick="ShowModel();"/>
</div>
<!--遮罩层 -->
<div id="i1" class="c1 hide"></div>
<!-- 弹出窗-->
<div id="i2" class="c2 hide">
<p>
<input type="text"/>
<input type="text"/>
</p>
<p>
<input type="button" value="取消" onclick="HideModel();"/>
<input type="button" value="确定" onclick="HideModel();"/>
</p>
</div>
<script>
function ShowModel() {
document.getElementById('i1').classList.remove('hide')
document.getElementById('i2').classList.remove('hide')
}
function HideModel() {
document.getElementById('i1').classList.add('hide')
document.getElementById('i2').classList.add('hide')
}
</script>
</body>
</html>
效果：
实现一个全选和取消的功能：
分号必须要加，因为线上的时候会把js文件成为一行，必须用分好来断句， 生成一行就是为了节约空间，有专门的压缩工具
实现一个后台管理的简单页面，需要点击菜单显示菜单，可以全选，反选，可以点击有模态框效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>管理</title>
<style>
.pg-header{
margin: 0 auto;
height: 48px;
/*width:980px;*/
background-color: #2459a2;
color: coral;
position: fixed;
top: 0;
left: 0;
right: 0;
line-height: 48px;
z-index: 10;
}
.pg-header .logo{
display: inline-block;
margin-left: 50px;
}
.pg-body{
margin-top: 50px;
width:1080px;
height: 2000px;
}
.pg-body .menu{
text-align: center;
width:200px;
border: 1px solid red;
padding: 10px;
background-color: aquamarine;
float: left;
margin: 5px;
}
.pg-body .menu .every-menu{
text-align: center;
display: inline-block;
border: 1px solid red;
width: 180px;
height: 50px;
margin: 5px;
padding: 2px;
line-height: 50px;
}
.pg-body .info{
float: left;
margin: 5px;
border: 1px solid red;
width: 800px;
height: 500px;
}
.pg-body .info .info-menu{
margin: 10px;
}
.pg-body .info-body{
margin: 5px;
/*width: 650px;*/
height: 400px;
border: 1px solid red;
text-align: center;
}
.go-header{
position: fixed;
bottom:20px;
right:20px;
width: 80px;
height: 80px;
background-color: coral;
color: white;
z-index: 11;
cursor: pointer;
}
.hide{
display: none;
}
.c1{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: black;
opacity: 0.6;
z-index: 9;
}
.c2{
width: 500px;
height: 400px;
background-color: white;
position: fixed;
left: 50%;
right: 50%;
top: 50%;
margin-left: -250px;
margin-top: -100px;
z-index: 10;
}
.hide-menu{
display: none;
}
.item .header{
height: 35px;
background-color: #2459a2;
color: white;
line-height: 35px;
} </style>
</head>
<body>
<div class="pg-header">
<a class="logo">LOGO</a>
</div> <div class="go-header" onclick="GoTop();">
<img src="back_top.png" alt="美女" title="返回顶部">
</div> <!--遮罩层 -->
<div id="i1" class="c1 hide"></div>
<!-- 弹出窗-->
<div id="i2" class="c2 hide">
<p>
<div style="margin: 5px;">
<div style="display: inline-block;width: 60px;text-align: right">IP:</div>
<input type="text"/>
</div>
<div style="margin: 5px;">
<div style="display: inline-block;width: 60px;text-align: right">主机:</div>
<input type="text"/>
</div>
</p>
<p>
<div style="display: inline-block;width: 200px;text-align: center">
<input type="button" value="取消" onclick="HideModel();"/>
<input type="button" value="确定" onclick="HideModel();"/>
</div>
</p>
</div> <div class="pg-body">
<div class="menu">
<div class="item">
<div id='m1' class="header" onclick="ChangeMenu('m1');">菜单1</div>
<div class="content hide-menu">
<div>内容1</div>
<div>内容1</div>
<div>内容1</div>
</div>
</div>
<div class="item">
<div id='m2' class="header" onclick="ChangeMenu('m2');">菜单2</div>
<div class="content hide-menu">
<div>内容2</div>
<div>内容2</div>
<div>内容2</div>
</div>
</div>
<div class="item">
<div id='m3' class="header" onclick="ChangeMenu('m3');">菜单3</div>
<div class="content hide-menu">
<div>内容3</div>
<div>内容3</div>
<div>内容3</div>
</div>
</div>
<div class="item">
<div id='m4' class="header" onclick="ChangeMenu('m4');">菜单4</div>
<div class="content hide-menu">
<div>内容4</div>
<div>内容4</div>
<div>内容4</div>
</div>
</div>
</div> <div class="info">
<div class="info-menu">
<input type="button" value="全选" onclick="CheckAll();"> </input>
<input type="button" value="取消" onclick="CancleAll();"> </input>
<input type="button" value="反选" onclick="ReCheckAll();"> </input>
<input type="button" value="添加" onclick="ShowModel();"> </input>
</div>
<div class="info-body">
<div>
<table>
<thead>
<tr>
<td>选择</td>
<td>主机</td>
<td>IP</td>
<td>备注</td>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox"/></td>
<td>web101</td>
<td>192.168.8.5</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>web102</td>
<td>192.168.8.6</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>web103</td>
<td>192.168.8.7</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>web104</td>
<td>192.168.8.8</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>web105</td>
<td>192.168.8.9</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div style="clear: both;"></div>
</div>
<script>
function CheckAll() {
var tbody = document.getElementById('tb');
var tr_list = tbody.children;
for (var i = 0; i < tr_list.length; i++) {
var curren_tr = tr_list[i];
var checkbox = curren_tr.children[0].children[0];
checkbox.checked = true;
}
} function CancleAll() {
var tbody = document.getElementById('tb');
var tr_list = tbody.children;
for (var i = 0; i < tr_list.length; i++) {
var curren_tr = tr_list[i];
var checkbox = curren_tr.children[0].children[0];
checkbox.checked = false;
}
} function ReCheckAll() {
var tbody = document.getElementById('tb');
var tr_list = tbody.children;
for (var i = 0; i < tr_list.length; i++) {
var curren_tr = tr_list[i];
var checkbox = curren_tr.children[0].children[0];
if (checkbox.checked) {
checkbox.checked = false;
}else{
checkbox.checked = true;
}
}
} function GoTop() {
document.body.scrollTop = 0;
} function ShowModel() {
document.getElementById('i1').classList.remove('hide')
document.getElementById('i2').classList.remove('hide')
} function HideModel() {
document.getElementById('i1').classList.add('hide')
document.getElementById('i2').classList.add('hide')
} function ChangeMenu(nid){
var current_header = document.getElementById(nid);
var item_list = current_header.parentElement.parentElement.children;
for(var i=0;i<item_list.length;i++){
var current_item = item_list[i];
current_item.children[1].classList.add('hide-menu');
}
current_header.nextElementSibling.classList.remove('hide-menu');
}
</script>
</body>
</html>
效果：
day15 CSS JS DOM初探的更多相关文章
- HTML,CSS,JS,DOM,jQuery
HTML 超链接访问顺序 a:link-->a:visited-->a:hover-->a:active.(有顺序) link:表示从未访问过的链接的样式 visited:表示已经访 ...
- 转战JS(1) 初探与变量类型、运算符、常用函数与转换
转战JS(1)初探与变量类型.运算符.常用函数与转换 做为一名.NET后台开发人员,正考滤向Web前端开发转型,之前也写过一代前端代码,可是当再回头看JS,并有转向它的意愿的时候,突然发现:原来JS不 ...
- 1. web前端开发分享-css,js入门篇
关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...
- css+js+html基础知识总结
css+js+html基础知识总结 一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式) ...
- web前端开发分享-css,js入门篇（转）
转自:http://www.cnblogs.com/jikey/p/3600308.html 关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人 ...
- jQuery中的ready方法及实现按需加载css,js
模拟jQuery中的ready方法及实现按需加载css,js 一.ready函数的实现 经常用jQuery类库或其他类库中的ready方法,有时候想想它们到底是怎么实现的,但是看了一下jQuery中的 ...
- Js DOM 详解
DOM事件类 基本概念 DOM事件的级别 1.DOM0 element.onclick = function(){} 2.DOM2 element.addEventListener("cli ...
- 用html+css+js实现选项卡切换效果
文章转载自:http://tongling.github.io/JSCards/ 用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材 ...
- web前端开发分享-css,js入门篇
学习没有捷径,但学习是有技巧与方法. 一,css入门篇: 推荐书籍:css哪些事儿,精通css. 理由:css那些事儿,他是一本介绍css基础类的书,是入门的经典读物. 系统的介绍了css的选 ...
随机推荐
- 锁丶threading.local丶线程池丶生产者消费者模型
一丶锁 线程安全: 线程安全能够保证多个线程同时执行时程序依旧运行正确, 而且要保证对于共享的数据,可以由多个线程存取,但是同一时刻只能有一个线程进行存取. import threading v = ...
- 常用的Homebrew命令
一些常用的Homebrew命令: 更新:brew update 安装包信息检索:brew info 安装包搜索:brew search foo 安装包列表:brew list 过时信息:brew ou ...
- Linux命令行环境与桌面环境护切换
1.前言 在大部分情况下,我们在使用Linux时习惯使用命令行环境,但是有时候也还是会使用到安装桌面环境,所以在这里介绍一下如何给没有安装桌面环境的系统安装桌面环境.以Centos 6.5 为例演示一 ...
- CST,CET,UTC,GMT,DST,Unix时间戳几种常见时间概述与关系（转）
转自:http://www.cnblogs.com/frontendBY/p/5215785.html 1.UTC: Universal Time Coordinated 协调世界时,又称世界标准时间 ...
- PHP重定向的三个方法
js的重定向方法:location.href=目标 url(如 https:www.baidu.com); php的重定向方法: header("location: https:www.ba ...
- PHP与MYSQL结合操作——文章发布系统小项目（实现基本增删查改操作）
php和mysql在一起几十年了,也是一对老夫老妻了,最近正在对他们的爱情故事进行探讨,并做了一个很简单的小东西——文章发布系统,目的是为了实现mysql对文章的基本增删查改操作 前台展示系统有:文章 ...
- IDA逆向：数组的逆向
阅读<IDA Pro权威指南>第八章,整理的一些笔记,作为逆向的基础,可能有很多认识不足. //全局分配数组 *************************************** ...
- Codeforces 802I Fake News (hard)
Codeforces 802I 题意:统计所有不同子串出现次数的平方的和. 想法:建一个SAM,$Ans=\sum (step[i]-step[fa[i]])*right[i]^2$ #include ...
- 关于添加IBDesignable实时building很卡问题的解决
公共库加了@IBDesignable,可以实时预览图标 但是有个问题,每次打开XIB的时候都会Building,会造成电脑会很卡 有个解决方法,在xcode的Editor下拉框取消auto refre ...
- 【BZOJ4196】[NOI2015] 软件包管理器（树链剖分）
点此看题面 大致题意: 有\(n\)个软件包,它们的依赖关系形成一棵树.现在,问你安装或卸载一个软件包,会影响多少个软件包的安装状态. 树链剖分 这道题应该是 树链剖分 算法比较入门的题目吧. 对于安 ...