Css、javascript、dom(二)
一、css常用标签及页面布局
1、常用标签
position(定位)
z-index(定位多层顺序)
background(背景)
margin(外边距)
padding(内边距)
font-size(字体大小)
over-flow(修剪hidden,srcoll,auto)
:hover(设置对象在鼠标悬停时的样式)
opacity(页面透明度)
float(让标签浮动起来)
clear:both(让浮动标签沉下来)
text-align(针对字符自动左右居中)
line-height(上下居中)
border(边框)
color(字体颜色)
display(设置或检索对象是否及如何显示)
2、两种页面布局
(1)主站
查看完整代码
- <div class='pg-header'>
- <div style='width:980px;margin:0 auto;'>
- 内容自动居中
- </div>
- </div>
- <div class='pg-content'></div>
- <div class='pg-footer'></div>
(2)后台管理布局
position:
fiexd --永远固定在窗口的某个位置
relative --单独无意义
absolute --第一次定位,可以在指定的位置;滚轮滚动时,就变了
a、左侧菜单跟随滚动条
b、左侧及以上不动
查看完整代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"/>
- <style>
- body{
- margin: 0;
- }
- .left{
- float: left;
- }
- .right{
- float: right;
- }
- .pg-header{
- height: 48px;
- background-color: #2459a2;
- color: white;
- line-height: 48px;
- }
- .pg-header .logo{
- width: 200px;
- background-color: #204982;
- text-align: center;
- }
- .pg-header .icons{
- padding: 0 20px;
- }
- .pg-header .icons:hover{
- background-color: #204982;
- }
- .pg-header .user{
- margin-right: 60px;
- padding: 0 20px;
- color: white;
- height: 48px;
- }
- .pg-header .user:hover{
- background-color: #204982;
- }
- .pg-header .user .a img{
- height: 40px;width: 40px;margin-top: 4px;border-radius: 50%;
- }
- .pg-header .user .b{
- z-index: 20;
- position: absolute;
- top: 48px;
- right: 0;
- background-color: white;
- color: black;
- width: 160px;
- display: none;
- font-size: 14px;
- line-height: 30px;
- }
- .pg-header .user .b a{
- padding: 5px;
- color: black;
- text-decoration: none;
- }
- .pg-header .user .b a:hover{
- background-color: #dddddd;
- }
- .pg-header .user:hover .b{
- display: block;
- }
- .pg-header .user .b a{
- display: block;
- }
- .pg-content .menu{
- position: absolute;
- top:48px;
- left: 0;
- bottom: 0;
- width: 200px;
- background-color: #dddddd;
- }
- .pg-content .content{
- position: absolute;
- top: 48px;
- right: 0;
- bottom: 0;
- left: 200px;
- overflow: auto;
- z-index: 9;
- }
- </style>
- </head>
- <body>
- <div class="pg-header">
- <div class="logo left">
- 老男孩
- </div>
- <div class="user right" style="position: relative">
- <a class="a" href="#">
- <img src="22.jpg">
- </a>
- <div class="b">
- <a href="#">我的资料</a>
- <a href="#">注销</a>
- </div>
- </div>
- <div class="icons right">
- <i class="fa fa-commenting-o" aria-hidden="true"></i>
- <span>5 </span>
- </div>
- <div class="icons right">
- <i class="fa fa-bell-o" aria-hidden="true"></i>
- </div>
- </div>
- <div class="pg-content">
- <div class="menu left">a</div>
- <div class="content left">
- <!--<div style="position: fixed;bottom:0;right:0;width: 50px;height: 50px;">返回顶部</div>-->
- <!--<div style="position: absolute;bottom:0;right:0;width: 50px;height: 50px;">返回顶部</div>-->
- <div style="background-color: purple">
- <p style="margin: 0;">asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
- <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
- <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
- <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
- <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
- <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
- <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
- <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
- <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
- <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
- <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
- <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
- <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
- <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
- <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
- <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
- <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
- <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
- <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
- </div>
- </div>
- </div>
- <div class="pg-footer"></div>
- </body>
- </html>
二、js回顾及补充
1、for循环的两种写法
查看完整代码
- for(var item in [11,22,33]){
- console.log(item);
- continue;
- }
for 1
- var arra = [11,22,32,3]
- for(var i=0;i<arra.lenght;i=i+1){
- break;
- }
- while(条件){
- }
- for i
for 2
2、条件语句的写法
查看完整代码
- if(){
- }else if(){
- }else{
- }
- name='3';
- switch(name){
- case '1':
- age = 123;
- break;
- case '2':
- age = 456;
- break;
- default :
- age = 777;
- }
3、函数
(1)普通函数
查看完整代码
- function func(){
- }
(2)匿名函数
查看完整代码
- function func(arg){
- return arg+1
- }
- setInterval("func()", 5000);
- setInterval(function(){
- console.log(123);
- },5000)
(3)自执行函数(创建函数并且自动执行)
查看完整代码
- function func(arg){
- console.log(arg);
- }
- // func(1)
- (function(arg){
- console.log(arg);
- })(1)
4、序列化
JSON.stringify() 将对象转换为字符串
JSON.parse() 将字符串转换为对象类型
5、转义
客户端(cookie) ---> 服务器
将数据经过转义后,保存在cookie
代码示例:
6、eval
python的eval:
val = eval(表达式)
val = exec(执行代码)
JavaScript:
eval包含上面的两种功能
7、时间
Date类
var d = new Date()
d.getXXX 获取时间
d.setXXX 设置时间
8、作用域
(1)函数作为作用域
a、其他语言:以代码块作为作用域
public void Func(){
if(1==1){
string name = 'Java';
}
console.writeline(name);
}
Func()
// 报错 这里以{}为代码块,name在另一个{},里外面的console.writeline(name)调用不了
b、Python:以函数作为作用域
情况一:
def func():
if 1==1:
name = 'alex'
print(name) #这个name是在func函数里的
func()
// 成功
情况二:
def func():
if 1==1:
name = 'alex'
func()
print(name) #这里的name是拿不到函数func里的name的
// 报错
c、JavaScript:默认是以函数作为作用域的
function func(){
if(1==1){
var name = 'alex';
}
console.log(name);
}
func()
(2)函数的作用域在函数未被调用之前已经创建
查看完整代码
- function func(){
- if(1==1){
- var name = 'alex';
- }
- console.log(name);
- }
(3)函数的作用域存在作用域链(函数嵌套关系),并且也是在未被调用前创建
示例一:
查看完整代码
- xo = "alex";
- function func(){
- // var xo = 'eric';
- function inner(){
- // var xo = 'tony';
- console.log(xo);
- }
- inner()
- }
- func()
示例二:
查看完整代码
- xo = "alex";
- function func(){
- var xo = 'eric';
- function inner(){
- console.log(xo);
- }
- return inner;
- }
- var ret = func()
- ret()
示例三:
查看完整代码
- xo = "alex";
- function func(){
- var xo = 'eric';
- function inner(){
- console.log(xo);
- }
- var xo = 'tony';
- return inner;
- }
- var ret = func()
- ret()
(4)函数内局部变量 声明提前
查看完整代码
- function func(){
- console.log(xxoo);
- }
- func();
- // 程序直接报错
- function func(){
- console.log(xxoo);
- var xxoo = 'alex';
- }
- 解释过程中:var xxoo;
- func();
- // undefined
9、JavaScript面向对象
查看完整代码
- function foo(){
- var xo = 'alex';
- }
- foo()
- function Foo(n){
- this.name = n;
- this.sayName = function(){
- console.log(this.name);
- }
- }
- var obj1 = new Foo('we');
- obj1.name
- obj1.sayName()
- var obj2 = new Foo('wee');
- obj2.name
- obj2.sayName()
- ==============》
- a. this代指对象(python self)
- b. 创建对象时, new 函数()
原型:
查看完整代码
- function Foo(n){
- this.name = n;
- }
- # Foo的原型
- Foo.prototype = {
- 'sayName': function(){
- console.log(this.name)
- }
- }
- obj1 = new Foo('we');
- obj1.sayName()
- obj2 = new Foo('wee');
三、DOM
1、查找
直接查找
var obj = document.getElementById('i1')
间接查找
文件内容操作:
innerText 仅文本
innerHTML 全内容
value
input value获取当前标签中的值
select 获取选中的value值(selectIndex)
textarea value获取当前标签中的值
2、操作:
(1)样式操作:
className
classList
classList.add classList.remove
(2)属性操作:
attributes getAttibute removeAttribute
Css、javascript、dom(二)的更多相关文章
- Python学习笔记整理总结【web基础】【web/HTML/CSS/JavaScript/DOM/jQuery】
一.HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以 ...
- Python 15 html 基础 - CSS &javascript &DOM
本节内容 CSS基础 javascript基础 DOM 前言,这边这块楼主已经很熟悉了,CSS天天用到,简单的一些javascript也是所以就挑点重点说了.然后就是dom不怎么用,但是其实也用不到, ...
- JavaScript DOM编程基础精华01(DOM入门,DOM模型和获取页面元素,事件,window对象的方法)
DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...
- 前端~HTML~CSS~JavaScript~JQuery~Vue
HTML CSS JavaScript DOM文档操作 jQuery实例 Vue
- javascript系列之DOM(二)
原文:javascript系列之DOM(二) 原生DOM扩展 我们接着第一部分来说,上文提到了两种常规的DOM操作:创建文档片段和遍历元素节点.我们知道那些雨后春笋般的库,有很大一部分工作就是提供了一 ...
- 通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二)
通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二) 效果:默认一直隐藏导航栏,当滚动条滚到超过300px按钮出现,点击回 ...
- 读书笔记:JavaScript DOM 编程艺术(第二版)
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
- html css javascript 加载的顺序
html /css /javascript 这三者的加载顺序影响整个页面的加载速度.而加载速度的快慢直接影响pv(访问量),而且会影响经济收入.在大网站中,可能打开速度快一秒,一年能多带来上亿的收入. ...
- 初探JavaScript(二)——JS如何动态操控HTML
除去五一三天,我已经和<JavaScript Dom编程艺术>磨合了六天,第一印象很好.慢慢的,我发现这是一块排骨,除了肉还有骨头.遇到不解的地方就会多看几遍,实在不懂的先跳过,毕竟,初次 ...
- javaScript DOM JQuery AJAX
http://www.cnblogs.com/wupeiqi/articles/5369773.html 一 JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript ...
随机推荐
- 关于iPhone设备不同显示尺寸适配的一些方法
关于iPhone设备不同显示尺寸适配的一些方法 ------关于适配的理解------ 1.什么是适配? 适配是对不同硬件和系统软件的适应,硬件包括屏幕显示,处理器,内存等等(目前主要是屏幕适配, ...
- .net web 小基累
获取当前网站的根目录:HttpContext.Current.Request.PhysicalApplicationPath+“Content”
- Redis 3.2 Linux 环境集群搭建与java操作
redis 采用 redis-3.2.4 版本. 安装过程 1. 下载并解压 cd /usr/local wget http://download.redis.io/releases/redis-3. ...
- IOS的MVC和MVVM模式简明介绍
iOS中的MVC(Model-View-Controller)将软件系统分为Model.View.Controller三部分,结构图如下: Model: 你的应用本质上是什么(但不是它的展示方式) C ...
- if语句中的判断条件(nginx)
if语句中的判断条件 正则表达式匹配: ==:等值比较; ~:与指定正则表达式模式匹配时返回"真",判断匹配与否时区分字符大小写: ~*:与指定正则表达 ...
- SQL优化----百万数据查询优化
百万数据查询优化 1.合理使用索引 索引是数据库中重要的数据结构,它的根本目的就是为了提高查询效率.现在大多数的数据库产品都采用IBM最先提出的ISAM索引结构.索引的使用要恰到好处,其使用原则如下: ...
- iOS 9后修改状态栏方法
1.plist文件中添加View controller-based status bar appearance字段 值为NO 2.程序中添加 [UIApplication sharedApplicat ...
- python不是内部或外部命令
原因是环境变量没有添加. 比如python安装再C:\Python27 环境变量path增加C:\Python27即可,不需重启. 但是之前报错的cmd窗口需要重新打开再执行python命令
- Leetcode: Encode String with Shortest Length && G面经
Given a non-empty string, encode the string such that its encoded length is the shortest. The encodi ...
- chattr的常用参数详解
chattr的常用参数详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在实际生产环境中,有的运维工程师不得不和开发和测试打交道,在我们公司最常见的就是部署接口.每天每个人部署的 ...