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. 应用中对APK进行安装

    权限 <uses-permission android:name="android.permission.REQUEST_INSTALL_PACKAGES"/> //允 ...

  2. flask权限控制

    大概思路为通过管理员id的查询角色,然后查看相应权限,为列表类型,然后通过id查询对应的路由规则,进而得出结论得出是否具有该权限 具体代码: def admin_auth(f): @wraps(f) ...

  3. VUE2+elementUI前端实现 三级省市联动select

    html: <el-form-item label="选择地区:"> <el-select size="small" style=" ...

  4. Android应用程序支持不同屏幕(尺寸、密度)

    how to build a user interface using Android layouts for all types of devices 使用Android布局设计的UI接口用于不同的 ...

  5. C语言可变参数

    前段时候在实现利用redis进行的一个数据库比对的功能,稍微去分析了一下redis里面的源代码,然后发现其中的发送命令接口声明如下: void *redisCommand(redisConnect * ...

  6. softmax in pytorch

    背景 在分类中,最常见的设置是一个输入,输出是类数目大小的向量.预测的输入类将是在最后一个网络层中具有最大条目的相应类.在分类任务中,交叉熵损失(交叉熵)是训练这类网络最常见的损失函数.交叉熵损失可以 ...

  7. DHCP工作原理简析

    引言 DHCP是网络体系结构中应用层的一个重要协议,它可以帮助我们对要连接到互联网的计算机进行IP地址等信息的配置.本文从DHCP的原理出发,就DHCP的工作过程 进行详细的探讨. 主要报文 发现报文 ...

  8. [LeetCode] New 21 Game 新二十一点游戏

    Alice plays the following game, loosely based on the card game "21". Alice starts with 0 p ...

  9. 解析jsonObject,赋给指定的对象

    从JSONObject中解析数据,并赋给给定的对象 public static Object parseBean(JSONObject jsonObject, Object obj) {   if ( ...

  10. Python基础之函数参数

    一.实参 1.实参分类: 2.实参基础代码: def fun01(a, b, c): print(a) print(b) print(c) # 位置传参:实参与形参的位置依次对应 fun01(1, 2 ...