html与css的继续学习
1.css 书写可以在style处先设置一个标签的样式 例如 这个将图片的边框设置为0 为多余的边框，默认的img标签有一个1px的边框：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img{
border: 0;
}
</style>
</head>
<body>
<a href="http://www.oldboyedu.com" >asdf</a>
<a href="http://www.oldboyedu.com">
<img src="1.jpg" style="width: 200px;height: 300px;">
</a>
</body>CSS之Position
1.position : fixed => 固定在页面的某个位置
2.position : absoluted =>就是放在页面的某个位置
absolued+relative 可以将子标签放在父标签的某个位置
<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;right:0;top:0;width: 50px;height: 50px;background-color: black;"></div>
</div>3.z-index可以在多个层的时候，设置层的次序
opacity: 0.5; 设置透明度 超过一就变成深色了
<div style=";z-index:10; position: fixed;top: 50%;left:50%;
margin-left: -250px;margin-top: -200px; background-color:white;height: 400px;width:500px; ">
</div>
<div style=";z-index:9; position: fixed;background-color: black;
top:0;
bottom: 0;
right: 0;
left: 0;
opacity: 0.5;
"></div>
<div style="height: 5000px;background-color: green;">
asdfasdf
</div>4.overflow :auto/hidden
<!--超过宽度就出现进度条-->
<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>5.padding 补充 padding: 0 10px 0 10px; 每个参数的顺序是按一上为顺时针进行的；如果只有一个参数就是上下左右都间隔10px，0 px 10px =》说明
左右占据10px；
6. .class:hover 一触碰某个区域就会应用上某样式
.pg-header{
position: fixed;
right: 0;
left: 0;
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 10px 0 10px;
color: white;
}
/*当鼠标移动到当前标签上时，以下css属性才生效*/
.pg-header .menu:hover{
background-color: blue;
}
</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">a</div>
</div>7.我们可以在一个div白板中加入一系列图片，如果我们需要通过更改background-x/-y 就可以实现图片的移动 实现展示的不同
background-image:url() background-repeat: no repeat/repeat-x/repeat-y
<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;"></div>
</body>8.如何在一个input框内放一个图片呢？
注意padding 改完的Input边距后 多出来的那部分是不可以输入数据的，目前为止我知道的就这一个input有这性质
<div style="height: 35px;width: 400px;position: relative;">
<input type="text" style="height: 35px;width: 400px;" />
<span style="position:absolute;right:0;top:10px;background-image: url(i_name.jpg);height: 16px;width: 16px;display: inline-block;"></span>
</div>9.javascript 学习
局部变量 var
基本数据类型：
数字
字符串
数组
字典
布尔值
For循环
条件语句
==
!=
===
!==
||
&&
函数的定义：
function func(){
...
}
10.Dom操作
文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
1、直接查找
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合2、间接查找
parentNode // 父节点
childNodes // 所有子节点
firstChild // 第一个子节点
lastChild // 最后一个子节点
nextSibling // 下一个兄弟节点
previousSibling // 上一个兄弟节点
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素3.内容
innerText 文本
outerText
innerHTML HTML内容
innerHTML
value 值4.属性
attributes // 获取所有标签属性
setAttribute(key,value) // 设置标签属性
getAttribute(key) // 获取指定标签属性
/*
var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById('n1').setAttributeNode(atr);
*/5.class操作
className // 获取所有类名
classList.remove(cls) // 删除指定类
classList.add(cls) // 添加类6.标签操作
1.创建标签
var tag = document.createElement('a')
tag.innerText = "wupeiqi"
tag.className = "c1"
tag.href = ""
// 方式二
var tag = "<a class='c1' href=''>wupeiqi</a>"2.样式操作
var obj = document.getElementById('i1')
obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";3.其他操作
console.log 输出框
alert 弹出框
confirm 确认框
// URL和刷新
location.href 获取URL
location.href = "url" 重定向
location.reload() 重新加载
// 定时器
setInterval 多次定时器
clearInterval 清除多次定时器
setTimeout 单次定时器
clearTimeout 清除单次定时器
