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和变量 变量操作 内建函数:方法 数学运算:简单算术.随机数 关于模块 一. ...
随机推荐
- Centos7 下安装 RabbitMQ
安装 erlang 1.下载erlang 官网地址 http://www.erlang.org/download 挑选合适的版本 然后 wget 比如目前最新版本 19.3 运行命令 wget htt ...
- Java并发编程实战 读书笔记(二)
关于发布和逸出 并发编程实践中,this引用逃逸("this"escape)是指对象还没有构造完成,它的this引用就被发布出去了.这是危及到线程安全的,因为其他线程有可能通过这个 ...
- [转]Go基础之锁的初识
当我们的程序就一个线程的时候是不需要用到锁的,但是通常我们实际的代码不会是单个线程的,所有这个时候就需要用到锁了,那么关于锁的使用场景主要涉及到哪些呢? 当我们多个线程在读相同的数据的时候则是需要加锁 ...
- C#如何设置控件水平对齐，垂直对齐
如果要设置一些控件垂直对齐,点击这个按钮 如果要设置水平对齐,则点击这个按钮,选中控件之后点击左对齐(多个按钮都试下吧,总归能对齐到你要的效果的)
- weex 项目开发（三） weexpack + weex-ui
github地址:weex-ui https://github.com/alibaba/weex-ui 官网: https://alibaba.github.io/weex-ui/#/cn/ 创建项目 ...
- php使用魔法函数和不使用魔法函数比较
/** * use magic 0.31868386268616s * not use magic 0.11876797676086s */ class Test { private $varstr ...
- HDU 2578 Dating with girls(1) [补7-26]
Dating with girls(1) Time Limit: 6000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Oth ...
- 让Spring Boot启动更快
关注公众号:锅外的大佬, 每日推送国外技术好文,帮助每位开发者更好成长 原文链接:https://dev.to/bufferings/lets-make-springboot-app-start-fa ...
- VS2008转VS2013时遇到的问题
最近我们要把DPM进行行人检测嵌入到我们的项目里,需要一个高级版本的VS,于是我们要把2008转换成2013,至于为什么没有换成最高级的版本,可能担心会遇到有更多的麻烦吧,毕竟我们的DPM源码是在20 ...
- busybox 终端支持 ctrl-r
Busybox Settings ---> Busybox Library Tuning ---> [*] History saving [ ] Save history on shell ...