day15--JavaScript
上节作业回顾
<style></style>代表的是CSS样式
<script></script>代表的是JavaScript样式
1、CSS重用
<style>
.c1{
}
.c2{
}
<div class="c1 c2"></div>
2、自适应和改变大小变形
左右滚动条的出现
宽度，百分比（全部使用百分比就会变形）
页面最外层：像素的宽度（改变页面大小，自动出现滚动条）
<form> action="http://www.alex.com" method="GET" enctype="multi图片提交必须">
<input type="text" name="q" />
<input type="text" name="b" />
<input type="submit" />
</form>
GET:http://www.alex.com?q=用户输入
GET：http://www.alex.com?q=用户输入&b=用户输入
图片提交必须有enctype属性
CSS补充
position: 返回顶部，顶部菜单不动
position:
fixed固定在某处位置
relative 相对
absolute 绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c{
width:70px;
height:50px;
background-color:black;
color:white;
line-height:50px;
position:fixed; #固定在某处，下面是设置固定的地方
bottom:20px;
right:10px;
}
</style>
<!-- position属性的fixed代表固定在某处，定义position后，有四个属性，top,left,right,bottom，距离屏幕的四个位置 -->
</head>
<body>
<div class="c">返回顶部</div>
<div style="height:5000px;background-color:aliceblue;"></div>
<!-- 两个块级标签，层叠的形式，要想实现放置底部的效果，要实现网页分层的效果 -->
</body>
</html>
首行固定，漂浮在网页顶端，两层网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--position属性的fixed是固定网页，margin-top属性是自动让标签距屏幕的距离，fixed固定屏幕，固定了标签，不会动的 -->
<title>Title</title>
<style>
.c1{
background-color:black;
height:30px;
color:white;
position:fixed;
left:;
right:;
top:;
}
.c2{
background-color:pink;
height:5000px;
margin-top:31px;
}
</style>
</head>
<body>
<div class="c1">顶部网页</div>
<div class="c2">下面网页的信息</div>
<div>草，怎么看不见华伦</div>
<div>我擦，真的看不见呀，你妈妈的</div>
</body>
</html>
上面HTML代码中，position属性中的fixed是固定网页，而margin-top是让<div>标签距屏幕的距离，不会固定，是相对屏幕顶部位置。
relative相对,本身单独positive:relative是没有任何效果的
absolute绝对定位
relative + absolute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
position:relative;
width:500px;
height:200px;
border:1px solid red;
margin: auto;
}
.c2{
position:absolute;
left:;
bottom:;
height:50px;
width:50px;
background-color:black;
border: 1px solid pink;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2"></div>
</div>
<div class="c1"></div>
<div class="c1"></div>
</body>
</html>
在父级标签中添加位置
网页分层，很多网页点开都有三层，如知乎的注册，点开之后有三层显示，最外层让用户注册
CSS中标签中,opacity用来设置透明度，范围是0--1
z-index指定层级，网页可以设置多层，z-index值大的在最外层。
margin-left，相对左边移动，margin-top相对顶端移动，相对框的最左边进行移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 边框的居中是相对左上角，因此要向真正居中，要进行调整，分成一半上下调整 -->
<style>
.c1{
margin: auto;
background-color:green;
height:5000px;
z-index:;
}
.c2{
z-index:;
position:fixed;
background-color:white;
height:400px;width:500px;
left:%;
top:%;
border:1px solid deeppink;
margin-left:-250px;
margin-top:-200px;
}
</style>
</head>
<body>
<div class="c2">我们一家亲</div>
<div style="z-index:9;position:fixed;background-color:black;top:0;left:0;bottom:0;right:0;opacity:0.8"></div>
<!-- 让网页外层变成透明的，需要一个属性，opacity，范围0-,opacity用来设置透明度-->
<div class="c1">最里面的一层</div>
</body>
</html>
框架，各种框架的作用，页面上显示内容。
display:none取消显示框，显示框的显示与取消。display:none弹框消失
<div></div>标签里面设置图片的高度和宽度
<div style="height:200px;width:300px>
<img src="图片地址" />
</div>
上面<div>标签中，<img>标签，<div>设置了高度和宽度，但是图片的高度和宽度比设置的要大，则会撑开，<div>设置的高度和宽度就没有效果。
<div>标签中的overflow设置图片的形式，overflow:hidden超过部分隐藏；overflow:auto，超过部分出现滚动条。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c{ }
</style>
</head>
<body>
<div style="height:300px;width:400px;overflow:auto;">
<img src="xiaohua.jpg" style="height:200px;width:300px;"/>
</div>
<!-- overflow中，hidden是如果图片大小超过设置的大小，则隐藏超过的部分，auto是滚动条，在设置的框架内设置拉向两端的滚动条 -->
<!-- 如果想完全显示，可以给图片本身定义高度和宽度，这时候跟<div>的高度和宽度无关了，但是尽可能要一致 -->
</body>
</html>
移动变颜色，移动到图片上面，颜色会变化，菜单上变化颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
position:fixed;
right:;
left:;
top:;
height:48px;
background-color:#2459a2;
line-height:48px;
}
.pg-body{
margin-top:50px;
}
.w{
width:980px;
margin: auto;
}
.pg-header .menu{
display:inline-block;
padding: 10px;
color:white;
}
.pg-header .menu:hover{
background-color:blue;
}
</style>
<!-- hover的作用是当标签移动到上面的时候CSS执行hover的里面定义的效果 -->
<!-- padding代表上下左右边距都要增加10px,padding设置宽度，高度，上下左右,上下左右都增加10个像素(px) 上右下左 -->
</head>
<body>
<div class="pg-header">
<div class="w">
<a class="menu" href="http://www.baidu.com" target="_blank">LOGO</a>
<a class="menu">全部</a>
<a class="menu">42区</a>
<a class="menu">段子</a>
<a class="menu"></a>
</div>
</div>
<!-- a标签之间如何设置间距，可以设置宽度和告诉，a标签默认是没有高度和宽度的，行内标签，要进行转换为块级标签 -->
<!-- a标签默认行内标签，自身定义了高度和宽度，不能设置宽度和高度，除非进行转换，转化为块级标签 -->
<div class="pg-body">asdfasdf</div>
</body>
</html>
.pg-header .menu:hover{}代表的含义是，只有当鼠标移动到.pg-header .menu指定的样式上，CSS才会执行hover里面定义的CSS样式，display:inline-black用来让块级标签拥有行内标签的属性，行内标签具有块级标签的属性，这个很重要，在改造行内标签（比如<a>标签）的时候很有效，可以定义高度和宽度，拉开<a>标签之间的间距。
背景图片
background-image:url(图片地址)，放置图片
background-repeat:repeat-x,向x方向延伸；repead-y向y方向延伸
background-repeat:no-repeat
background-image与background-repeat结合使用
点赞，私藏，手的图片，如何设置的，使用background-position来进行设置的
如何获取上面图片的一个，很多网站的点赞，评论图标都是一张图片，利用background-position来进行调节，如下：
background-position:
background-position-x
background-position-y #用来对图片抠图
设置图片的移动，背景移动，x,y方向移动，处理图片的移动，背景的移动，背景可以是图片。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height:100px;width:20px;"></div>
<div style="background-image:url(点赞.png);height:20px;background-repeat:no-repeat;border:1px solid red;width:20px;"></div>
</body>
</html>
背景图片的移动，从一张图片的位置来会移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.c1{
background-image:url(login.png);
width:40px;
height:40px;
background-position-x:5px;
background-position-y: 80px;
display:inline-block;
position:absolute;
top:5px;
right:5px;
}
</style>
</head>
<body>
<div style="height:50px;width:400px;position:relative;">
<input type="text" name="username" style="height:50px;width:390px;padding-right:10px;"/>
<span class="c1"></span>
</div>
</body>
</html>
上面HTML代码实现的是输入框分层的情况，在input框里面增加一个图标。
day15--JavaScript的更多相关文章
- Python一路走来 DAY15 Javascript
JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理. 一 如何编写 ...
- Day15 HTML补充、初识JavaScript
一.上节回顾 上节回顾: HTML 头部信息:编码.title.style.link(导入css文件) 身体: 内联 块级 --->inline-block(既有内联效果又有块级效果) a标签: ...
- python_way day15 HTML-DAY2 HTML-DAY2、JS
python_way day15 HTML-DAY2 html-css回顾 javascript 一.html-css回顾 1.input与+,-号的写法 <!DOCTYPE html> ...
- python开发学习-day15(前端部分知识、web框架、Django创建项目)
s12-20160430-day15 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: ...
- python_way day15 HTML-DAY2、 回顾HTML-CSS 标签（css强制生效），JS（数据类型，时间处理，作用域）
python_way day15 HTML-DAY2 html-css回顾 javascript 一.html-css回顾 增加默认值: . 强制生效,就算在上面,被覆盖上了也会生效 解决缩小页面混乱 ...
- JavaScript之父Brendan Eich，Clojure 创建者Rich Hickey，Python创建者Van Rossum等编程大牛对程序员的职业建议
软件开发是现时很火的职业.据美国劳动局发布的一项统计数据显示,从2014年至2024年,美国就业市场对开发人员的需求量将增长17%,而这个增长率比起所有职业的平均需求量高出了7%.很多人年轻人会选择编 ...
- javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈
Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...
- Javascript 的执行环境(execution context)和作用域(scope)及垃圾回收
执行环境有全局执行环境和函数执行环境之分,每次进入一个新执行环境,都会创建一个搜索变量和函数的作用域链.函数的局部环境不仅有权访问函数作用于中的变量,而且可以访问其外部环境,直到全局环境.全局执行环境 ...
- 探究javascript对象和数组的异同，及函数变量缓存技巧
javascript中最经典也最受非议的一句话就是:javascript中一切皆是对象.这篇重点要提到的,就是任何jser都不陌生的Object和Array. 有段时间曾经很诧异,到底两种数据类型用来 ...
- 读书笔记：JavaScript DOM 编程艺术（第二版）
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
随机推荐
- asp.net mvc url应用
//url加密与解密string res1 = HttpUtility.UrlEncode("7Z2K5Lgk/iI="); //值是7Z2K5Lgk%2fiI%3d string ...
- Ubuntu16.04安装搜狗拼音输入法（中文输入法）
虽然网上有很多教程,但是我觉得我的很适合那些真正的小白... 1.下载文件 由于我要给多台电脑安装搜狗输入法,所以用的是文件夹安装,不是命令行安装. 打开官网http://pinyin.sogou.c ...
- hdp3: regionserver running as process 3170. Stop it first.
1 启动hbase报错 hdp3: regionserver running as process 3170. Stop it first. 2 始终没有发现错误日志 3 jps没有发现hbase的r ...
- mysql 案例~关于pt-osc工具的用途
简介:今天咱们聊聊PT-OSC的东东一 简单介绍 1 标准组合 pt-online-schema-change --user= --password= --host= D=,t= --sock= ...
- windows cmd相关操作
一:文件夹1. 新建文件夹方式一:md[盘符:\][路径\]新目录例如:md c:\test\newtest 方式二:先使用cmd进入需要新建文件的根目录下,使用md或者mkdir 直接创建文件夹ne ...
- 同步sync 异步async
线程中 同步任务是串行队列,也就是按顺序执行. 同步任务:不会开辟新的线程,它是在当前线程执行的. dispatch 调度 GCD里面的函数都是以dispatch开头的. 同步任务 步骤: 1. ...
- IDEA常用快捷键和常用插件集成,持续更新......
用习惯了eclipse,不容易转过来,记一下! 快捷键 psvm: main 方法快捷键 sout :syso快捷键 CTRL+O: 重写父类方法 Ctrl+Alt+V :自动补全返回值 Ctrl+S ...
- Linux 获取设备树源文件（DTS）里描述的资源【转】
转自:http://www.linuxidc.com/Linux/2013-07/86839.htm 转自:http://blog.sina.com.cn/s/blog_636a55070101mce ...
- Linux下查看文件或文件夹大小的命令df 、du、ls
转自:http://www.cnblogs.com/benio/archive/2010/10/13/1849946.html 当磁盘大小超过标准时会有报警提示,这时如果掌握df和du命令是非常明智的 ...
- telnet不能用！！！提示：-bash: telnet: command not found
1.[root@localhost ~]# telnet 2. 查询了是否安装Telnet包,结果如下: telnet-server-0.17-47.el6.i686 [xinetd (pid ...