css+js自动化开发之第十五天

一、css上一篇的补充

1、position（页面分层）

（1）fiexd将标签固定在页面的某个位置

　　position属性：top，left，right，bottom

（2）relative+absolute配合使用，定位到父标签框的相对位置

    <div style="position: relative;background-color: #339ba3;height: 200px;width: 500px;border: 1px solid red;margin: 0 auto">
        <div style="position: absolute;bottom: 0;left: 0;width: 50px;height: 50px;background-color: #0f0f0f"></div>
    </div>

View Code

2、opacity 页面的透明度 0-1

3、z-index：针对多层来设置的，层级顺序，值越高处于越上层

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one-level{
            background-color:white;
            z-index:10;
            position: fixed;
            width: 500px;
            height: 400px;
            top: 50%;
            left: 50%;
            margin-top:-200px;
            margin-left: -250px;
            display: block;
        }
        .tow-level{
            background-color:black;
            z-index:5;position: fixed;
            opacity: 0.5;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            display: block;
        }
    </style>
</head>
<body>
    <div class="one-level">
        <input type="text" name="user" value="老男孩"/>
        <input type="text" name="user" value="老男孩"/>
        <input type="text" name="user" value="老男孩"/>
    </div>
    <div class="tow-level"></div>
    <div style="height: 5000px;background-color: #1ba157;"></div>
</body>
</html>

View Code

4、overflow：

（1）hidden：只显示图片的部分

　　<div style="height: 200px;width: 300px;overflow: hidden">
　　<img src="1.jpg">
　　</div>

（2）auto:图片有滚动条

　　<div style="height: 200px;width: 300px;overflow: auto">
　　<img src="1.jpg">
　　</div>　

5、hover

　　当鼠标移动到所在标签上时，当前标签设置的css属性才生效

　　设置方法是css后加hover：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            position: fixed;
            top:0;
            left: 0;
            right: 0;
            height: 48px;
            line-height: 48px;
            background-color: #1ba157;
        }
        .w{
            margin: 0 auto;
            width: 980px;
        }
        .pg-header .menu{
            display: inline-block;
            padding: 0 10px;
            color: white;
        }
        .pg-header .menu:hover{
            background-color: #b92c28;
        }
        .pg-body{
            margin-top: 50px;
        }
    </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">adafsdfj;sdkjf</div>
</body>
</html>

View Code

6、background：背景

（1）background-image（背景图片）

默认：div比图片大的话，图片会重复拼接，且上下都会拼接满

（2）background-repeat（图片重复拼接，以及是x横向，y纵向是否开启拼接）

　　no-repeat不重复拼接；

　　repeat-x只横向拼接；

　　repeat-y只纵向拼接

*（3）background-position-x: 10px；背景图片横移10像素（正向右移动，负向左移动）

　　 background-position-y：10px；背景图片纵向移动10像素（正向下移动，负向上移动）

　　以上的另一种写法background-position：10px 10px；

二、javascript

1、javascript是独立的语言，在浏览器中具有相应js的解释器

2、js代码的存在形式：

（1）在head中存在　　

　　<script>
　　//javascript代码
　　alert(123);
　　</script>
　　<script type="text/javascript">
　　//javascript代码
　　alert(123);
　　</script>

（2）以文件的形式存在

　　调用代码：<script src='js文件路径'> </script>

（3）ps（默认）：js代码放在body标签内的最后部分

3、注释

　　行注释：//

　　多行注释：/* 内容 */

4、变量

　　name= “xxxx”　　全局变量

　　var name = “xxxx” 局部变量

5、写js代码

　　（1）写在html文件中编写

　　（2）临时测试，可以在浏览器的console中

6、基本数据类型

　　（1）数字

　　　　a = 18

　　（2）字符串

　　　　a = “alex”

　　　　a.charArt(索引的位置)

　　　　a.substring(起始位置，结束位置) 不包括结束位置

　　　　a.length　　获取当前a字符串的长度

　　　　具体可以查看武sir的js链接地址：http://www.cnblogs.com/wupeiqi/articles/5602773.html

　　（3）数组（类似于python的列表）

　　　　a = [11,22,33]

　　 (4)字典

　　　　a= {"k1":"v1","k2":"v2"}

　　(5)布尔类型

　　　　python中的True及False，首字母是大写

　　　　js中是小写true及false

7、for循环

　　（1）循环时，循环的元素是索引

　　　　　　a = [11,22,33,44]
　　　　　　for(var item in a){
　　　　　　console.log(item);
　　　　　　}

　　　　　　a = {'k1':'v1','k2':'v2'}
　　　　　　for(var item in a){
　　　　　　console.log(item);
　　　　　　}

　　（2）循环时，类似shell的i++　　　　　　

　　　　　　for(var i=0;i<10;i=i+1){
　　　　　　}

　　　　　　a = [11,22,33,44]
　　　　　　for(var i=0;i<a.length;i=i+1){
　　　　　　}

　　　　此不支持字典的循环

8、条件语句

　　　　　　if(条件){

　　　　　　}else if(条件){

　　　　　　}else if(条件){

　　　　　　}else{

　　　　　　}

　　　　　　== 值相等　　　　　　!=不相等
　　　　　　=== 值和类型都相等　　!==不相等
　　　　　　&& and　　

　　　　　　|| or

9、函数　　　　　　

　　　　　　function 函数名(a,b,c){
　　　　　　}
　　　　　　函数名(1,2,3)

三、DOM document 操作

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('样式名') 删除指定样式

　　PS：
　　　　<div onclick='func();'>点我</div>
　　　　<script>
　　　　function func(){
　　　　}
　　　　</script>

　　c. checkbox
　　　　获取值
　　　　　　checkbox对象.checked
　　　　设置值
　　　　　　checkbox对象.checked = true

posted @ 2016-11-17 11:30 willpower-chen 阅读(948) 评论(0) 收藏举报

刷新页面返回顶部

willpower-chen

css+js自动化开发之第十五天

一、css上一篇的补充

1、position（页面分层）

（1）fiexd将标签固定在页面的某个位置

（2）relative+absolute配合使用，定位到父标签框的相对位置

2、opacity 页面的透明度 0-1

3、z-index：针对多层来设置的，层级顺序，值越高处于越上层

4、overflow：

（1）hidden：只显示图片的部分

<div style="height: 200px;width: 300px;overflow: hidden"> <img src="1.jpg"> </div>

（2）auto:图片有滚动条

<div style="height: 200px;width: 300px;overflow: auto"> <img src="1.jpg"> </div>

5、hover

6、background：背景

（1）background-image（背景图片）

默认：div比图片大的话，图片会重复拼接，且上下都会拼接满

（2）background-repeat（图片重复拼接，以及是x横向，y纵向是否开启拼接）

*（3）background-position-x: 10px；背景图片横移10像素（正向右移动，负向左移动）

background-position-y：10px；背景图片纵向移动10像素（正向下移动，负向上移动）

以上的另一种写法background-position：10px 10px；

二、javascript

1、javascript是独立的语言，在浏览器中具有相应js的解释器

2、js代码的存在形式：

（1）在head中存在

（2）以文件的形式存在

（3）ps（默认）：js代码放在body标签内的最后部分

3、注释

4、变量

5、写js代码

6、基本数据类型

（1）数字

（2）字符串

（3）数组 （类似于python的列表）

(4)字典

(5)布尔类型

7、for循环

（1）循环时，循环的元素是索引

8、条件语句

9、函数

三、DOM document 操作

1、找到标签

2、操作标签

公告

　　<div style="height: 200px;width: 300px;overflow: hidden">
　　<img src="1.jpg">
　　</div>

　　<div style="height: 200px;width: 300px;overflow: auto">
　　<img src="1.jpg">
　　</div>　

　　 background-position-y：10px；背景图片纵向移动10像素（正向下移动，负向上移动）

　　以上的另一种写法background-position：10px 10px；

（1）在head中存在　　

　　（1）数字

　　（2）字符串

　　（3）数组（类似于python的列表）

　　 (4)字典

　　(5)布尔类型

　　（1）循环时，循环的元素是索引

9、函数　　　　　　