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. 并发编程futuretask

    package com.mrbird.api.demoThread.thread1; /** * @Description * @Date: 2019/3/29 */ import java.util ...

  2. JS的变量的值怎么传递给PHP的变量?

    get: <script> name="xxx"; window.location='xxx.php? name='+name; post: <script> ...

  3. Python学习(四十二)—— Djago-model进阶

    一.QuerySet 可切片 使用Python 的切片语法来限制查询集记录的数目 .它等同于SQL 的LIMIT 和OFFSET 子句. Entry.objects.all()[:5] # (LIMI ...

  4. bower 基础认识

    bower 跟 npm 很像 都是管理包的工具 只是 bower 偏向前端  npm 前后都能管理 npm init 后是  生产 package.json  下载的包在node_modules文件下 ...

  5. UOJ#440. 【NOIP2018】填数游戏 动态规划

    原文链接www.cnblogs.com/zhouzhendong/p/UOJ440.html 前言 菜鸡选手到省选了才做联赛题. 题解 首先我们分析一下性质: 1. 假如一个格子是 0,那么它的右上角 ...

  6. 关于二进制枚举-计蒜客-得到整数X

    某君有 n个互不相同的正整数,现在他要从这 n 个正整数之中无重复地选取任意个数,并仅通过加法凑出整数 X.求某君有多少种不同的方案来凑出整数 X. 输入格式 第一行,输入两个整数 n,X(1≤n≤2 ...

  7. [转]PHP实现页面静态化的超简单方法

    为什么要页面静态化? 1.动态文件执行过程:语法分析-编译-运行 2.静态文件,不需要编译,减少了服务器脚本运行的时间,降低了服务器的响应时间,直接运行,响应速度快:如果页面中一些内容不经常改动,动态 ...

  8. ARTS Challenge- Week 1 (2019.03.25~2019.03.31)

    1.Algorithm - at least one leetcode problem per week(Medium+) 986. Interval List Intersections https ...

  9. C++ 三大特性:封装、继承、多态性

    要讲  封装.继承.多态就必须从面向对象说起 开发一个软件是为了解决某些问题,这些问题所涉及的业务范围称为该软件的问题域.面向对象的编程语言将客观事物看作具有属性和行为(或服务)的对象,通过抽象找出同 ...

  10. tmux使用中出现的问题和解决方式

    常用操作: tmux ls 看当前都有哪些sessiontmux new -s my1 创建窗口,名为my1ctrl+B,D 退出窗口 (这个就是同时按ctrl和B,然后松开后再按D键)tmux at ...