上节作业问题：

    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. Pytorch permute,contiguous

    permute(dims),常用的维度转换方法 将tensor的维度换位      参数:dim(int)---换位顺序 >>>x = torch.randn(,,) >> ...

  2. python学习笔记（二十）初识面向对象

    面向对象的编程的主要思想是把构成问题的各个事物分解成各个对象,建立对象的目的不是为了完成一个步骤,而是为了描述一个事物在解决问题的过程中经历的步骤和行为.对象作为程序的基本单位,将程序和数据封装其中, ...

  3. 新建虚拟机与本机ping不通（一招解决）

    初始新建虚拟机或者复制虚拟机后,发现虚拟机能ping通内外网,但是本机无法ping通虚拟机,xshell也无法连接虚拟机 这时候就很头疼了,因为要上传很多文件到虚拟机上面 解决办法: 1.关闭虚拟机后 ...

  4. javascript 类型 内存

    ecmscript中包含两种类型 基本类型值         引用类型值(对象) 按值传递和按引用传递 function test ($num) {   //按值传递,JavaScript中没有按引用 ...

  5. Centos 6.5 Install Mysql 8.0.0

    依赖包 yum install numactl libaio perl-Time-HiRes per-devel -y 下载对应系统版本下载 wget http://cdn.mysql.com//Do ...

  6. httpfs的使用

    在项目中使用到hdfs作为存储,为了在不同的节点加载hdfs上的数据,我们使用nfsv3服务,在客户端使用 root来mount hdfs上的数据到本地,然后把本地的数据发到hdfs上,因为这个我们的 ...

  7. DbEntry 4.2 建立关系时的一些问题

    创建关系提示输入字符串的格式不正确 使用HasMany Attribute时,需要将属性访问器的set部分修改为private,否则会提示输入字符串的格式不正确 [HasMany(OrderBy = ...

  8. 【Python】闭包 & 匿名函数

    闭包 1.注意:返回的函数内部不要使用后续会发生变化的变量. def f(): gs = [] for k in range(1, 4): def g(i): return i + k gs.appe ...

  9. MySQL的索引是什么？怎么优化？

    索引类似大学图书馆建书目索引,可以提高数据检索的效率,降低数据库的IO成本.MySQL在300万条记录左右性能开始逐渐下降,虽然官方文档说500~800w记录,所以大数据量建立索引是非常有必要的.My ...

  10. Could not initialize class sun.awt.X11FontManager 异常问题

    查了很多资料都是建议在  catalina.sh 中增加 -Djava.awt.headless=true \  的配置. 加了没有效果. 后来发现是因为JDK版本问题,将JDK 8换成 JDK 7后 ...