初识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可以包含任何数据 ...
随机推荐
- 013-HQL中级3-Hive四种数据导入方式介绍
Hive的几种常见的数据导入方式这里介绍四种:(1).从本地文件系统中导入数据到Hive表:(2).从HDFS上导入数据到Hive表:(3).从别的表中查询出相应的数据并导入到Hive表中:(4).在 ...
- #运算符、不同的指针类型、数组和指针、指针运算、堆、栈、静态区、只读区、下标VS指针
#运算符:用于在预编译期将宏参数转换为字符串 #define CONVERS(x) #x //注:没用双引号包括. 不同类型的指针占用的内存空间大小相同. 局部变量 定义: a[5]; 打印a[ ...
- 自定义admin管理工具(stark组件)
自定义admin管理工具(stark组件) 创建项目 了解了admin的功能后,我们可以开始仿照admin编写我们自己的管理工具stark组件 首先创建一个新的项目,并创建三个app stark就是我 ...
- 03 linux命令的操作
开启Linux操作系统,要求以root用户登录GNOME图形界面,语言支持选择为汉语 使用快捷键切换到虚拟终端2,使用普通用户身份登录,查看系统提示符 使用快捷键切换到虚拟终端5,使用管理员身份登录, ...
- PL/SQL Developer 登录 Oracle 12c和Win10下安装Oracle 11g
安装了Oracle 12c 后使用PL/SQL Developer怎么也不能连接到Oracle 12c.网上找一下,按照fcflying所说的操作成功了,所以做个笔记: 1)安装Oracle 12c ...
- log4j的配置和使用
日志记录 在应用程序中添加日志记录总的来说基于三个目的: 监视代码中变量的变化情况,周期性的记录到文件中供其他应用进行统计分析工作: 跟踪代码运行时轨迹,作为日后审计的依据:担当集成开发环境中的调试器 ...
- mysql时间戳转换成可读时间格式
代码: SELECT FROM_UNIXTIME(1234567890, '%Y-%m-%d %H:%i:%S') 附:在mysql中,一个时间字段的存储类型是int(11),怎么转化成字符类型,比方 ...
- 在eclipse中new 对象后怎么通过快捷键自动生成返回对象
如题,每次new 对象的时候不想手动补全返回对象,可以实现快捷键生成返回对象.new 对象后可以按住ctrl+1,如下图: 选择第一行即可.
- Linux查看端口占用情况,并强制释放占用的端口
1.查找被占用的端口 netstat -tln netstat -tln | grep 8080 netstat -tln 查看端口使用情况,而netstat -tln | grep 8080则是只查 ...
- java内存空间
Java内存分配与管理是Java的核心技术之一,之前我们曾介绍过Java的内存管理与内存泄露以及Java垃圾回收方面的知识,今天我们再次深入Java核心,详细介绍一下Java在内存分配方面的知识.一般 ...