上节作业问题:
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. python学习笔记(九)函数返回多个值,列表生成式,循环多个变量,入参格式声明

    一.函数返回多个值 1.函数如果返回多个值的话,它会把这几个值放到一个元组里面2.函数如果返回多个值的话,也可以用多个变量来接收 def say(): num1 = num2 = num3 = ret ...

  2. HDU5003:Osu!(签到题)HDU5038:(签到题,题意很坑)

    HDU 5003 水题,直接上代码(因为题意读错了,WA了一遍). #include <iostream> #include <string.h> #include <s ...

  3. 模块讲解----os

    os:跟操作系统相关的信息 os模块的增删改查 一.cd进入: windowd: os.chdir("D:/软件/pychar/data/s13") print('获取当前位置:' ...

  4. python全栈开发从入门到放弃之函数基础

    1.为什么要用函数#1.避免代码重用#2.提高代码的可读性 2.函数的定义def 函数名(参数1,参数2):    '''函数注释'''    print("函数体")    re ...

  5. [Windows Powershell]-学习笔记(2)

    数学运算 我们可以把powershell当成一个计算器.如键入命令行那样输入数学表达式,回车,powershell会自动计算并把结果输出.常用的加减乘除模(+,-,*,/,%)运算和小括号表达式都支持 ...

  6. dubbo-admin 部署

    上一章主要是谈到zookeeper的安装和部署 因为zookeeper只是一个黑框,我们无法看到是否存在了什么提供者或消费者,这时就要借助Dubbo-Admin管理平台来实时的查看,也可以通过这个平台 ...

  7. DevOps架构实践

    1. 场景 持续部署:业界没有统一明确地定义,简单理解为将集成结果部署到不同的环境供用户使用,并且立即反馈部署结果的实践,其中不同的环境包括:开发环境.测试环境.预发布环境.生产环境 持续部署两个核心 ...

  8. The 15th UESTC Programming Contest Preliminary K - Kidd1ng Me? cdoj1565

    地址:http://acm.uestc.edu.cn/#/problem/show/1565 题目: Kidd1ng Me? Time Limit: 3000/1000MS (Java/Others) ...

  9. 零基础学习openstack【完整中级篇】及openstack资源汇总

    1.你是如何学习openstack的?2.你对openstack的组件了解多少?3.你认为openstack该如何学习? 一直想写关于openstack的方面的内容,今天终于整理完成.算是完成一桩心事 ...

  10. hadoop 一些命令

    关闭访问墙  service iptables stop hadoop dfs -mkdir input hadoop dfs -copyFromLocal conf/* input hadoop j ...