初识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可以包含任何数据 ...
随机推荐
- 004-集成maven和Spring boot的profile功能打包
参考地址:https://blog.csdn.net/lihe2008125/article/details/50443491 一.主要目标 1.通过mvn在命令行中打包时,可以指定相应的profil ...
- 判断是否关注了微信公众号 subscribe 0=未关注 1=已关注
$appid=''; $secret=''; //微信网页授权获取openid $web_url='http://www.xxxx.com/shouquan.php'; if (!isset($_GE ...
- mysql数据库优化的几种方法
1.选取最适用的字段属性 MySQL可以很好的支持大数据量的存取,但是一般说来,数据库中的表越小,在它上面执行的查询也就会越快.因此,在创建表的时候,为了获得更好的性能,我们可以将表中字段的宽度设得尽 ...
- 修改WordPress标签云字体大小颜色及标签显示数量
WordPress 自带的标签云是一个很实用的小工具.站长可以通过标签对具有相同关健词的文章进行检索分类,利于访客查找相关文章.WordPress 默认标签云的字体最小为8pt,最大为22pt,标签显 ...
- Linux系统——VMware克隆
克隆VMware 1. 关闭防火墙 2. 关闭selinux 3. 删除UUID和Mac地址 4.清空网卡缓存 5.关机 ===================== 关闭防火墙 #service ip ...
- 【web Api性能提升技巧】（2）从DataReader手工创建Json字符串
这个思路是从 一篇文章,关于<提升web api的性能>上看到的.自己实践了一番,写下步骤. 传统的DataReader是遵循这样的一个步骤: While(reader.Read()) { ...
- 【转】js获取当前日期时间“yyyy-MM-dd HH:MM:SS”
获取当前的日期时间 格式“yyyy-MM-dd HH:MM:SS” 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function getNowFormatD ...
- Eclipse 导入Maven 项目报错
新建Maven项目时出错:org.apache.maven.archiver.MavenArchiver.getManifest 新建Maven项目时出错:org.apache.maven.arc ...
- Pentester中的XSS详解
本次做的是Web For Pentester靶机里面的XSS题目,一共有9道题目. 关于靶机搭建参考这篇文章:渗透测试靶机的搭建 第1题(无过滤措施) 首先在后面输入xss: http://10.21 ...
- hibernate的面向对象查询的效率有多低？
前言 老平台的查询速度很慢,需要进行优化(...说白了就是优化sql语句),老平台用的strus2+hibernate框架,查询基本都是使用的HSQL. 关于hsql HQL是Hibernate Qu ...