首页 > 代码库 > Python 学习第十六天 html 前端内容总结
Python 学习第十六天 html 前端内容总结
一，css知识总结
1, css属性
css的属性包括以下内容
position:规定元素的定位类型
background:属性在一个声明中设置所有的背景属性
可以设置的如下属性：
（1）background-color
（2）background-position
（3）background-size
（4）background-image
text-align:规定元素中的文本的水平对齐方式
margin:在一个声明中设置所有的外边距属性
padding:在一个声明中设置所有的内边距属性
font-size:可以设置字体的尺寸
z-index:设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低元素的前面
over-flow:规定是否对内容的上下边缘进行裁剪-如果溢出元素内容区域的话
:hover:用于选择鼠标指针浮动在上面的元素
opacity:设置元素的不透明级别
float(clear:both):设置元素在哪个方向浮动
line-height:设置行间的距离
border:设置边框
color:设置字体颜色
display:规定元素应该生成的框的类型
2,页面布局
（1）position的值 fiexd 永远固定在窗口某个位置 relative 单独设置没有效果，absolute单独设置会根据滑轮的位置变动而变动
（2）两种页面布局CSS代码
第一种，左侧菜单跟随滚动条
.pd-content .menu{
position:absolute;
top:48px;
left:0;
bottom:0;
width:200px
baclground-color:#dddddd;
}
.pd-content .content{
position:absolute;
top:48px；
right:0;
bottom:0;
left:200px；
background-color:purple;
}
第二种，左侧以及上面不动,相比第一种只需要在content 属性中添加overflow:auto属性
.pd-content .menu{
position:absolute;
top:48px;
left:0;
bottom:0;
width:200px
baclground-color:#dddddd;
}
.pd-content .content{
position:absolute;
top:48px；
right:0;
bottom:0;
left:200px；
background-color:purple;
overflow:auto;
}
3，用户登录栏设置
（1）户头像为圆形
border-radius:50%
（2）div 鼠标从上移入或从下移入，下面的div都变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item{
background-color: #dddddd;
}
.item:hover{
color:red;
}
.item:hover .b{
background-color: green;
}
</style>
</head>
<body>
<div class="item">
<div class="a">123</div>
<div class="b">456</div>
</div>
</body>
</html>
（3）设置小图标
下载font-awesome-4.7.0,在css 部位写上<link rel="stylensheet" href="http://www.mamicode.com/font-awesome-4.7.0/css/font-awesome.min.css"/>添加压缩版的css内容
二，Javascript 知识回顾
1，Javascript存在形式
（1）可以通过src 引入其它目录中的javascript文件，src需要放在body内容的最下面
（2） 在head 中写script代码
2，全局变量和局部变量区别在于：变量前面是否有var, 有var标注的变量为局部变量
3，数据类型：（1）数字（2）字符串（3）数组（4）对象（例如字典类型）
4，循环，两种新式
（1） for (var item in [11,22,33]）{ console.log(item（输出索引）}
（2） var arra = [11,22,32,33] for (var i=0;i<arra.lenght;i=i+1){}
5，条件语句
（1）if （）{}else if（）{}else{}
其中if判断中的==为值相等 ===为值和类型都相等
（2）switch(name){
case ‘1‘:
age=123;
break;
case ‘2‘
age=456;
break;
default:
age = 777;
}
6，函数 function func(arg) {
return arg+1
}
var result = func(1)
console.log(result);
7，javascript函数详解
（1）普通函数 function func(arg){ return arg+1 }
（2）匿名函数setInterval(function（）{console.log(123);},5000）
（3）自执行函数{function(arg){console.log(arg);}}(1)
8，序列化
li=[11,22,33,4,5] s=JSON.stringify(li) #将列表转化成字符串 newLi=JSON.parse(s) #将字符串转化成列表
9，转义中文
url = "https://www.sougou.com/web?query=理解” encodeURI(url) #转义url中的英文 newurl=encodeURI(url) decodeURI(newurl) #还原url escape() #对字符串转义 unescape() #给转义字符串解码
10，eval
val = eval(表达式)
exec(执行代码)
value=http://www.mamicode.com/eval("1+1")
11，时间
var d = new Date() #获取当前时间 n = d.getMinutes() +4 d.setMinutest(n) #设置时间
12，作用域
其他语言
public void Func () {
if (1==1){
string name="Java";
console.writeline(name); #可以正常返回
}
console.writeline(name); #报错
Func（）
在其他语言中已代码块为作用域，Python中已函数作为作用域，
1，javascript以函数作为作用域
function Func () {
if (1==1){
string name="Java";
}
console.writeline(name);
Func（） #可以正常返回
2，函数的作用域在函数未被调用之前，已被创建
3，函数的作用域存在作用域连，并且也是在被调用之前创建
xo= "alex"
function func(){
//var xo=‘eric’
function inner(){
// var xo=‘tony‘
console.log(xo);
}
inner()
}
func()
没有tony 返回eric ,没有eric返回alex
xo= "alex"
function func(){
var xo=‘eric’
function inner(){
var xo=‘tony‘
console.log(xo);
}
return inner;
}
var ret = func() #返回inner 函数对象
ret() #执行inner函数 最终返回eric
xo= "alex"
function func(){
var xo=‘eric’
function inner(){
var xo=‘tony‘
console.log(xo);
}
var xo = ‘tony‘;
return inner;
}
var ret = func() #返回inner 函数对象
ret() #执行inner函数 最终返回tony
4，函数内局部变量 提前声明
function func() {
console.log(xxoo);
var xxoo = ‘alex‘ #提前只声明var xxoo 并未赋值
}
func();
// undefined
14，JavaScript面向对象
function foo(){
this.name = ‘alex‘; #this相当于self
}
var object= new foo(); #创建一个object 对象
function Foo(n){
this.name = n #this相当于self
}
var object= new foo(‘we‘); #创建一个object 对象
和函数不同
1，this代指对象（Python self）
2，创建对象时，new函数（）
原型
function Foo(n){
this.name = n; #只创建一次 原型也只创建一次
}
Foo.prototype = { #原型类似于字典
‘sayName‘: function(){
console.log(this.name)
}
}
obj1 = new Foo(‘we‘) #通过obj1 先找到类，然后再找到原型执行
obj2 = new Foo(‘wee‘)
三，DOM
1，查找
（1）直接查找
（2）间接查找
2，（1）innerText 提取文本内容 innerHTML 提取html内容 两者都可以直接赋值
obj.innerText=“<a href=http://www.mamicode.com/‘http://www.oldboyedu.com’>老男孩”
obj.innerHTML="<a href=http://www.mamicode.com/‘http://www.oldboyedu.com‘>老男孩"
（2）value 对input标签生效，获取当前标签内的值
对select 标签生效，获取选中的value值（selectIndex）
对textarea标签生效，获取其中的值
（3）搜索框代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width:600px;margin:0 auto;">
<input id="i1" onfocus="Focus();" onblur="Blur();" type="text" value="http://www.mamicode.com/请输入关键字"/>
<input type="text" placcholder="请输入关键字" /> #可以不用写javascript
</div>
<script>
function Focus() {
var tag = document.getElementById(‘i1‘);
var val = tag.value;
if (val == "请输入关键字") {
tag.value = http://www.mamicode.com/‘‘;>
Python 学习第十六天 html 前端内容总结