css+js自动化开发之第十五天
一、css上一篇的补充
1、position(页面分层)
(1)fiexd将标签固定在页面的某个位置
position属性:top,left,right,bottom
(2)relative+absolute配合使用,定位到父标签框的相对位置
<div style="position: relative;background-color: #339ba3;height: 200px;width: 500px;border: 1px solid red;margin: 0 auto">
<div style="position: absolute;bottom: 0;left: 0;width: 50px;height: 50px;background-color: #0f0f0f"></div>
</div>
2、opacity 页面的透明度 0-1
3、z-index:针对多层来设置的,层级顺序,值越高处于越上层
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.one-level{
background-color:white;
z-index:10;
position: fixed;
width: 500px;
height: 400px;
top: 50%;
left: 50%;
margin-top:-200px;
margin-left: -250px;
display: block;
}
.tow-level{
background-color:black;
z-index:5;position: fixed;
opacity: 0.5;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
}
</style>
</head>
<body>
<div class="one-level">
<input type="text" name="user" value="老男孩"/>
<input type="text" name="user" value="老男孩"/>
<input type="text" name="user" value="老男孩"/>
</div>
<div class="tow-level"></div>
<div style="height: 5000px;background-color: #1ba157;"></div>
</body>
</html>
4、overflow:
(1)hidden:只显示图片的部分
<div style="height: 200px;width: 300px;overflow: hidden">
<img src="1.jpg">
</div>
(2)auto:图片有滚动条
<div style="height: 200px;width: 300px;overflow: auto">
<img src="1.jpg">
</div>
5、hover
当鼠标移动到所在标签上时,当前标签设置的css属性才生效
设置方法是css后加hover:
aaarticlea/png;base64,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" alt="" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
position: fixed;
top:0;
left: 0;
right: 0;
height: 48px;
line-height: 48px;
background-color: #1ba157;
}
.w{
margin: 0 auto;
width: 980px;
}
.pg-header .menu{
display: inline-block;
padding: 0 10px;
color: white;
}
.pg-header .menu:hover{
background-color: #b92c28;
}
.pg-body{
margin-top: 50px;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="w">
<a class="logo">logo</a>
<a class="menu">全部</a>
<a class="menu">42区</a>
<a class="menu">段子</a>
<a class="menu">1024</a>
</div>
</div>
<div class="pg-body">adafsdfj;sdkjf</div>
</body>
</html>
6、background:背景
(1)background-image(背景图片)
默认:div比图片大的话,图片会重复拼接,且上下都会拼接满
(2)background-repeat(图片重复拼接,以及是x横向,y纵向是否开启拼接)
no-repeat不重复拼接;
repeat-x只横向拼接;
repeat-y只纵向拼接
*(3)background-position-x: 10px;背景图片横移10像素(正向右移动,负向左移动)
background-position-y:10px;背景图片纵向移动10像素(正向下移动,负向上移动)
以上的另一种写法background-position:10px 10px;
二、javascript
1、javascript是独立的语言,在浏览器中具有相应js的解释器
2、js代码的存在形式:
(1)在head中存在
<script>
//javascript代码
alert(123);
</script>
<script type="text/javascript">
//javascript代码
alert(123);
</script>
(2)以文件的形式存在
调用代码:<script src='js文件路径'> </script>
(3)ps(默认):js代码放在body标签内的最后部分
3、注释
行注释://
多行注释:/* 内容 */
4、变量
name= “xxxx” 全局变量
var name = “xxxx” 局部变量
5、写js代码
(1)写在html文件中编写
(2)临时测试,可以在浏览器的console中
6、基本数据类型
(1)数字
a = 18
(2)字符串
a = “alex”
a.charArt(索引的位置)
a.substring(起始位置,结束位置) 不包括结束位置
a.length 获取当前a字符串的长度
具体可以查看 武sir的js链接地址:http://www.cnblogs.com/wupeiqi/articles/5602773.html
(3)数组 (类似于python的列表)
a = [11,22,33]
(4)字典
a= {"k1":"v1","k2":"v2"}
(5)布尔类型
python中的True及False,首字母是大写
js中是小写true及false
7、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)循环时,类似shell的i++
for(var i=0;i<10;i=i+1){
}
a = [11,22,33,44]
for(var i=0;i<a.length;i=i+1){
}
此不支持字典的循环
8、条件语句
if(条件){
}else if(条件){
}else if(条件){
}else{
}
== 值相等 !=不相等
=== 值和类型都相等 !==不相等
&& and
|| or
9、函数
function 函数名(a,b,c){
}
函数名(1,2,3)
三、DOM document 操作
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
css+js自动化开发之第十五天的更多相关文章
- 【D3.V3.js系列教程】--(十五)SVG基本图形绘制
[D3.V3.js系列教程]--(十五)SVG基本图形绘制 1.path <!DOCTYPE html> <html> <head> <meta charse ...
- Senparc.Weixin.MP SDK 微信公众平台开发教程(十五):消息加密
前不久,微信的企业号使用了强制的消息加密方式,随后公众号也加入了可选的消息加密选项.目前企业号和公众号的加密方式是一致的(格式会有少许差别). 加密设置 进入公众号后台的“开发者中心”,我们可以看到U ...
- 提高你开发效率的十五个Visual Studio 2010使用技巧
提高你开发效率的十五个Visual Studio 2010使用技巧 相信做开发的没有不重视效率的.开发C#,VB的都知道,我们很依赖VS,或者说,我们很感谢VS.能够对一个IDE产生依赖,说明这个ID ...
- iOS 11开发教程(十五)iOS11应用视图的位置和大小
iOS 11开发教程(十五)iOS11应用视图的位置和大小 当一个视图使用拖动的方式添加到主视图后,它的位置和大小可以使用拖动的方式进行设置,也可以使用尺寸检查器面板中的内容进行设置,如图1.52所示 ...
- 网站开发进阶(二十五)js如何将html表格导出为excel文件
js如何将html表格导出为excel文件 赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,共勉! jsp页面数据导出成excel的方法很 ...
- html+css+js+Hbuilder开发一款安卓APP,根本不用学Android开发!
我们知道,要做一款安卓APP,咱们得先学安卓开发语言,例如java,前端后端.那么没有这些开发语言基础,咱们怎么做呢?其实现在有比较好的开发方案就是做webAPP,咱们可以用web前端知识构建安卓客户 ...
- 程序员与年龄:四十岁普通开发、三十五岁首席架构、三十岁基层Leader
最近,有一个词儿特别热门--躺平.有没有人跟你说过:"躺平说起来容易,做起来更容易." 和躺平相对的是另外一个词--内卷,群聊的时候,已经很多次看过草卷起来了.jpg表情包.某些节 ...
- 淘宝(阿里百川)手机客户端开发日记第十五篇 JSON解析(四)
解析一个从淘宝传递的JSON (大家如有兴趣可以测试下):{ "tae_item_detail_get_response": { "data": { " ...
- Python开发【第十五篇】:Web框架之Tornado
概述 Tornado 是 FriendFeed 使用的可扩展的非阻塞式 web 服务器及其相关工具的开源版本.这个 Web 框架看起来有些像web.py 或者 Google 的 webapp,不过为了 ...
随机推荐
- Openstack部署工具
Openstack发展很猛,很多朋友都很认同,2013年,会很好的解决OpenStack部署的问题,让安装,配置变得更加简单易用. 很多公司都投入人力去做这个,新浪也计划做一个Openstack的is ...
- c#基础编程—泛型
一.引言 泛型的主要思想是将算法与数据结构完全分离开,使得一次定义的算法能作用于多种数据结构,从而实现高度可重用的开发.泛型,通过参数类型化来实现在同一份代码中操作多种数据类型,利用“参数化类型”将类 ...
- 【Android - 框架】之Dagger2+MVP的用法
MVP模式本身相比于MVC模式就已经把View层和Controller层从Activity中进行了分离,将Model层和View层用Presenter层隔开,实现了初步的解耦.如果再加入Dagger2 ...
- C#将数据以XML格式写入Excel
本文转载:http://www.cnblogs.com/eflylab/archive/2008/09/21/1295580.html c#将数据导入Excel另类方法 今天公司突然给个Excel模版 ...
- 如何彻底删除SVN中的文件和文件夹(附恢复方法)
在SVN中如果删除某个文件或文件夹也可以在历史记录中进行找回,有的时候需要彻底删除某些文件,即不希望通过历史记录进行恢复,需要在服务器上对SVN的数据进行重新整理 这里假设SVN项目的目录为 /dat ...
- [CSS] @keyframes
@keyframes swing{ 0% { transform: rotate(0deg)} 100% {transform: rotate(-30deg)} } #sweetlandia{ ani ...
- [RxJS] Aggregating Streams With Reduce And Scan using RxJS
What is the RxJS equivalent of Array reduce? What if I want to emit my reduced or aggregated value a ...
- cs模式与bs模式
关于CS(Client-Server)模式和BS(Browser-Server)模式的水很深,盆地自己也认为对此了解不够透彻,但作为手机客户端设计,如果不对CS.BS做一定程度的了解,是很容易出现一 ...
- IOS-tableView中的cellHeadView随着table滚动
IOS-tableView中的cellHeadView随着table滚动 设置table的style 首先要将table设置为UITableViewStyleGrouped类型.这样就会得到table ...
- css选择器优化
css选择器优化@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@impor ...