1、css重用
        
        <style>
            如果整个页面的宽度 > 900px时:
            {
                .c{
                   共有
                }
                .c1{
                    独有
                }
            }
            
            .c2{
                独有
            }
        </style>
        
        <div class='c c1'></div>
        <div class='c c2'></div>
    2、自适应 和 改变大小变形
        左右滚动条的出现
        宽度,百分比
        
        页面最外层:像素的宽度 => 最外层设置绝对宽度
        
        
        自适应:media
        
    3、默认img标签,有一个1px的边框
        img{
            border: 0;
        }
    
    4、作业中的数量输入框
    
上节内容回顾
    1、块级和行内
    2、form标签
            <form action='http://sssss' methed='GET' enctype='multi'>
                <div>asdfasdf</div>
                <input type='text' name='q' />
                <input type='text' name='b' />
                # 上传文件
                <input type='file' name='f' />
                <input type='submit' />
            </form>
            GET: http://sssss?q=用户输入的值
                 http://sssss?q=用户输入的值&b=用户输入的内容
                 
            POST:
                请求头
                请求内容
    3、display: block;inline;inline-block
    4、float:
        <div>
            <div style='float:left;'>f</div>
            <div style='clear:both;'></div>
        </div>

5、margin: 0 auto;
    6、padding, ---> 自身发生变化
    
    
CSS补充
    position:
        a. fiexd => 固定在页面的某个位置
        
        b. relative + absolute
        
            <div style='position:relative;'>
                <div style='position:absolute;top:0;left:0;'></div>
            </div>

opcity: 0.5 透明度
    z-index: 层级顺序   
    overflow: hidden,auto
    hover
    
    background-image:url('image/4.gif'); # 默认,div大,图片重复访
    background-repeat: repeat-y;
    background-position-x:
    background-position-y:
    
    示例:输入框

JavaScript
    独立的语言,浏览器具有js解释器
    
    JavaScript代码存在形式:
        - Head中
                <script>
                    //javascript代码
                    alert(123);
                </script>
                
                <script type="text/javascript">
                    //javascript代码
                    alert(123);
                </script>
        - 文件
            <script src='js文件路径'> </script>
            
        PS: JS代码需要放置在 <body>标签内部的最下方
        
    注释
        当行注释 //
        多行注释  /*     */
        
    变量:
        
        python:
            name = 'alex'
        JavaScript:
            name = 'alex'     # 全局变量
            var name = 'eric' # 局部变量
        
    写Js代码:
        - html文件中编写
        - 临时,浏览器的终端 console
        
          
    基本数据类型
        数字
            a = 18;
        字符串
            a = "alex"
            a.chartAt(索引位置)
            a.substring(起始位置,结束位置)
            a.lenght    获取当前字符串长度
            ...
        列表(数组)
            a = [11,22,33]
            
        字典
            a = {'k1':'v1','k2':'v2'}
        布尔类型
            小写
      
    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.
            for(var i=0;i<10;i=i+1){
                
            }
            
            a = [11,22,33,44]
            for(var i=0;i<a.length;i=i+1){
                
            }
            
            不支持字典的循环
    
      
    条件语句
        if(条件){
        
        }else if(条件){
            
        }else if(条件){
            
        }else{
            
        }
        
        ==   值相等
        ===  值和类型都相等
        &&   and
        ||   or
        
    
    函数:
    
        
        function 函数名(a,b,c){
        
        }
        
        函数名(1,2,3)

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('样式名')   删除指定样式
    
            PS:
            
                <div onclick='func();'>点我</div>
                <script>
                    function func(){
                    
                    }
                
                </script>
    
        c. checkbox  
                获取值
                checkbox对象.checked
                设置值
                checkbox对象.checked = true

CSS补充:
    - position
    - background
    - hover
    - overflow
    - z-index
    - opacity
    
    示例:输入框右边放置图标
    
JavaScript:
    局部变量 var
    基本数据类型:
        数字
        字符串
        数组
        字典
        布尔值
    For循环
        
    条件语句
        ==
        !=
        ===
        !==
        
        ||
        
        &&
        
    函数的定义:
        function func(){
            ...
        }
Dom
    
    找标签
        - 直接找 $('#id')  $('.c1').siblings()
        - 简介找
    操作:
        
        innerText
        
        checkbox:
            checked    
        
        className
        classList
        
    事件:
        <div onclick='函数(123)'></div>
        
        <script>
            。。。。
        </script>
        
    定时器
        setInterval('函数()', 4000)
    
    其他:
        
        alert()
        console.log()
    
实例:
    莅临指导
    多选
    模态对话框
    左侧菜单
    返回顶部

CSS,JavaScript知识点的更多相关文章

  1. html css javascript 知识点总结 bom js 操作标签 文本 节点 表格各行变色 悬停变色 省市联动 正则

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. HTML+Css+JavaScript知识点汇总

    HTML 部分 HTML基础知识 1. HTML简介 HTML(Hypertext Markup Language),超文本标记语言,HTML利用各种标记来标识文档的结构以及标识超链接的信息.它是从S ...

  3. html/css/javascript知识点集锦;完全小白开搞web编程

    知识点集锦 1.在html模板的代码中会有下面一类: {% block title %} Blog entries {% endblock %}这里的 block 和 endblock 是神马? {% ...

  4. CSS 基础知识点 样式 选择器 伪类

    CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...

  5. HTML&&CSS基础知识点整理

    HTML&&CSS基础知识点整理 一.WEB标准:一系列标准的集合 1. 结构(Structure):html 语言:XHTML[可扩展超文本标识语言]和XML[可扩展标记语言] 2. ...

  6. HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 03

    工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 其实,我还想使用表格,做一个这样的颜色表,如下图所示: 如果按照之前的做法,把每一种颜色都列 ...

  7. html css javascript 加载的顺序

    html /css /javascript 这三者的加载顺序影响整个页面的加载速度.而加载速度的快慢直接影响pv(访问量),而且会影响经济收入.在大网站中,可能打开速度快一秒,一年能多带来上亿的收入. ...

  8. Sublime Text插件:HTML+CSS+JAVASCRIPT+JSON快速格式化[转]

    今天在github上乱逛,无意间找到victorporof分享的htmlpretty插件,特做推荐: 先看看他是怎么描述htmlpretty的: This is a Sublime Text 2 an ...

  9. html+css+javascript实现列表循环滚动示例代码

    使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...

随机推荐

  1. HDU - 6054 sa + 树状数组套线段树

    因为强制在线所以只能转成序列上的问题然后树套树了... #include<bits/stdc++.h> #define LL long long #define LD long doubl ...

  2. IMCASH:2019年区块链不会风平浪静,至少还有10件事值得期待

    当我们在说2019年是值得期待的一年时,我们还是得做到有根有据.那么,2019年在区块链行业都会发生哪些引导行业风向.影响整个行业的事件呢? 今天,白话区块链带着大家顺着时间线梳理一下. 01 第一季 ...

  3. 改进SQL Server 性能 - 索引碎片重建

    我们先来看一个用户表上的索引碎片情况: DBCC SHOWCONTIG scanning 'Lead' table...Table: 'Lead' (1422628111); index ID: 1, ...

  4. 【Linux】如何在Linux上安装使用SSH

    SSH是什么? Secure Shell 安全外壳协议 建立在应用层基础上的安全协议 可靠,专为远程登录会话和其他网络服务提供安全性的协议 有效防止远程管理过程中的信息泄露问题 SSH客户端适用于多种 ...

  5. 动态DP之全局平衡二叉树

    目录 前置知识 全局平衡二叉树 大致介绍 建图过程 修改过程 询问过程 时间复杂度的证明 板题 前置知识 在学习如何使用全局平衡二叉树之前,你首先要知道如何使用树链剖分解决动态DP问题.这里仅做一个简 ...

  6. linux的软件安装方式总结

    Linux系统中软件的“四”种安装原理详解:源码包安装.RPM二进制安装.YUM在线安装.脚本安装包   一.Linux软件包分类 1.1 源码包 优点: 开源,如果有足够的能力,可以修改源代码: 可 ...

  7. 大数据平台Hive数据迁移至阿里云ODPS平台流程与问题记录

    一.背景介绍 最近几天,接到公司的一个将当前大数据平台数据全部迁移到阿里云ODPS平台上的任务.而申请的这个ODPS平台是属于政务内网的,因考虑到安全问题当前的大数据平台与阿里云ODPS的网络是不通的 ...

  8. android studio gradle 打jar 包 (混淆+第三方库包)

    将依赖的第三方库打包进自己的jar包 1.先将第三方的库包拿到,然后添加jar包到项目的libs. 2.项目的build.gradle脚本添加下面的task: task buildJar(depend ...

  9. windows系统dos窗口全屏

    第一次进入博客园 2017年12月7日 之前使用dos窗口时都输入的是简短的指令,今天突然感觉小框看着不舒服,就找了一下度娘,在这里感谢万能的百度,一鞠躬. 1.win+r打开dos命令窗口 2.cm ...

  10. python中的单向循环链表实现

    引子 所谓单向循环链表,不过是在单向链表的基础上,如响尾蛇般将其首尾相连,也因此有诸多类似之处与务必留心之点.尤其是可能涉及到头尾节点的操作,不可疏忽. 对于诸多操所必须的遍历,这时的条件是什么?又应 ...