一、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>

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>

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：

　　aaarticlea/png;base64,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" alt="" />　　　

<!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>

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

　　　　　　　　

　　　　

　　

　　　　

　　

css+js自动化开发之第十五天的更多相关文章

  1. 【D3.V3.js系列教程】--（十五）SVG基本图形绘制

    [D3.V3.js系列教程]--(十五)SVG基本图形绘制 1.path <!DOCTYPE html> <html> <head> <meta charse ...

  2. Senparc.Weixin.MP SDK 微信公众平台开发教程（十五）：消息加密

    前不久,微信的企业号使用了强制的消息加密方式,随后公众号也加入了可选的消息加密选项.目前企业号和公众号的加密方式是一致的(格式会有少许差别). 加密设置 进入公众号后台的“开发者中心”,我们可以看到U ...

  3. 提高你开发效率的十五个Visual Studio 2010使用技巧

    提高你开发效率的十五个Visual Studio 2010使用技巧 相信做开发的没有不重视效率的.开发C#,VB的都知道,我们很依赖VS,或者说,我们很感谢VS.能够对一个IDE产生依赖,说明这个ID ...

  4. iOS 11开发教程（十五）iOS11应用视图的位置和大小

    iOS 11开发教程(十五)iOS11应用视图的位置和大小 当一个视图使用拖动的方式添加到主视图后,它的位置和大小可以使用拖动的方式进行设置,也可以使用尺寸检查器面板中的内容进行设置,如图1.52所示 ...

  5. 网站开发进阶(二十五)js如何将html表格导出为excel文件

    js如何将html表格导出为excel文件        赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,共勉! jsp页面数据导出成excel的方法很 ...

  6. html+css+js+Hbuilder开发一款安卓APP，根本不用学Android开发！

    我们知道,要做一款安卓APP,咱们得先学安卓开发语言,例如java,前端后端.那么没有这些开发语言基础,咱们怎么做呢?其实现在有比较好的开发方案就是做webAPP,咱们可以用web前端知识构建安卓客户 ...

  7. 程序员与年龄：四十岁普通开发、三十五岁首席架构、三十岁基层Leader

    最近,有一个词儿特别热门--躺平.有没有人跟你说过:"躺平说起来容易,做起来更容易." 和躺平相对的是另外一个词--内卷,群聊的时候,已经很多次看过草卷起来了.jpg表情包.某些节 ...

  8. 淘宝(阿里百川)手机客户端开发日记第十五篇 JSON解析(四)

    解析一个从淘宝传递的JSON (大家如有兴趣可以测试下):{ "tae_item_detail_get_response": { "data": { " ...

  9. Python开发【第十五篇】：Web框架之Tornado

    概述 Tornado 是 FriendFeed 使用的可扩展的非阻塞式 web 服务器及其相关工具的开源版本.这个 Web 框架看起来有些像web.py 或者 Google 的 webapp,不过为了 ...

随机推荐

  1. Centroid - SGU 134(树的搜索)

    题目大意:给你一个树,树每个点都有一个值, 这个点的的值就等于所有儿子里面点最多的那个儿子,值最小的就叫做重心,求出重心,还有所有等于重心的点,按照升序输出. 分析:就是一个简单的搜索树,求出来最大的 ...

  2. UVA 424 (13.08.02)

     Integer Inquiry  One of the first users of BIT's new supercomputer was Chip Diller. Heextended his ...

  3. Android 下用 Pull 解析和生成 XML

    Java 中是可以用 SAX 和 DOM 解析 XML  的,虽然在 Android 下也可以用这2中方式,但是还是推荐用 Pull.Pull 使用简单,效率相对高,Android 下是集成了 Pul ...

  4. JAVA wait(), notify(),sleep详解

    转自: http://blog.csdn.net/zyplus 在JAVA中,是没有类似于PV操作.进程互斥等相关的方法的.JAVA的进程同步是通过synchronized()来实现的,需要说明的是, ...

  5. HDOJ 4696 Answers 乱搞

    乱搞: rt.有1就能输出全部的数,否则仅仅能输出偶数 Answers Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/1 ...

  6. HTML5事件——contextmenu 隐藏鼠标右键菜单

    在window中单击右键或在Mac中Ctrl+单击时会触发contextmenu事件,通过取消其默认动作能够提供自己定义菜单. 首先先写一个自己的菜单: <style> ul, li { ...

  7. android 43 SQLite数据库

    SQLite数据库很小,占用内存只有几百K,安卓和IOS都是用的SQLite数据库. 页面: <LinearLayout xmlns:android="http://schemas.a ...

  8. 编译安装GCC 5.2.0

    https://blog.atime.me/note/install-gcc-5.2.0-from-source.html 记录编译GCC 5.2.0时遇到的问题和解决方法,以备日后查询. 平时使用的 ...

  9. SDL Game Development InputHandler类的一处bug

    个人十分推荐SDL Game Development 这本书,它并不是死抠SDL的api,而是一步步带着我们如何对一个游戏进行构架. 虽然我没用过游戏引擎,也基本不会写游戏,但是我认为这本书本身就是在 ...

  10. [转] Linux抓包工具tcpdump详解

    http://www.ha97.com/4550.html PS:tcpdump是一个用于截取网络分组,并输出分组内容的工具,简单说就是数据包抓包工具.tcpdump凭借强大的功能和灵活的截取策略,使 ...