初识HTML和CSS2
上节作业问题：
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的更多相关文章
- 【CSS3】 - 初识CSS3
.navdemo{ width:560px; height: 50px; font:bold 0/50px Arial; text-align:center; margin:40px auto 0; ...
- Android动画效果之初识Property Animation（属性动画）
前言: 前面两篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画).Frame Animation(逐帧动画)Andr ...
- 初识Hadoop
第一部分: 初识Hadoop 一. 谁说大象不能跳舞 业务数据越来越多,用关系型数据库来存储和处理数据越来越感觉吃力,一个查询或者一个导出,要执行很长 ...
- python学习笔记（基础四：模块初识、pyc和PyCodeObject是什么）
一.模块初识(一) 模块,也叫库.库有标准库第三方库. 注意事项:文件名不能和导入的模块名相同 1. sys模块 import sys print(sys.path) #打印环境变量 print(sy ...
- 初识IOS,Label控件的应用。
初识IOS,Label控件的应用. // // ViewController.m // Gua.test // // Created by 郭美男 on 16/5/31. // Copyright © ...
- UI篇（初识君面）
我们的APP要想吸引用户,就要把UI(脸蛋)搞漂亮一点.毕竟好的外貌是增进人际关系的第一步,我们程序员看到一个APP时,第一眼就是看这个软件的功能,不去关心界面是否漂亮,看到好的程序会说"我 ...
- Python导出Excel为Lua/Json/Xml实例教程（一）：初识Python
Python导出Excel为Lua/Json/Xml实例教程(一):初识Python 相关链接: Python导出Excel为Lua/Json/Xml实例教程(一):初识Python Python导出 ...
- 初识SpringMvc
初识SpringMvc springMvc简介:SpringMVC也叫Spring Web mvc,属于表现层的框架.Spring MVC是Spring框架的一部分,是在Spring3.0后发布的 s ...
- 初识redis数据类型
初识redis数据类型 1.String(字符串) string是redis最基本的类型,一个key对应一个value. string类型是二进制安全的.意思是redis的string可以包含任何数据 ...
随机推荐
- PAT 1146 Topological Order[难]
1146 Topological Order (25 分) This is a problem given in the Graduate Entrance Exam in 2018: Which o ...
- 11g ASM新特性
Oracle 11g的ASM有两个有意思的特性,我们看看他们能带给我们什么? 1.Fast mirror resync 原来当diskgroup中的盘发生故障时,Oracle会将这个盘标记为offli ...
- lua全局状态机
本文内容基于版本:Lua 5.3.0 global_State概述 global_State结构,我们可以称之为Lua全局状态机.从Lua的使用者角度来看,global_State结构是完全感知不到的 ...
- boost enable_shared_from_this
关于shared_ptr和weak_ptr看以前的:http://www.cnblogs.com/youxin/p/4275289.html The header <boost/enable_s ...
- docker——Dockerfile(一)
Dockerfile是一个文本格式的配置文件,用户可以使用Dockerfile来快速创建自定义的镜像.Dockerfile由一行行命令语句组成,并支持以#开头的注释行.一般而言,Dockerfile分 ...
- pc端样式初始化
pc端样式初始化: /* http://meyerweb.com/eric/tools/css/reset/ /* http://meyerweb.com/eric/tools/css/reset/ ...
- Java反射在整个程序运行中的位置
①java的核心机制 java有两种核心机制:java虚拟机(JavaVirtual Machine)与垃圾收集机制(Garbage collection): ①Java虚拟机:是运行所有Java程序 ...
- Java ArrayList详细介绍和使用示例
①对ArrayList的整体认识 ArrayList是一个数组队列,相当于动态数组.与Java中的数组相比,它的容量能动态增长.它继承了AbstractList,实现了List,RandomAcces ...
- 谷歌技术"三宝"之BigTable(转)
原文地址: http://blog.csdn.net/opennaive/article/details/7532589 2006年的OSDI有两篇google的论文,分别是BigTable和Ch ...
- git删除本地分支和删除远程分支
引言: 切换分支的时候命令打错了,git checkout 后面没有跟分支名,结果git status,很多delete的文件,直接冒冷汗,git add ,commit 之后发现本地与远程确实是删除 ...