py-day15_css+js_初
css+js_初
一、鼠标移动变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
position: fixed;
right: 1px;
left: 1px;
top: 0;
height:48px;
background-color: #2459a2;
line-height: 48px;
}
.pg-body{
margin-top: 50px;
}
.w{
width: 980px;
margin: 0 auto;
}
.pg-header .menu{
display: inline-block;
padding: 0 30px 0 30px;
color: white;
}
.pg-header .menu:hover{
background-color: blue;
}
/* .pg-header .menu:hover 当鼠标移动到当前标签时，以下css属性才生效*/
</style>
</head>
<body>
<div class="pg-header">
<div class="w">
<a class="logo">LOGO</a>
<a class="menu">全部</a>
<a class="menu">42区</a>
<a class="menu">段子</a>
<a class="menu">1024</a>
</div>
</div>
<div class="pg-body">
<div class="w">
abc
</div>
</div>
</body>
</html>
二、返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部—多层</title>
</head>
<body>
<div onclick="GoTop();"style="width: 50px;height: 40px;background-color: white;
position: fixed;
bottom: 20px;
right: 20px;
">返回顶部
</div>
<div style="height: 5000px;background-color: #dddddd;">
1234567890
</div>
<script>
function GoTop(){
document.body.scrollTop = 0;
}
</script>
</body>
</html>
三、赋新值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1">我是刘东</div>
<a>123</a>
<a>abc</a>
<a>123abc</a>
<script>
document.getElementById('i1');
document.getElementById('i1').innerText;
document.getElementById('i1').innerText = '新内容';
document.getElementsByTagName('a')[1];
document.getElementsByTagName('a')[1].innerText = '666';
tags = document.getElementsByTagName('a');
for(var i=0;i<tags.length;i++){tags[i].innerText=777;}
</script>
</body>
</html>
四、登录框内有用户密码图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 35px;width: 400px;position: relative;padding: 10px 0;">
<input type="text" style="height: 35px;width: 370px;padding-right: 30px;" />
<span style="display:inline-block;position: absolute;right: 10px;top: 20px;background-image: url(图片/i_name.jpg);height: 16px;width: 16px;"></span>
</div>
<div style="height: 35px;width: 400px;position: relative;">
<input type="text" style="height: 35px;width: 370px;padding-right: 30px;" />
<span style="display:inline-block;position: absolute;right: 10px;top: 10px;background-image: url(图片/i_pwd.jpg);height: 16px;width: 16px;"></span>
</div>
</body>
</html>
五、幻灯片循环显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="color: red;background-color: #BEBEBE;height: 40px;">
<h1 id="i1">欢迎光临-前来指导</h1>
</div>
<script>
function liu(){
//根据ID获取指定<div>标签的内容，定于局部变量接受
var tag = document.getElementById('i1')
//获取标签内部的内容
var content = tag.innerText;
//取字符串取第一个字符，赋值给f
var f = content.charAt(0);
//把第2个字符到最后一个字符赋值给g
var g = content.substring(1,content.length);
//把两个新赋的值加在一起
var new_content = g + f;
//重新赋值
tag.innerText = new_content;
}
setInterval('liu()',500);
</script>
</body>
</html>
六、定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
setInterval("alert(123)",5000) //创建定时器5秒弹出一次
</script>
</body>
</html>
七、头部固定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>头部固定</title>
<style>
.pg-header{
height: 48px;
background-color:black;
position: fixed;
top:0;
right: 0;
left: 0;
}
.pg-body{
background-color:#dddddd;
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="height: 100px;"></div>
<div style="background-image: url(icon_18_118.png);background-repeat: no-repeat;height:20px;width: 20px;border: 1px solid red;background-position-x: 0;background-position-y: -25px"></div>
</body>
</html>
九、多层折叠显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.c1{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: black;
opacity: 0.6;
z-index: 9;
}
.c2{
width: 500px;
height: 400px;
background-color: white;
position: fixed;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -250px;
z-index: 10;
}
</style>
</head>
<body>
<div>
<input type="button" value="添加" onclick="liu()" />
</div>
<!-- 遮罩层开始-->
<div id="i1" class="c1 hide"></div>
<!-- 遮罩层结束--> <!-- 弹出框开始-->
<div id="i2" class="c2 hide">
<p><input type="text" /></p>
<p><input type="text" /></p>
<p>
<input type="button" value="取消" onclick="dong()" />
<input type="button" value="确定" />
</p>
</div>
<!-- 弹出框结束-->
<script>
function liu(){
document.getElementById('i1').classList.remove('hide');
document.getElementById('i2').classList.remove('hide');
}
function dong(){
document.getElementById('i1').classList.add('hide');
document.getElementById('i2').classList.add('hide');
}
</script>
</body>
</html>
十、大图小框设置x/y选拉框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 200px;width: 300px;overflow: auto;">
<img src="1.jpg">
</div> <!-- hidden 隐藏 auto 出现上下拉框-->
</body>
</html>
十一、多层导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.item .header{
height: 35px;
background-color: #2459a2;
color: white;
line-height: 35px;
}
</style>
</head>
<body>
<div style="height: 48px"></div> <div style="width: 300px"> <div class="item">
<div id='i1' class="header" onclick="ChangeMenu('i1');">菜单1</div>
<div class="content">
<div>内容1</div>
<div>内容1</div>
<div>内容1</div>
</div>
</div>
<div class="item">
<div id='i2' class="header" onclick="ChangeMenu('i2');">菜单2</div>
<div class="content hide">
<div>内容2</div>
<div>内容2</div>
<div>内容2</div>
</div>
</div>
<div class="item">
<div id='i3' class="header" onclick="ChangeMenu('i3');">菜单3</div>
<div class="content hide">
<div>内容3</div>
<div>内容3</div>
<div>内容3</div>
</div>
</div>
<div class="item">
<div id='i4' class="header" onclick="ChangeMenu('i4');">菜单4</div>
<div class="content hide">
<div>内容4</div>
<div>内容4</div>
<div>内容4</div>
</div>
</div> </div> <script>
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');
} current_header.nextElementSibling.classList.remove('hide');
}
</script>
</body>
</html>
以上所有功能实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>day15</title>
<style>
.item .header{
height: 35px;
background-color: #BEBEBE;
color: white;
line-height: 35px;
}
.hide{
display: none;
}
.c1{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: black;
opacity: 0.6;
z-index: 9;
}
.c2{
width: 500px;
height: 400px;
background-color: white;
position: fixed;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -200px;
z-index: 10;
}
.pg-header{
height: 48px;
background-color:#BEBEBE;
color: coral;
font-family: 方正舒体;
position: fixed;
top:0;
right: 0;
left: 0;
}
.pg-body{
height: 5000px;
margin-top: 52px;
}
.diceng{
width: 35px;
height: 40px;
background-color: #BEBEBE;
position: fixed;
bottom: 20px;
right: 20px;
}
.ziti{
font-family: 方正舒体;
height:25px;
font-size: 16px;
}
.shou{
cursor: pointer;
}
</style>
</head>
<body style="margin: 0;">
<div class="pg-header" style="margin: 0 auto;margin-top: 2px;text-align: center;margin-left: 5px;margin-right: 5px">
<p><h2 id="i1">欢迎光临-前来指导 </h2></p>
</div> <div class="pg-body">
<div style="height:800px;width: 300px;float: left;margin-left: 5px ">
<div class="item">
<div id='i2' class="header" onclick="ChangeMenu('i2');" style="margin-top: 5px">LINUX</div>
<div class="content">
<div>linux运维</div>
<div>Linux脚本</div>
<div>Linux监控</div>
</div>
</div>
<div class="item">
<div id='i3' class="header" onclick="ChangeMenu('i3');" style="margin-top: 5px">Python</div>
<div class="content hide">
<div>Python代码</div>
<div>Python项目</div>
<div>Python知识</div>
</div>
</div>
<div class="item">
<div id='i4' class="header" onclick="ChangeMenu('i4');" style="margin-top: 5px">Java</div>
<div class="content hide">
<div>java代码</div>
<div>Java项目</div>
<div>Java知识</div>
</div>
</div>
<div class="item">
<div id='i5' class="header" onclick="ChangeMenu('i5');" style="margin-top: 5px">all_log</div>
<div class="content hide">
<div>linux系统_log</div>
<div>Linux服务_log</div>
<div>linux监控_log</div>
</div>
</div>
</div>
<div class="ziti" style="float: left;margin-left: 200px">
<p><b>运维主机如下：</b></p>
<input type="button" value="添加" onclick="ShowModel();" class="ziti shou" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000 '" />
<input type="button" value="全选" onclick="ChooseAll();" class="ziti shou" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000'" />
<input type="button" value="取消" onclick="CancleAll();" class="ziti shou" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000'" />
<input type="button" value="反选" onclick="ReverseAll();" class="ziti shou" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000'" /> <table>
<thead>
<tr>
<th>选择</th>
<th>主机名</th>
<th>端口</th>
</tr>
</thead >
<tbody id="tb"> <tr>
<td>
<input type="checkbox" />
</td>
<td >192.168.1.1</td>
<td>22</td>
</tr>
<tr>
<td><input type="checkbox"f id="test" /></td>
<td>192.168.2.2</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>192.168.3.3</td>
<td>8080</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>192.168.4.4</td>
<td>8080</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>192.168.5.5</td>
<td>88</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>192.168.6.6</td>
<td>66</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>192.168.8.8</td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>192.168.9.9</td>
<td>23</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>192.168.10.10</td>
<td>99</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>192.168.11.11</td>
<td>000</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>192.168.12.12</td>
<td>66</td>
</tr>
</tbody>
</table> </div> <!-- 遮罩层开始 -->
<div id="i6" class="c1 hide"></div>
<!-- 遮罩层结束 --> <!-- 弹出框开始 -->
<div id="i7" class="c2 hide">
<p><input type="text" /></p>
<p><input type="text" /></p>
<p>
<input type="button" value="取消" onclick="HideModel();"/>
<input type="button" value="确定"/>
</p>
</div>
<!-- 弹出框结束 -->
<div style="float: right;margin-right: 20px;"class="ziti" >
<p><b>服务器入口：</b></p>
<div style="height: 20px;width: 220px;position: relative;padding: 10px 0;">
<input type="text" style="height: 25px;width: 200px;padding-right: 30px;" />
<span style="display:inline-block;position: absolute;right: 10px;top: 15px;background-image: url(图片/i_name.jpg);height: 16px;width: 16px;"></span>
</div>
<div style="height: 20px;width: 220px;position: relative;">
<input type="text" style="height: 25px;width: 200px;padding-right: 30px;" />
<span style="display:inline-block;position: absolute;right: 10px;top: 10px;background-image: url(图片/i_pwd.jpg);height: 16px;width: 16px;"></span>
</div>
<div style="padding-top: 15px;float: right;">
<input type="button" value="登陆" class="ziti shou" onmouseover="this.style.color='#FF2400 '" onmouseout="this.style.color='#000000'"/>
</div>
</div>
<!--
<div style="height: 300px;width: 300px;overflow: auto;font-family: 方正舒体;margin-right: 5px;float: right">
<img src="1.jpg">
</div>
<!-- hidden 隐藏 auto 出现上下拉框--> </div> <div class="diceng" onclick="GoTop();">返回顶部</div> <script>
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');
} current_header.nextElementSibling.classList.remove('hide');
}
</script>
<script>
function ShowModel(){
document.getElementById('i6').classList.remove('hide');
document.getElementById('i7').classList.remove('hide');
}
function HideModel(){
document.getElementById('i6').classList.add('hide');
document.getElementById('i7').classList.add('hide');
} function ChooseAll(){
var tbody = document.getElementById('tb');
// 获取所有的tr
var tr_list = tbody.children;
for(var i=0;i<tr_list.length;i++){
// 循环所有的tr，current_tr
var current_tr = tr_list[i];
var checkbox = current_tr.children[0].children[0];
checkbox.checked = true; }
} function CancleAll(){
var tbody = document.getElementById('tb');
// 获取所有的tr
var tr_list = tbody.children;
for(var i=0;i<tr_list.length;i++){
// 循环所有的tr，current_tr
var current_tr = tr_list[i];
var checkbox = current_tr.children[0].children[0];
checkbox.checked = false; }
} function ReverseAll(){
var tbody = document.getElementById('tb');
// 获取所有的tr
var tr_list = tbody.children;
for(var i=0;i<tr_list.length;i++){
// 循环所有的tr，current_tr
var current_tr = tr_list[i];
var checkbox = current_tr.children[0].children[0];
if(checkbox.checked){checkbox.checked = false;}else{checkbox.checked = true;}}} </script>
<script>
function liu(){
//根据ID获取指定<div>标签的内容，定于局部变量接受
var tag = document.getElementById('i1')
//获取标签内部的内容
var content = tag.innerText;
//取字符串取第一个字符，赋值给f
var f = content.charAt(0);
//把第2个字符到最后一个字符赋值给g
var g = content.substring(1,content.length);
//把两个新赋的值加在一起
var new_content = g + f;
//重新赋值
tag.innerText = new_content;
}
setInterval('liu()',500);
</script>
<script>
function GoTop(){
document.body.scrollTop = 0;
}
</script>
<script>
setInterval("alert(欢迎抽查工作)",5000) //创建定时器5秒弹出一次
</script> </body>
</html>
py-day15_css+js_初的更多相关文章
- 初入py
1.下载工具sublime 我的网盘下载地址:https://pan.baidu.com/s/18-U1ZSg_zHoSAqUuvXj_PQ 直接解压即可 2.配置py27 在新建的文件里面编辑并保存 ...
- Xamarin.iOS开发初体验
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKwAAAA+CAIAAAA5/WfHAAAJrklEQVR4nO2c/VdTRxrH+wfdU84pW0
- Python导出Excel为Lua/Json/Xml实例教程（二）：xlrd初体验
Python导出Excel为Lua/Json/Xml实例教程(二):xlrd初体验 相关链接: Python导出Excel为Lua/Json/Xml实例教程(一):初识Python Python导出E ...
- python--爬虫入门（七）urllib库初体验以及中文编码问题的探讨
python系列均基于python3.4环境 ---------@_@? --------------------------------------------------------------- ...
- python窗体——pyqt初体验
连续两周留作业要写ftp的作业,从第一周就想实现一个窗体版本的,但是时间实在太短,qt零基础选手表示压力很大,幸好又延长了一周时间,所以也就有了今天这篇文章...只是为了介绍一些速成的方法,还有初学者 ...
- SignalR初体验
简介 ASP .NET SignalR[1] 是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信.什么是实时通信的Web呢?就是让客户端(Web页面)和服务器端可以 ...
- gulp快速入门&初体验
前言 一句话先 gulp 是一个可以简单和自动化"管理"前端文件的构建工具 先说我以前的主要工作,我主要是做游戏服务端的,用c++/python,所以我对东西的概念理解难免要套到自 ...
- Scrapy 初体验
开发笔记 Scrapy 初体验 scrapy startproject project_name 创建工程 scrapy genspider -t basic spider_name website. ...
- ipython及Python初体验
阅读目录: Python环境体验 Python编辑器 ipython安装 Python提示符 Python初体验 print和变量 变量操作 内建函数:方法 数学运算:简单算术.随机数 关于模块 一. ...
随机推荐
- Netty入门教程：Netty拆包粘包技术讲解
Netty编解码技术是什么意思呢?所谓的编解码技术,说白了就是java序列化技术.序列化有两个目的: 1.进行网络传输2.对象持久化 虽然我们可以使用java进行序列化,Netty去传输.但是java ...
- Android Studio 2.0 Beta 5公布,修复几个与即时执行相关的严重BUG.
Android Studio 2.0 Beta 5公布,修复几个与即时执行相关的严重BUG. This build fixes a couple of important bugs related t ...
- Android4.4 Telephony流程分析——彩信(MMS)发送过程
本文代码以MTK平台Android 4.4为分析对象,与Google原生AOSP有些许差异,请读者知悉. 彩信收发依靠WAP网络,在Android4.4中的实现基于Http协议的应用.下图为几个彩信传 ...
- 微信小程序 - 提取字体图标与其优化
微信小程序,无论是字体图标还是图标,都差不多,只不过是为了以后字体图标修改方便,或者加效果方便而使用它而已! 1. 下载font-awesome http://fontawesome.dashgame ...
- 重装系统（Win）
有朋友问我,重装系统该怎样操作呢? 1. 硬盘重装 官网:http://www.heiyunwang.com/ ,点击下载软件:http://dlsw.baidu.com/sw-search-sp/s ...
- vue - 前置工作
vue 中文官网:https://cn.vuejs.org/ vue ES6语法:https://www.cnblogs.com/zhouyangla/p/7225335.html vue Debug ...
- Log4cpp 使用手册
参考资料: log4cpp 配置 与 使用http://www.cnblogs.com/welkinwalker/archive/2011/06/23/2088197.html 便利的开发工具-log ...
- hiho1079 线段树区间改动离散化
题目链接: hihocoder1079 代码: #include<iostream> #include<cstdio> #include<cstring> #inc ...
- node.js内存泄露问题记录
先说一下.事情的来龙去脉. 公司开发一款游戏棋牌游戏,服务端的开发是IO密集型,开发的时候,考虑过使用python,java,node.js. 终于选择了node.js(node.js宣传的杀手功能. ...
- CGI的知识点
CGI(Common Gateway Interface)是能让webserver和CGI脚本共同处理客户的请求的协议. 它的协议定义文档是http://www.ietf.org/rfc/rfc387 ...