CSS补充与JavaScript基础
一、CSS补充
position
1.fiexd
固定在页面的某个位置;
示例将顶部菜单始终固定在页面顶部
position: fixed; 将标签固定在某个位置
right: 0; 距离右边0像素
left: 0; 距离左边0像素
top: 0; 距离上边0像素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 48px;
background-color: #2459a2;
color: #DDDDDD;
/* 将顶部固定 */
position: fixed;
right: 0;
left: 0;
top: 0;
}
.ph-body{
background-color: #DDDDDD;
height: 5000px;
/* 内容要空余出上面的高度否则内容会被压在下面 */
margin-top: 48px;
}
</style>
</head>
<body style="margin: 0 auto">
<div class="pg-header">头部</div>
<div class="ph-body">
内容
</div>
</body>
</html>
2.relative+absolute
实现返回顶部效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="margin: 0 auto;">
<div style="width: 50px;height: 50px;background-color: cornflowerblue;position: absolute;right: 0;bottom: 0;">返回顶部</div>
<div style="height: 5000px;background-color: #dddddd;">
asdfasdf
</div>
</body>
</html>
实例：relative+absolute实现自定义浮动位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="margin: 0 auto">
<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: black;"></div>
</div>
<div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
<div style="position: absolute;right:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div>
</div>
<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: black;"></div>
</div>
</body>
</html>
3.页面遮罩样式
opcity: 0.5 透明度
z-index: 层级顺序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link rel="stylesheet" href="../css/commons.css"> -->
<style>
.level-1{
z-index: 10;
position: fixed;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -200px;
background-color: white;
height: 400px;
width: 500px;
/*隐藏属性
display: none;
*/
}
.level-2{
z-index: 9;
position: fixed;
opacity: 0.5;
background-color: black;
top: 0;
left: 0;
right: 0;
bottom: 0;
/*隐藏属性
display: none;
*/
}
</style>
</head>
<body style="margin: 0 auto">
<!-- 最上面一层白色 -->
<div class="level-1">
<input type="text" />
<input type="text" />
</div>
<!-- 第二层透明 -->
<div class="level-2"></div>
<!-- 第一层底部绿色 -->
<div style="height: 5000px;background-color: green">内容</div>
</body>
</html>
4.overflow
overflow:
hidden 不显示超过对象尺寸的内容，如果图片设置了width: 200px;height: 300px;那么图片超过设置的内容全部不显示
auto 超过设置对象的尺寸内容时自动加上滚动条
实例
<!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>
<div style="height: 200px;width: 300px;overflow: hidden">
<img src="1.jpg">
</div>
</body>
</html>
效果图
5.hover
设置对象在其鼠标悬停时的样式。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
top: 0;
left: 0;
right: 0;
position: fixed;
height: 48px;
line-height: 48px;
background-color: #2459a2;
}
.pg-body{
margin-top: 50px;
}
.share-head-body{
margin: 0 auto;
width: 980px;
}
.pg-header .menu{
display: inline-block;
padding: 0 10px 0 10px;
color: white;
}
/* 当鼠标经过时，css样式才生效
.pg-header .menu:hover{
background-color: blue;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="share-head-body">
<a>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="share-head-body">
内容
</div>
</div>
</body>
</html>
效果图
6.background其它
background-image:url('image/4.gif'); # 默认，div大，图片重复放
background-repeat: repeat;
取值:
repeat : 默认值。背景图像在纵向和横向上平铺
no-repeat : 背景图像不平铺
repeat-x : 背景图像仅在横向上平铺
repeat-y : 背景图像仅在纵向上平铺
background-position-x: 设置或检索对象的背景图像横坐标位置。必须先指定 background-image 属性。
background-position-y: 设置或检索对象的背景图像纵坐标位置。必须先指定 background-image 属性。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bk-img{
background-image: url(1.png);
background-repeat: no-repeat;
height: 20px;
width: 20px;
border: 1px solid red;
background-position-x: 0px;
background-position-y: 0px;
}
</style>
</head>
<body>
<div style="height: 100px"></div>
<div class="bk-img"></div>
</body>
</html>
7.小结输入框实现
所用知识点background-image、position
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.login{
height: 35px;
width: 400px;
position: relative;
margin-top: 5px;
float: left;
margin-right: 20px;
}
.login .span{
position: absolute;
right: 6px;
top: 10px;
height: 16px;
width: 16px;
/*让span标签具有块级标签的特性*/
display: inline-block;
}
</style>
</head>
<body>
<div class="login">
<input type="text" style="height: 35px;width: 370px;
padding-right: 30px;"/>
<span class="span" style="background-image: url(name.jpg)"></span>
</div>
</body>
</html>
效果图
二、JavaScript
独立的语言，浏览器具有js解释器
1.JavaScript代码存在形式
JavaScript代码存在形式：
- Head中
<script>
//javascript代码
alert(123);
</script>
//如果写在head中推荐下面方式
<script type="text/javascript">
//javascript代码
alert(123);
</script>
- 文件中
<script src='js文件路径'> </script>
PS: JS代码需要放置在 <body>标签内部的最下方
2.JavaScript注释
单行注释 //
多行注释 /* */
3.JavaScript变量命名方式
python 命名方式：
name = 'alex'
JavaScript 命名方式:
name = 'alex' # 全局变量
var name = 'eric' # 局部变量
4.通过浏览器console编写JavaScript代码
通过浏览器的console也可以临时编写JavaScript代码
5.JavaScript基本数据类型
数字
a = 18;
字符串
a = "alex"
a.chartAt(索引位置) 通过字符串下标获取指定字符串
a.substring(起始位置，结束位置) 通过字符串下标对字符串进行切片
a.lenght 获取当前字符串长度
...
列表(数组)
a = [11,22,33]
字典
a = {'k1':'v1','k2':'v2'}
布尔类型
true
false
6.for循环
for循环是循环的是元素的索引，for循环通常有两种方式
第一种方式
a = [11,22,33,44]
for(var item in a){
console.log(item);
}
循环字典时循环的是key
a = {'k1':'v1','k2':'v2'}
for(var item in a){
console.log(item);
}
- 上面代码的执行结果为
第二种方式
第二种方式不支持字典的循环
for(var i=0;i<10;i++){
console.log(i)
}
a = [11,22,33,44]
for(var i=0;i<a.length;i++){
console.log(a[i])
}
- 上面代码的执行结果为
7.条件判断
if判断语法:
else if 相当于python中的elif
if(条件){
}else if(条件){
}else if(条件){
}else{
}
表达式:
== 值相等;例如 1 == "1" 值都为1，但是类型不同一个是数字一个是字符串，
=== 值和类型都相等；1 === 1
&& and
|| or
8.函数
语法：
定义函数
function func(arg1,arg2){
}
执行函数
func(1,2)
9.定时器
每隔400毫秒自动执行一次指定的函数
setInterval('函数名()', 400)
10.alert和console.log
alert实现鼠标点击时弹出对话框效果
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 400px;border: 1px solid black;width: 300px;margin: 0 auto">
<div style="margin-top: 10px;text-align: center">
<input type="text" />
<input id='i1' onclick="func()" type="button" value="点我">
</div>
</div>
<script>
function func() {
alert("警告")
}
</script>
</body>
</html>
实现效果
console.log
将内容输出到浏览器的console控制台
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div onclick="func()" id="i1">你好，世界</div>
<script>
function func() {
// 获取指定ID的标签
var tag = document.getElementById('i1');
//获取i1标签的内容
var content = tag.innerText;
//内容输出到console
console.log(content);
}
func()
</script>
</body>
</html>
实现效果
11.DOM
1.查找标签
获取单个元素 document.getElementById('i1')
获取多个元素（列表）document.getElementsByTagName('div')
获取多个元素（列表）document.getElementsByClassName('c1')
a. 直接找
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合
b. 间接
tag = document.getElementById('i1')
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
2.操作标签
a. innerText
获取标签中的文本内容
标签.innerText
对标签内部文本进行重新复制
标签.innerText = ""
b. className
tag.className =》 直接整体做操作
tag.classList.add('样式名') 添加指定样式
tag.classList.remove('样式名') 删除指定样
c. checkbox
获取值
checkbox对象.checked
设置值
checkbox对象.checked = true
3.实例1：查找标签修改标签内容实现循环标签内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.i1{
background-color: red;
color: white;
font-size: 20px;
font-weight: bold;
text-align: center;
height: 38px;
line-height: 30px;
}
</style>
</head>
<body style="margin: 0 auto">
<div id="i1" class="i1">欢迎光临共享商城</div>
<script>
function func() {
//根据ID获取指定标签的内容
var tag = document.getElementById('i1');
//获取标签的内容
var content = tag.innerText;
// 获取内容的索引为1的字符
var start = content.charAt(0);
// 获取从1到最后的值
var end = content.substring(1,content.length);
// 重新拼接内容
var new_content = end + start ;
// 重新赋值i1标签的内容
tag.innerText = new_content;
}
//定时器每个500毫秒执行一次func
setInterval('func()',500)
</script>
</body>
</html>
实现效果
4.通过JavaScript实现添加样式删除样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.remove{
display: none;
}
.level-1{
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: black;
opacity: 0.5;
z-index: 9;
}
.level-2{
position: fixed;
width: 500px;
height: 400px;
background-color: white;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -200px;
z-index: 10;
}
</style>
</head>
<body>
<div>
<table border="1" style="width: 200px;text-align: center">
<thead>
<tr>
<th>主机名</th>
<th>端口</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1.1.1</td>
<td>80</td>
</tr>
<tr>
<td>1.1.1.2</td>
<td>80</td>
</tr>
</tbody>
</table>
</div>
<div>
<input type="button" value="添加主机" onclick="ShowModel()"/>
</div>
<!-- 透明层 -->
<div id='i1' class="level-1 remove"></div>
<div id='i2' class="level-2 remove">
<p style="text-align: center">
<input type="text" value="主机名"/>
</p>
<p style="text-align: center">
<input type="text" value="端口">
</p>
<p style="text-align: center">
<input type="button" value="确定">
<input type="button" value="取消" onclick="DelModel()">
</p>
</div>
<script>
//移除样式
function ShowModel() {
document.getElementById('i1').classList.remove('remove')
document.getElementById('i2').classList.remove('remove')
}
//添加样式
function DelModel() {
document.getElementById('i1').classList.add('remove')
document.getElementById('i2').classList.add('remove')
}
</script>
</body>
</html>
实现效果
5.实例：使用标签直接查找与间接查找实现全选与反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 隐藏样式 */
.hide{
display: none;
}
/* 透明层 */
.level-1{
background-color: black;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0.5;
z-index: 9;
}
/* 弹出框 */
.level-2{
position: fixed;
width: 500px;
height: 400px;
background-color: white;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -200px;
z-index: 10;
}
</style>
</head>
<body>
<!-- 表格 -->
<div>
<input type="button" value="添加主机" onclick="ShowModel()">
<input type="button" value="全部取消" onclick="AllRemove()">
<input type="button" value="全选" onclick="Allchoose()">
<input type="button" value="反选" onclick="ReverseAll()">
<table>
<thead>
<tr>
<th>选择</th>
<th>主机名</th>
<th>IP地址</th>
<th>端口号</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox"></td>
<td>bjtn-1.1-webngx</td>
<td>192.168.1.1</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>bjtn-1.2-webngx</td>
<td>192.168.1.2</td>
<td>80</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>bjtn-1.3-webngx</td>
<td>192.168.1.3</td>
<td>80</td>
</tr>
</tbody>
</table>
</div>
<!-- 透明层 -->
<div id="i1" class="level-1 hide"></div>
<!-- 弹出框 -->
<div id="i2" class="level-2 hide">
<p style="text-align: center">
<input type="text" value="hostname">
</p>
<p style="text-align: center">
<input type="text" value="ip">
</p>
<p style="text-align: center">
<input type="text" value="端口">
</p>
<p style="text-align: center">
<input type="button" value="确定">
<input type="button" value="取消" onclick="Cancel()">
</p>
</div>
<!-- js -->
<script>
function ShowModel(){
document.getElementById('i1').classList.remove('hide')
document.getElementById('i2').classList.remove('hide')
}
function Cancel(){
document.getElementById('i1').classList.add('hide')
document.getElementById('i2').classList.add('hide')
}
//全选
function Allchoose(){
//1.先获取到tbody标签
var tbody = document.getElementById('tb');
//2.获取到所有的子标签
var tr_list = tbody.children;
//3.设置所有子标签里的第一个标签中的input标签checkbox为true
for(var i=0;i<tr_list.length;i++){
//4.获取当前的tr标签
var current_tr = tr_list[i];
//5.获取当前tr标签中的input中的checkbox
var checkbox = current_tr.children[0].children[0];
//6.将checkbox的值设置为true就自动全选
checkbox.checked = true;
}
}
//全部取消
function AllRemove(){
//1.先获取到tbody标签
var tbody = document.getElementById('tb');
//2.获取到所有的子标签
var tr_list = tbody.children;
//3.设置所有子标签里的第一个标签中的input标签checkbox为false
for(var i=0;i<tr_list.length;i++){
//4.获取当前的tr标签
var current_tr = tr_list[i];
//5.获取当前tr标签中的input中的checkbox
var checkbox = current_tr.children[0].children[0];
//6.将checkbox的值设置为false
checkbox.checked = false;
}
}
//反选
function ReverseAll(){
//1.先获取到tbody标签
var tbody = document.getElementById('tb');
//2.获取到所有的子标签
var tr_list = tbody.children;
//3.设置所有子标签里的第一个标签中的input标签checkbox为true
for(var i=0;i<tr_list.length;i++){
//4.获取当前的tr标签
var current_tr = tr_list[i];
//5.获取当前tr标签中的input中的checkbox
var checkbox = current_tr.children[0].children[0];
//6.如果当前的checkbod等于true就设置为false，否则就设置为true
if(checkbox.checked){checkbox.checked = false;}else{
checkbox.checked = true;
}
}
}
</script>
</body>
</html>
实现效果
6.实例：左侧菜单栏效果
- 存放css样式文件
.pg-header{
height: 48px;
line-height: 48px;
background-color: #DDDDDD;
}
.container{
width: 980px;
margin: 0 auto;
}
.pg-info{
color: brown;
font-weight: bold;
font-size: 16px;
}
.pg-li{
margin: 0 5px;
float: left;
}
ol, ul {
list-style: none;
}
.hide{
display: none;
}
.item .header{
height: 35px;
background-color: #2459a2;
color: white;
line-height: 35px;
}
- html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="commons.css">
</head>
<body style="margin: 0 auto">
<div class="pg-header">
<!-- 头部信息 -->
<div class="container">
<ul class="pg-li">
<li><a class="pg-info">后台管理</a></li>
</ul>
</div>
</div>
<!-- 左侧菜单 -->
<div style="text-align: center;width: 310px;">
<div class="item">
<div id='i1' class="header" onclick="ChangeMenu('i1');">家用电器</div>
<div class="content">
<div>合资品牌</div>
<div>国产品牌</div>
<div>互联网品牌</div>
</div>
</div>
<div class="item">
<div id='i2' class="header" onclick="ChangeMenu('i2');">电脑办公</div>
<div class="content hide">
<div>笔记本</div>
<div>游戏本</div>
<div>平板电脑</div>
</div>
</div>
<div class="item">
<div id='i3' class="header" onclick="ChangeMenu('i3');">厨具</div>
<div class="content hide">
<div>烹饪锅具</div>
<div>剪刀菜板</div>
<div>厨房配件</div>
</div>
</div>
<div class="item">
<div id='i4' class="header" onclick="ChangeMenu('i4');">个护化妆</div>
<div class="content hide">
<div>洁面</div>
<div>洗发</div>
<div>沐浴</div>
</div>
</div>
</div>
<script>
function ChangeMenu(nid){
//获取当前id的标签
var head = document.getElementById(nid);
//找到父标签的父标签下的所有子标签
var item_list = head.parentElement.parentElement.children;
//循环所有子标签找到索引为1的标签添加hide样式隐藏标签
for(var i=0;i<item_list.length;i++){
//当前的标签
var current_item = item_list[i];
//修改当前标签内部索引为1的div，添加hide演示
current_item.children[1].classList.add('hide');
}
//所有标签全部添加上隐藏样式属性后删除当前标签的下一个子标签隐藏属性
head.nextElementSibling.classList.remove('hide');
}
</script>
</body>
</html>
实现效果
