上节作业问题：

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

作业：

    1、登录、注册，练习：position

    2、后台管理页面

        - 左侧菜单

        - 右边表格，全选反向，模态框，返回顶部

    3、商城页面

初识HTML和CSS2的更多相关文章

  1. 【CSS3】 - 初识CSS3

    .navdemo{ width:560px; height: 50px; font:bold 0/50px Arial; text-align:center; margin:40px auto 0; ...

  2. Android动画效果之初识Property Animation（属性动画）

    前言: 前面两篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画).Frame Animation(逐帧动画)Andr ...

  3. 初识Hadoop

    第一部分:              初识Hadoop 一.             谁说大象不能跳舞 业务数据越来越多,用关系型数据库来存储和处理数据越来越感觉吃力,一个查询或者一个导出,要执行很长 ...

  4. python学习笔记（基础四：模块初识、pyc和PyCodeObject是什么）

    一.模块初识(一) 模块,也叫库.库有标准库第三方库. 注意事项:文件名不能和导入的模块名相同 1. sys模块 import sys print(sys.path) #打印环境变量 print(sy ...

  5. 初识IOS,Label控件的应用。

    初识IOS,Label控件的应用. // // ViewController.m // Gua.test // // Created by 郭美男 on 16/5/31. // Copyright © ...

  6. UI篇（初识君面）

    我们的APP要想吸引用户,就要把UI(脸蛋)搞漂亮一点.毕竟好的外貌是增进人际关系的第一步,我们程序员看到一个APP时,第一眼就是看这个软件的功能,不去关心界面是否漂亮,看到好的程序会说"我 ...

  7. Python导出Excel为Lua/Json/Xml实例教程（一）：初识Python

    Python导出Excel为Lua/Json/Xml实例教程(一):初识Python 相关链接: Python导出Excel为Lua/Json/Xml实例教程(一):初识Python Python导出 ...

  8. 初识SpringMvc

    初识SpringMvc springMvc简介:SpringMVC也叫Spring Web mvc,属于表现层的框架.Spring MVC是Spring框架的一部分,是在Spring3.0后发布的 s ...

  9. 初识redis数据类型

    初识redis数据类型 1.String(字符串) string是redis最基本的类型,一个key对应一个value. string类型是二进制安全的.意思是redis的string可以包含任何数据 ...

随机推荐

  1. PHP归档phar性能測试

    PHP自从5.3后新增PHAR归档,Phar 归档的概念来自 Java™ 技术的 JAR 归档,它同意使用单个文件打包应用程序.这个文件里包括运行应用程序所需的全部东西.该文件不同于单个可运行文件,后 ...

  2. POJ2318：TOYS（叉积判断点和线段的关系+二分）&&POJ2398Toy Storage

    题目:http://poj.org/problem?id=2318 题意: 给定一个如上的长方形箱子,中间有n条线段,将其分为n+1个区域,给定m个玩具的坐标,统计每个区域中的玩具个数.(其中这些线段 ...

  3. keeplived + mysql双主复制部署 --原创

    环境: master 1: 192.168.100.10  oracle  linux 7.4  mysql 5.7.1 master 2: 192.168.100.11 oracle  linux ...

  4. Windows常见宏的使用

    WIN32_LEAN_AND_MEAN 1.  参考资料:https://msdn.microsoft.com/en-us/library/windows/desktop/aa383745(v=vs. ...

  5. Delphi APP 開發入門（十）REST Client 開發

    Delphi APP 開發入門(十)REST Client 開發 分享: Share on facebookShare on twitterShare on google_plusone_share ...

  6. 【转】阿里巴巴技术专家杨晓明：基于Hadoop技术进行地理空间分析

    转自:http://www.csdn.net/article/2015-01-23/2823687-geographic-space-base-Hadoop [编者按]交通领域正产生着海量的车辆位置点 ...

  7. jstack用法

    第一步先找出Java进程ID,我部署在服务器上的Java应用名称为mrf-center: root@ubuntu:/# ps -ef | grep mrf-center | grep -v grep ...

  8. linux下创建用户，给用户设置密码，给用户授权

    1.linux下的用户是属于组的,所以需要创建一个组,划分给用户.创建命令: 在root下执行 groupadd  ver     创建一个组ver 2.创建用户            useradd ...

  9. MVC中关于 使用后台代码 检查 用户名是否已经被清册

    在 注册页面  NewUser 的 Controller中写以下代码 public  ActionResult GetUserIndataByUserName() { string UserName= ...

  10. ionic android - Unable to start the daemon process. Could not reserve enough space for 2097152KB object heap

    Unzipping C:\Users\app\.gradle\wrapper\dists\gradle-4.1-all\bzyivzo6n839fup2jbap0tjew\gradle-4.1-all ...