前面几天介绍了html、php和mysql的基础知识,今天介绍一下页面效果css和js的使用。这个一般用于页面效果。如图片轮播、手风琴特效、在线咨询等效果都需要js代码,我们就从基础开始一层层揭开他的什么面纱吧。
今天的知识点如下
div
css介绍
选择器
css使用方式
css 主要属性
什么是div,div有什么特性
特性:独占一行。
css介绍:层叠样式表.
作用:修饰和美化页面元素的。
index -->--->结构。
a.html---》表现。
web 2.0 结构和表现分开。
选择器:选中页面的某个(某些)元素来操作样式的。
1 通配选择器 : *
2 id 选择器:通过id来查找页面元素。#IDName
3 类选择器:通过元素 class属性来查找页面元素.className
4 标记选择器:通过标记名称来查找元素。 标记名称
5 群组选择器:通过id、class、标记名称的组合来统一查找元素。 元素1,元素2,元素3....
6 包含选择器:父元素 子元素
css使用方式
使用方式:3中 元素上直接使用(内嵌样式)、外部调用******、在head区域书写样式。
外部引用css
1、元素上直接使用(内嵌样式):利用元素的style来写样式。
2、外部调用*************
3 在head区域书写样式
选择器
选择器
选择器
选择器
五 、 css 主要属性
css使用
1 文本属性:
color:颜色。
font-size:大写。
font-family:字体。
font-weight:加粗。bold normal.
font-style:斜体:normal italic。
line-height: 行高。
text-decoration:修饰线。
line-through 删除线.
overline上划线
underline下划线
none没有线。
text-align: 文本对齐方式 left right center
cursor:鼠标指针 pointer help wait
2 边框:
border: 粗细 实线 颜色。
border-top:粗细 实线 颜色
border-left:
border-right:
border-bottom:
3 背景属性:
background-color:背景色。
background-image:url("../image/2.jpg"); //路径是从css文件出发的。
background-repeat:no-repeat repeat-x repeat-y;
background-position:
4 布局属性:
width:宽度
height:高度
margin-top:
margin-bottom:
margin-left:
margin-right:
margin: 上 右 下 左;
padding-top:
padding-left:
padding-right:
padding-bottom:
padding:上 右 下 左;
float:浮动:
clear:清除浮动:
list-style-type:none; 去掉ul的黑点:
超链接:
a:动作名称
a/#id:link 正常连接的样式。
a/#id:hover 移动上去的样式。
a/#id:active 点击动作时候的样式。
a/#id:visited 访问过的连接的样式。
position:位置。
1 relative:相对位置。
2 absolute: 绝对位置。
3 fixed:固定位置
4 static:默认位置。
1 relative:相对位置。
2 absolute:绝对定位。
1》如果元素的父元素都没有position,该元素如果有position,将参照body来定位。
2》如果该元素的父
js
级元素只要有一个定义了position:absolute/relvative.
该元素将相对于父级元素去定位。
3 fiexed:总是以body为定位对象。
4 static 默认。
js知识点:
数组;
自定义函数
js对象
JavaScript Document
一、数组:
1 创建数组:
var arr = new Array(val1, val2,val3,.....valn);//数组下标时从0开始的。
2 数组的属性:length
数组名称.length; 数组元素个数。
注意:看到数组,先遍历在说话。
数组常用方法:
join:将数组元素使用指定的连接符号连接成字符串。
push: 在数组的末尾添加元素.
unshift:在开头添加元素。
shift:删除数组第一个位置的元素,且返回该元素。
pop: 删除最后一个元素,且返回该元素
concat() 将多个数组连成一个新数组。
JavaScript函数
二维数组:
二维数组的定义:
var arr = new Array(
new Array("张三","李四","wangwu","zhaoliu"),
new Array(12,15,16,18),
new Array(0,1,0,1)
);
三、js对象
1 windws 对象
alert():弹出带有确定按钮的对话框。
configm();弹出带有确定和取消按钮的对话框。ture 确定 false 取消
open(url,window_name,window_property)打开新的浏览器窗口
width:宽
height:高
left:窗口距离左边的距离
top:窗口右边的距离。
menubar:菜单栏
toolbar:工具栏
location:地址栏
status:窗口的状态栏
scrollbars;页面的滚动条。
2 screen对象
width
height
3 navigator对象
appName 浏览器名称
appVersion 浏览器版本
4 history
back()*****
forward()*****
go()
window.histroy.back(-1); 后退
window.histroy.forward(1);前进
5 location
window.location[.href]="http://www.freemoban.com";
document对象
html dom
select 对象
事件
一 document对象
1 wirte()方法:
作用:输出到浏览器。
格式:document.write() "字符串" 数值型 var
2 getElementById("元素的id");
作用:通过元素的id值定位元素。
格式:document.getElementById("id");
getElementsByTagName("标记名称");
作用:通过标记名称定义元素,获得到一个集合。
格式:document.getElementsByTagName("标记名称");
3 removeChild()方法
作用:删除页面的元素
格式:父对象.removeChild(子对象);
parentNode:父节点
4 appendChild()方法。
作用:向页面元素追加节点。
格式:父对象.appendChild(子对象);
创建元素 document.createElement("元素名称"); 返回元素对象
属性指定:元素对象.属性名称="属性的值";
父对象.appendChild(子对象);
二 html dom
dom:
1 获取对象的属性:
对象名称.属性名称*********
对象名称.getAttribute("属性名称")
2 设置对象的属性:
对象名称.属性名称 = 值
对象名称.setAttribute("属性名称","值");
注意:
1》 属性名称有两个词以上合成,属性名称遵循"驼峰标记法"。
2》 innerHTML 和 innerText 控制标记中内容的。
innerHTML:获取到对象内部的所有内容(html和文本). ie ff
innText:只包含对象内部的文字。
3 获取和设置元素的css样式。
设置:对象名称.style.样式 = 值。
获取:对象名称.style.样式
css background-image
js :backgroundImage
今天介绍的知识点有点多,有兴趣的朋友可以反复多看多实践
领取专属 10元无门槛券
私享最新 技术干货