一、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. Servlet实现表单提交（MyEclipse10,Tomcat7.0,JDK1.7,）——Java Web练习（一）

    1.MyEclipse|File|New|Project|Web Project    填写Project Name:exServlet,点选Java EE 6.0(配套Tomcat7.0) 2.代码 ...

  2. SQL数据类型介绍

    在计算机中数据有两种特征:类型和长度.所谓数据类型就是以数据的表现方式和存储方式来划分的数据的种类.    在SQL Server 中每个变量.参数.表达式等都有数据类型.系统提供的数据类型分为几大类 ...

  3. google、baidu高级搜索技巧

    1.baidu(可以去高级搜索查看更多信息) intitle搜索范围限定在网页标题:intitle:和后面的关键词之间不要有空格----intitle:中国 site搜索范围限定在特定站点中:“sit ...

  4. css3实践—创建3D立方体

    css3实践-创建3D立方体 要想实现3D的效果,其实非常简单,只需指定一个元素为容器并设置transform-style:preserve-3d,那么它的后代元素便会有3D效果.不过有很多需要注意的 ...

  5. Winform 中 DesignMode 返回值不正确的问题。

    本文转载:http://blog.csdn.net/sabty/article/details/5325260 以前也曾遇到这样的问题,不过影响不大也没有去详细了解.今天又重新遇到此问题,实在太不便. ...

  6. Android关于ListView中item与控件抢夺焦点的那些事

    在开发中,listview可以说是我们使用最频繁的控件之一了,但是关于listview的各种问题也是很多.当我们使用自定义布局的Listview的时候,如果在item的布局文件里面存在Button或者 ...

  7. 跟踪MYSQL 的查询优化过程方法

    http://dev.mysql.com/doc/internals/en/tracing-example.html http://blog.chinaunix.net/uid-20785090-id ...

  8. Java实现文件拷贝的4种方法.

    原文地址:http://blog.csdn.net/ta8210/article/details/2073817 使用 java 进行文件拷贝 相信很多人都会用,,不过效率上是否最好呢? 最近看了看N ...

  9. css 权威指南笔记（ 六)-基本视觉格式化

    块级元素 百分数:边框的宽度不能是百分数,只能是长度.基本原则是只使用百分数将无法创建完全灵活的元素布局(即所有属性都可设置). 合并垂直外边距 相邻外边距会沿着竖轴合并.两个外边距中较小的一个会被较 ...

  10. css 权威指南笔记（二）元素

    替换元素 用来替换元素内容的部分并非有文档内容直接表示. img input 非替换元素 其内容由用户代理(通常是一个浏览器)在元素本身生成的框中显示. 块级元素 块级元素生成一个 元素框,(默认)会 ...