python 学习总结6 前端学习2

html与css的继续学习

1.css 书写可以在style处先设置一个标签的样式例如这个将图片的边框设置为0 为多余的边框，默认的img标签有一个1px的边框：

<head><meta charset="UTF-8"><title>Title</title><style>img{border: 0;}</style>
</head>
<body><a href="http://www.oldboyedu.com" >asdf</a><a href="http://www.oldboyedu.com"><img src="1.jpg" style="width: 200px;height: 300px;"></a>
</body>

CSS之Position

1.position : fixed => 固定在页面的某个位置

2.position : absoluted =>就是放在页面的某个位置

absolued+relative 可以将子标签放在父标签的某个位置

    <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;"><div style="position: absolute;left:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div></div><div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;"><div style="position: absolute;right:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div></div><div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;"><div style="position: absolute;right:0;top:0;width: 50px;height: 50px;background-color: black;"></div></div>

3.z-index可以在多个层的时候，设置层的次序

opacity: 0.5; 设置透明度超过一就变成深色了

 <div style=";z-index:10; position: fixed;top: 50%;left:50%;margin-left: -250px;margin-top: -200px; background-color:white;height: 400px;width:500px; "></div><div style=";z-index:9; position: fixed;background-color: black;top:0;bottom: 0;right: 0;left: 0;opacity: 0.5;"></div><div style="height: 5000px;background-color: green;">asdfasdf</div>

4.overflow :auto/hidden

    <!--超过宽度就出现进度条--><div style="height: 200px;width: 300px;overflow: auto"><img src="1.jpg"></div><!--超过宽度就隐藏--><div style="height: 200px;width: 300px;overflow: hidden"><img src="1.jpg"></div>

5.padding 补充 padding: 0 10px 0 10px; 每个参数的顺序是按一上为顺时针进行的；如果只有一个参数就是上下左右都间隔10px，0 px 10px =》说明

左右占据10px；

6. .class:hover 一触碰某个区域就会应用上某样式

        .pg-header{position: fixed;right: 0;left: 0;top: 0;height: 48px;background-color: #2459a2;line-height: 48px;}.pg-body{margin-top: 50px;}.w{width: 980px;margin: 0 auto;}.pg-header .menu{display: inline-block;padding: 0 10px 0 10px;color: white;}/*当鼠标移动到当前标签上时，以下css属性才生效*/.pg-header .menu:hover{background-color: blue;}</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"><div class="w">a</div></div>

7.我们可以在一个div白板中加入一系列图片，如果我们需要通过更改background-x/-y 就可以实现图片的移动实现展示的不同

background-image:url() background-repeat: no repeat/repeat-x/repeat-y

<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div style="height: 100px;"></div><div style="background-image: url(icon_18_118.png);background-repeat:no-repeat;height: 20px;width:20px;border: 1px solid red;"></div>
</body>

8.如何在一个input框内放一个图片呢？

注意padding 改完的Input边距后多出来的那部分是不可以输入数据的，目前为止我知道的就这一个input有这性质

    <div style="height: 35px;width: 400px;position: relative;"><input type="text" style="height: 35px;width: 400px;" /><span style="position:absolute;right:0;top:10px;background-image: url(i_name.jpg);height: 16px;width: 16px;display: inline-block;"></span></div>

9.javascript 学习

局部变量 var
基本数据类型：
数字
字符串
数组
字典
布尔值
For循环

条件语句
==
!=
===
!==

函数的定义：
function func(){
...
}

10.Dom操作

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

1、直接查找

document.getElementById             根据ID获取一个标签
document.getElementsByName          根据name属性获取标签集合
document.getElementsByClassName     根据class属性获取标签集合
document.getElementsByTagName       根据标签名获取标签集合

2、间接查找

parentNode          // 父节点
childNodes          // 所有子节点
firstChild          // 第一个子节点
lastChild           // 最后一个子节点
nextSibling         // 下一个兄弟节点
previousSibling     // 上一个兄弟节点parentElement           // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素

3.内容

innerText   文本
outerText
innerHTML   HTML内容
innerHTML
value       值

4.属性

attributes                // 获取所有标签属性
setAttribute(key,value)   // 设置标签属性
getAttribute(key)         // 获取指定标签属性/*
var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById('n1').setAttributeNode(atr);
*/

5.class操作

className                // 获取所有类名
classList.remove(cls)    // 删除指定类
classList.add(cls)       // 添加类

6.标签操作

1.创建标签

var tag = document.createElement('a')
tag.innerText = "wupeiqi"
tag.className = "c1"
tag.href = "http://www.cnblogs.com/wupeiqi"// 方式二
var tag = "<a class='c1' href='http://www.cnblogs.com/wupeiqi'>wupeiqi</a>"

2.样式操作

var obj = document.getElementById('i1')obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";

3.其他操作

console.log                 输出框
alert                       弹出框
confirm                     确认框// URL和刷新
location.href               获取URL
location.href = "url"       重定向
location.reload()           重新加载// 定时器
setInterval                 多次定时器
clearInterval               清除多次定时器
setTimeout                  单次定时器
clearTimeout                清除单次定时器

转载于:https://www.cnblogs.com/shidi/p/7597984.html

python 学习总结6 前端学习2相关推荐

适合新手小白学习的web前端学习路线图
Web前端是一个入行门槛较低的开发技术,但更是近几年热门的职业,web前端不仅薪资高发展前景好,是很多年轻人向往的一个职业,想学习web前端,那么你得找到好的学习方法,以下就给大家分享一份适合新手小白 ...
前端学习路线_前端学习路线图
2020年全新前端学习路线图分享给大家! 学习是一个循序渐进的过程,是一件非常难得坚持的事情.如果真的想学习前端开发,一定要下决心! 我这里分享给你的前端学习路线图,希望对你有帮助,以下为2020年更 ...
2020最新版前端学习路线图--让前端学习变得美如画
前端学习路线是螺旋上升的,前端学习需要耗费的时间和精力不比其他编程的少,由于前端稳健性的特点,使其成为大多数企业开发的刚需编程语言. 在网上看到有很多的前端学习路线图,但大部分的前端学习路线图是很零碎 ...
漫谈Web前端学习路线，前端学习路漫漫
前言最近总是会看到后很多人会问,我现在想学习Web前端开发,该如何下手,学习路线是怎样的?今天这篇文章,我来说说我自己对前端学习的理解,并结合一些面试中会常问到的问题来谈谈,如何才能在前端坑中,爬的 ...
Python攻城师————前端学习（jQuery框架、第三方框架bootstrap框架）
今日学习目标继续学习jQuery框架剩余的内容. 文章目录今日学习目标学习内容一.jQuery操作标签 class操作样式操作位置操作文本值操作属性操作文档处理操作二.jQuery ...
[前端学习笔记1] 前端学习路线
按顺序学习一.做网页 HTML:定义网页结构 CSS(Cascading style sheets 层叠样式表):对网页进行装饰 JS(JavaScript):网页与用户的交互效果,[重要] Web ...
2020最新版前端学习路线图--微信小程序制作原来如此简单
黑马程序员前端学习路线图大纲中第六阶段的学习是微信小程序的学习:主要介绍了前端学习路线图中微信小程序的学习目标,前端学习路线图中微信小程序的市场价值,前端学习路线图中微信小程序的重点知识.前端学习路线 ...
2020最新版前端学习路线图--手机网页还可以这么玩？
黑马程序员的前端学习路线图中第二阶段是移动Web网页开发的学习:主要介绍了前端学习路线图的移动web网页开发的学习目标,前端学习路线图的移动web网页开发的市场价值,前端学习路线图的移动web网页开发 ...
一个好的web前端开发者，是怎么学习的？前端开发培训机构哪个比较好
IT 行业的变化快是众人皆知的,需要持续去学习新的知识内容.但是,往往我们工作之后,经常发现学习的东西很少了,学习效率非常低,感觉自己到了一个瓶颈期,久而久之,就演变成『一年工作经验,重复去用十年』的 ...

python 学习总结6 前端学习2

python 学习总结6 前端学习2相关推荐

最新文章

热门文章