Web前端
文章平均质量分 77
Web前端
Feathers .
这个作者很懒,什么都没留下…
展开
-
[CSS]CSS定位
CSS除了浮动,还有一个对应的属性定位。 CSS有三种定位,这三种定位再页面中各有用途,也可以配合使用。相对定位position:relative 相对对位,是盒子相对于原始位置的位置改变。 我定义了三个不浮动的盒子,每个盒子的大小为80px x 80px,我将第二个盒子进行相对定位,定位代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra原创 2016-12-22 19:17:33 · 713 阅读 · 0 评论 -
[CSS]CSS background属性
CSS Background 属性background-color表示颜色的三种方法background-imagebackground-repeatbackground-positionCSS小精灵background-attachmentbackground综合属性CSS Background 属性background-color背景颜色属性表示颜色的三种方法backgroun原创 2016-12-19 23:51:38 · 635 阅读 · 0 评论 -
[CSS]CSS属性 margin
marginmargin代表外边距,是CSS常用的属性之一,和Android中的外边距有类似的效果。margin塌陷现象在CSS标准流中除了 [CSS]CSS浮动float详解(一):标准文档流 说的那些奇葩的规则外,还有一个mdzz的规则,(可能是宝宝太嫩,体会不到这样设计的目的),那就是margin塌陷现象。标准文档流中,竖直方向的margin不叠加,以较大的为准。什么意思呢?<!DOCTYPE原创 2016-12-16 22:46:00 · 498 阅读 · 0 评论 -
[CSS]CSS浮动float详解(三):清除浮动方案
阅读前请看[CSS]CSS浮动float详解(二):使用floatfloat虽然带来了很多好处,但是也带来了一些问题。问题:<!DOCTYPE html><html><head> <title>测试</title> <meta charset="utf-8"> <style type="text/css"> *{ margin: 0原创 2016-12-16 17:55:59 · 1337 阅读 · 0 评论 -
[CSS]CSS浮动float详解(二):使用float
通过上一篇的学习中我们发现:所有元素都处于标准流之中,元素之底部始终对齐,顶部则高矮不一,实在是不怎么美观。 在一段文字中插入一个图片,就会出现如下效果:如果图片多了会这样:所以傲娇的工程师们发现这样的显示实在是太蛋t了,如果这样就好了:这就是大名鼎鼎的文字环绕效果。工程师们又发现,实现文字环绕效果必须脱离标准文档流,因为只要处于标准文档流中,文字和图片的底部就必然处于同一个水平线上。那么问题来了原创 2016-12-16 00:13:26 · 1459 阅读 · 2 评论 -
[CSS]CSS浮动float详解(一):标准文档流
Web网页的制作,是一个流,必须自上而下依次进行。标准文档流流的比喻很形象,就像水流一样,必须从上而下,像织毛衣一样。 那么究竟什么是标准文档流呢?在web中,标准文档流有以下几个特点:高矮不齐,底边对齐自动换行 无论字体大小有多高,图片大小有多高,底边始终对齐,而且会自动换行。空白折叠现象<p>我叫Feathers原创 2016-12-15 21:36:08 · 2167 阅读 · 1 评论 -
[CSS]CSS的继承性、层叠性、权重
CSS像艺术家一样优雅,像工程师一样严谨继承性CSS样式具有继承性,所谓的继承性,就是给某些元素设置样式时,后代元素也会自动继承父类的样式。这叫CSS的继承性。比如 color属性设置字体颜色,后代自动继承。CSS的继承特性,一定程度上简化了代码的操作,至少方便了我这类懒癌患者。<!DOCTYPE html><html><head> <title>test</title> <me原创 2016-12-13 22:33:33 · 4583 阅读 · 1 评论 -
[CSS]CSS/CSS3选择器
CSS选择器标签选择器id选择器类选择器后代选择器交集选择器并集选择器通配符CSS3选择器儿子选择器序选择器下一个兄弟选择器CSS选择器标签选择器<!DOCTYPE html><html><head> <title>我是页面</title> <meta charset="utf-8"> <style type="text/css">原创 2016-12-13 10:47:51 · 389 阅读 · 0 评论 -
HTML/CSS 常用方法释义,标签属性以及对应单词表
<!DOCTYPE .../>: doc type 文档使用的html标准<html>:hypertext markup language 定义html文档 <head>:头,定义关于文档的信息 <meta>:定义元信息<body>:体,定义文档内容<h1> headline 标题,注意,h是容器级别的标签<p> paragraph 段落<a>:anchor 定义锚 href: Hypertext原创 2016-12-12 17:09:58 · 940 阅读 · 0 评论 -
[HTML]DOCTYPE标签、XHTML与HTML的区别
HTML <DOCTYPE>经常在html文档头部看到类似下面的声明,一直很疑惑,不清楚它的意思,也不清楚和html和xhtml有什么区别…<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><!DOCTYPE> DocType Decaration原创 2016-12-11 11:20:14 · 2555 阅读 · 0 评论 -
[JS]JavaScript Offset
OffsetWidth:对象本身的宽度 = width +padding + border,而 width则是指css中设置的width属性,注意二者的区别。offsetWidth 元素的高度很大部分情况是由子元素撑出高的,这个高度是无法获得的,我们所以需要这个属性获取不确定的高度值。offsetLeft返回与上级盒子(带有定位的)左边的距离offsetTop返回与上级盒子(带有定位的)上边的距离原创 2017-01-14 19:00:12 · 674 阅读 · 0 评论 -
[JS]JavaScript对象——数组对象Array
在JavaScript中,数组也是对象: alert(typeof myarr1); // 输出结果为 object定义数组的三种方法:// ****数组定义方法一: var myarr1=new Array(3); //定义一个长度为3的一元数组 // 对这个一元数组进行赋值 myarr1[0]=80; myarr1[1]=60; m原创 2016-12-28 12:39:25 · 1081 阅读 · 0 评论 -
[JS]JavaScript数据类型与变量类型转换
JavaScript的数据类型: <script type="text/javascript"> var a = 10; // number var b = 3.14; // number var c = "strings ..."; // string var d = fals原创 2016-12-28 12:15:29 · 977 阅读 · 0 评论 -
[JS]JS与HTML结合方式
一: <!-- script:脚本 在页面上打印一个脚本元素 元素的类型text/javascript,即js语言 --> <script type="text/javascript"> </script>二: <!-- 使用src属性引入外部js 在引入js的script标签中,不能在书写js代码 --原创 2016-12-28 11:23:20 · 2380 阅读 · 0 评论