初识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可以包含任何数据 ...
随机推荐
- MyEclipse如何调试
我们在MyEclipse中jav添加断点,运行debug as-->open debug Dialog,然后在对话框中选类后--> Run在debug视图下.2.F5键与F6键均为单步调试 ...
- 009-Shell 函数
一.函数定义 linux shell 可以用户定义函数,然后在shell脚本中可以随便调用. shell中函数的定义格式如下: [ function ] funname [()] { action; ...
- Java集合—List(转载)
本篇文章将集中介绍了List集合相比Collection接口增加的一些重要功能以及List集合的两个重要子类ArrayList及LinkedList. 一.List集合 List作为Collectio ...
- Linux登录欢迎图案
命令提示符设置: export PS1='\n\[\e[37;1m[\]\[\e[31;1m\]\u\[\e[39;1m\]@\[\e[33;1m\]\H \[\e[34;1m\]\w\[\e[37; ...
- Windows 和 Linux 的文件名
Windows中文件名是区分大小写的,而Linux不区分. 在开发中,发现在Windows可以执行通过,在Linux可能由于文件名不一致而失败.
- C# 使用windows服务发送邮件
最近做了一个使用 C# 写了一个发送邮件的 windows 服务,在这里记录一下. 首先使用 Visual Studio 2015 创建一个 windows 服务项目. 然后在设计器上面右击添加安装程 ...
- cdoj1638 红藕香残玉簟秋,轻解罗裳,独上兰舟。
地址:http://acm.uestc.edu.cn/#/problem/show/1638 题目: 红藕香残玉簟秋,轻解罗裳,独上兰舟. Time Limit: 4000/2000MS (Java/ ...
- iOS 个人所得税 app 基础解析实践
前言:2019年 新个税实施在即,全国几乎所有在职员工都会下载“个人所得税”app来使用,并且 注册使用过程需要填写身份证号等相当私密重要的个人信息. 至今,各大app平台应用下载榜首仍然“无人能出其 ...
- JSON 转 对象
Json对象与Json字符串的转化.JSON字符串与Java对象的转换 一.Json对象与Json字符串的转化 1.jQuery插件支持的转换方式: $.parseJSON( jsonstr ); ...
- react-native 解决Could not find method android() for arguments问题
运行命令行:react-native run-android 报错 Error:(23, 0) Could not find method android() for arguments [****] ...