
前端
HTML+CSS+JavaScript
温文尔雅的流氓
尽人事 听天命
展开
-
在网页中加入JavaScript
通过在网页中加入...标记JavaScript的开始和结束,将JavaScript代码放到...之间也可以引入一个外部的JavaScript文件,这个JavaScript文件一般以.js作为扩展名原则上,放在...之间,但视情况可以挡在网页的任何位置一个页面可以有几个...不同部分的变量和方法可以共享原创 2015-08-26 11:52:32 · 710 阅读 · 0 评论 -
js重要函数
SetTimeOutSetIntervalgetElementByID innerHTML 两个DIV之间的内容可以动态指定原创 2015-08-26 11:53:03 · 262 阅读 · 0 评论 -
窗口中的对象和元素
window 当前窗口 新开窗口 通过本地窗口控制新开窗口location 获取或设置现有文档的URLhistory 先前访问过的URL的历史列表 常用方法 back() go(number)document 当前的文档对象 document.write() 向客户端浏览器输出内容 documen.formName 可以原创 2015-08-26 11:50:57 · 323 阅读 · 0 评论 -
JavaScript调试
JavaScript 调试 IE-工具-Internet选项-高级 打开禁用脚本调试 显示每个错误通知原创 2015-08-26 11:49:57 · 240 阅读 · 0 评论 -
JavaScript语法
变量 JavaScript是一门弱类型语言,所有的变量定于均以var来实现 JavaScript的变量建议先定义,再使用 虽然JavaScript可以不需定义即可直接使用变量,但不建议这么做 JavaScript区分大小写数组 var arr=new Array(3) var arr=new Array(2,3,4,5) 通过Ar原创 2015-08-26 11:50:25 · 245 阅读 · 0 评论 -
内置对象 DOM BOM
var userName = prompt("请输入你的名字:"); document.write("你好!"+userName); function confirmit() { if(confirm("你确认删除此文件吗?")) { document.testa.submit原创 2015-08-26 11:51:39 · 370 阅读 · 0 评论 -
JavaScript的对话框
警告框(alert) 出现一个提示信息询问框(prompt) 返回输入的值确认框(confirm) 根据不同的选择,返回true/false原创 2015-08-26 11:48:20 · 315 阅读 · 0 评论 -
JavaScript概述
JavaScript是一种描述式语言,它与HTML结合起来,用于增强功能,并提高与最终用户之间的交互性能由Netscape公司利用Sun公司的Java开发它是与Java完全不同的一种语言,虽然在结构和语法上与Java类似,但是它是函数式的语言客户端的JavaScript必须要有浏览器的支持JavaScript(ECMAScript) 基础语法 DOM(Document原创 2015-08-26 11:48:48 · 266 阅读 · 0 评论 -
JavaScript事件处理
onFocus 在用户为了输入而选择select、text、textarea等时onBlur 在select、text、password、textarea失去焦点时onChange 在select、text、password、textarea的只被改变且失去焦点时onClick 在一个对象被鼠标点击时(button、checkbox、radio、link、reset、submi原创 2015-08-26 11:49:16 · 249 阅读 · 0 评论 -
表单样式
给input添加背景颜色、背景图片.ip{ background-color:#030; color:#fff; background-image:url(*.jpg);}一条线的文本框.ip{ border:none; border-bottom:dashed 1px #060; color:#9C0;}按钮样式控制.ip{ height:30px; widt原创 2015-08-27 14:16:43 · 504 阅读 · 0 评论 -
列表样式
list-style-type:disc(实心圆)circle(空心圆)square(方块)decimal(阿拉伯数字) lower-roman(小写罗马数字)upper-roman(大写罗马数字) lower-alpha(小写英文数字)upper-alpha(大写英文数字) none(无项目符号)list-style原创 2015-08-27 14:19:52 · 467 阅读 · 0 评论 -
overflow属性
overflow:控制内容溢出后的处理方式overflow设置值: visible hidden scroll autovisible为overflow的默认值,表示当载入体内容框装不下其中的元素时,会将溢出的内容全部显示hidden表示对溢出部分内容进行隐藏srcoll表示无论内容是否溢出,均产生滚动条auto表示当内容溢出时产生滚动条,否则不产生滚动条所有浏览器原创 2015-08-27 14:13:45 · 1823 阅读 · 0 评论 -
伪元素
伪元素:一个标签的不同的状态,最常用的是超链接a:link 超链接的正常状态(没有任何动作前)a:visited 访问过的超链接状态a:hover 光标移动到超链接上的状态a:active 鼠标按下时的状态 p:first-line 段落中的第一行文本p:first-letter 段落中的第一个字母h1:first-child{ color:red; fon原创 2015-08-27 14:22:58 · 323 阅读 · 0 评论 -
标准流与非标准流
流:html元素在网页中显示的顺序标准流:在html文件中,写在前面的元素在前面显示,写在后面的html在后面显示非标准流:在html文件中,当某个元素脱离标准流,那么它就处于非标准流右浮动:一个元素向右浮动,让出自己在标准流占据的空间,向右移动知道碰到包含自己的父元素的最右边的边框左浮动:匀速尽量向左边移动,这样就让出它右面的空间,让别的块元素显示清除浮动原创 2015-08-26 11:27:21 · 1012 阅读 · 0 评论 -
表格样式
table{table-layout:fixed;} 控制表格宽度与表格内容的关联方式,fixed(表格宽度与内容分离,表格宽度不随表格内容的变化而变化) 当表格中内容宽度大于表格本身的宽度时,设置表格宽度没有意义,因为表格宽度会随内容宽度自动撑开table{caption-side:bottom;} 控制表格标题的显示位置 默原创 2015-08-27 14:17:17 · 397 阅读 · 0 评论 -
列表样式
list-style-type:disc(实心圆)circle(空心圆)square(方块)decimal(阿拉伯数字) lower-roman(小写罗马数字)upper-roman(大写罗马数字) lower-alpha(小写英文数字)upper-alpha(大写英文数字) none(无项目符号)list-style原创 2015-08-27 14:20:02 · 426 阅读 · 0 评论 -
鼠标样式
p{ cursor:url("m.ani")}/*--windows系统默认的鼠标样式文件的扩展名为.ani 在IE浏览器中正常显示,但是在火狐中无效果--*/span{ cursor:move;}/*--鼠标十字型--*/b{ cursor:text;}/*--鼠标文本型--*/b{ cursor:n-resize;}/*--鼠标上下箭头 缩放型--*/ b{ curs原创 2015-08-27 14:20:28 · 398 阅读 · 0 评论 -
文本样式
text-align:段落水平对齐设置值:center right left justifyvertical-align:段落垂直对齐设置值:sub(下标) super(上标) top(顶部) middle(居中) bottom(底端)letter-spacing:字母的间距word-spacing:单词的间距line-height:文本行高(行与行之间的间距)text原创 2015-08-27 14:23:26 · 418 阅读 · 0 评论 -
position定位属性
position定位属性设置值:absolute(绝对定位 脱离原普通流 依据父级 祖先级元素的位置进行定位 如果没有父级元素,则参照body进行定位) relative(相对定位:相对于原位置的定位,仍然占据原先普通流的位置)static:元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于原创 2015-08-27 14:14:08 · 434 阅读 · 0 评论 -
DIV样式
span a b strong u i等标签均为行内元素 行内元素可以通过display:block;以块元素方式显示div h1 p li等标签均为块元素 默认具有padding margin等属性div标签的作用是用来整体布局,划分区块,但是不宜应用到具体元素上,会降低工作效率,使后期的修改十分麻烦div水平居中: div{width:960; margin:0px auto;}原创 2015-08-26 14:12:27 · 611 阅读 · 0 评论 -
定位
常见的定位方式有四种1.static(静态定位 默认):元素框正常生成,块级元素生成一个矩形框,作为文档流/标准流的一部分,行内元素则会创建一个或多个杭框,置于其父元素中 left top对静态定位不不起作用 静态定位使用margin定位2.relative(相对定位):元素偏移某个距离。元素保持其未定位前的形状,它原本所占的空间仍然保留。从这一角度看,好像该元素仍然在文档流原创 2015-08-26 11:28:09 · 323 阅读 · 0 评论 -
clip属性
clip属性clip裁切 rect 裁切范围 一般用于图片 clip设置值 clip:rect(top right bottom left auto) auto 表示不应用裁切要对图片进行裁切,必须设置绝对定位属性.img{ position:absolute; clip:rect(10px 500px 80px 20px)}上面裁切10px 右边保留500px 下边原创 2015-08-26 14:09:47 · 954 阅读 · 0 评论 -
visibility属性
visibility设置值:inherit(继承父级元素的属性) visible(显示) hidden(隐藏) 内容隐藏,但是空间位置还是保留所有浏览器都支持visibility属性display:none 内容隐藏,同时占用的页面空间位置也消失原创 2015-08-27 14:14:54 · 4378 阅读 · 0 评论 -
滚动条样式
scrollbar-face-color: 滚动条凸出部分的颜色scrollbar-highlight-color: 滚动条空白部分的颜色scrollbar-shadow-color: 立体滚动条阴影的颜色scrollbar-3Dlight-color: 滚动条亮边的颜色scrollbar-arrow-color: 上下按钮上三角箭头的颜色scrollbar-track原创 2015-08-27 14:17:52 · 1267 阅读 · 0 评论 -
选择器
要为某个元素设置样式首先要选中这个元素标签选择器(HTML selector):针对HTML标签 例如 样式表中的格式为 a{} p{} div{} img{border:none;}去掉图片链接中默认的蓝色边框原创 2015-08-27 14:23:55 · 282 阅读 · 0 评论 -
float属性
float设置值:left(向左浮动,直至遇到框) right(向右浮动,直至遇到框) 脱离普通流(按行显示,依次往下排列)浮动到上一层 none 不浮动行内元素(内联对象)可以设置line-heiight,但是设置width height无效 所有浏览器都支持float属性 所有元素都可以应用float属性设置为float:none;的元素原创 2015-08-26 14:13:07 · 945 阅读 · 1 评论 -
盒子模型
margin 指定盒子边框与外部内容的距离 既可以作用于同级元素之间,也可以作用于父级元素与子级元素之间 div{ margin:10px;} 上下左右的边距均为10px div{ margin:10px 20px;} 上下边距为10px,左右边距为20px div{ margin:10px 20px 30px;} 上边距为10px, 左右边距为2原创 2015-08-27 14:18:18 · 575 阅读 · 0 评论 -
table布局与DIV+CSS布局的区别
table 布局缺点1.显示样式和数据绑定在一起2.布局的时候灵活度不高3.一个页面可能会有大量的table元素 代码冗余度高4.增加带宽5.搜索引擎不喜欢这样的布局优点1.理解比较简单2.不同的浏览器看到的效果一般相同3.显示数据还是很好的DIV+CSS布局基本思想: 数据和样式分离优势1.符合w3c标准,微软等公司均为w3原创 2015-08-26 11:32:04 · 4450 阅读 · 0 评论 -
字体样式
字体种类:font-family字体大小:font-size 绝对单位 px(像素) pt(磅) cm(厘米) mm(毫米) in pc 相对单位 %(系统默认字体大小的百分之多少) em ex 绝对大小的设置为xx-small、x-small、small、medium、large、x-large、xx-large中的任意一个原创 2015-08-27 14:24:20 · 412 阅读 · 0 评论 -
背景属性
background-color:背景颜色background-image:背景图片background-repeat:背景重复方式设置值 repeat-x(按x轴方向重复) repeat-y(按y轴方向重复) repeat(x,y轴方向都重复 默认状态为repeat)background-position:背景位置设置值 水平方向:原创 2015-08-27 14:15:27 · 620 阅读 · 0 评论 -
CSS样式类型
行内样式表: 缺点:样式只能操作某一个标签 优点:十分灵活,可以进行细节的调节嵌入式样式表:(可以通过一条语句操作多个标签或类)引用式样式表:(这样写的前提是HTML页面与CSS文件在同一文件夹下) main.css(一个单独的CSS文件 多个HTML文件可以引用一个CSS样式表文件) 优点:占用空间资源少,修改方便,只要修改CSS文件就可以修改原创 2015-08-26 14:10:31 · 836 阅读 · 0 评论 -
行内元素与块元素的区别
行内元素与块元素的区别1.行内元素只占内容樊瑞宽度,块元素不管内容多少,要占全行2.行内元素与只能容纳文本和其他行内元素,块元素可以容纳文本、行内元素、块元素3.一些CSS属性对行内元素不生效,比如margin、left、right、width、height 建议尽可能使用块元素(DIV)定位、布局(与浏览器版本和类型有关)4.行内元素可以和块元素互换(display原创 2015-08-26 11:29:06 · 321 阅读 · 0 评论 -
块居中
块水平居中 1.margin:0px auto;(即上下边距为0px,左右边距设置为auto) 2.块必须设置具体的宽度(即width必须设置一定的值)块水平垂直同时居中,即位于正中心#main{ width:1000px; height:500px; background-color:#f00; margin:0px auto; positi原创 2015-08-27 14:18:54 · 468 阅读 · 0 评论 -
边框样式
border-width:所有边框宽度border-left-width:左边框宽度(可以单独设置上下左右四个边框的宽度)border-style:solid(实线) dotted(点划线)border-bottom-style:下边框样式(可以单独设置上下左右四个边框的样式)border-color:所有边框颜色border-top-color:上边框颜色(可原创 2015-08-27 14:16:01 · 845 阅读 · 0 评论 -
鼠标样式外边距的合并
margin当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并,即外边距重叠当两个元素水平排列时,边距为两者各自外边距之和;当两个元素垂直排列时,边距重叠,两者的实际边距等于其中较大的外边距只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并原创 2015-08-27 14:22:27 · 244 阅读 · 0 评论 -
开发过程中优先选择类选择器的原因
1.类选择器可以有多个,当有特殊要求时,可以修改2.类选择器优先级没有id选择器高,当有特殊要求时,还有机会用id选择器替换id选择器复用性比较低 唯一使用 如果某个样式只是给某一个html使用,则选择id选择器 如果一个样式是可能给多个html元素使用,则应当优先吗考虑使用类选择器一般div使用id选择器,而例如ul、li、input、p、spam等元素则一般使用类选择器原创 2015-08-26 11:30:07 · 326 阅读 · 0 评论 -
display样式
display设置值:block(没有块元素属性的标签如span strong b u i等 以块元素形式显示) inline(使块元素以行内元素形式显示) line-block(行级块级元素 同时具有行级元素和块级元素的属性。即按行级元素显示,但是具有高度等属性) list-item(以列表形式原创 2015-08-26 14:11:29 · 423 阅读 · 0 评论 -
宽高属性
div{margin:0px auto;} 层的上下边距为0px,左右边距为自动 整体效果是让层水平居中div的宽度默认为父级标签100%的宽度固定值:缺省值:默认为100% 高度一般设置缺省值,让它里边的内容自动撑开百分比:相对于父框的宽高的百分比 运用百分比十分灵活 可以防止元素溢出,方便后期的修改max-height max-width:最大值min-hei原创 2015-08-27 14:19:20 · 347 阅读 · 0 评论 -
HTML语法基础
HTML:超文本标记语言XHTML:HTML向XML过渡的一个版本标签:由尖括号包围的关键字双标签:表示一段内容的结构标签 内容一段文字标题一标题二标题三标题四标题五标题六加粗加强显示倾斜斜体一部分文字 充当容器层加粗下划线删除线 换行不换行的内容http://www.baidu.com">超链接表格原创 2015-08-26 14:13:48 · 391 阅读 · 1 评论 -
html与htm的区别
html与htm的区别1.一个网站如果有index.html 和index.htm 默认情况下 优先访问index.html 2.htm后缀是为了兼容以前的dos系统8.3的命名规范原创 2015-08-26 11:31:07 · 323 阅读 · 0 评论