引言 使用position和display来实现的当鼠标移动到图片上时显示和隐藏文字或者视频的效果。 知识点 1、relative、absolute的使用。 当子元素使用position:absolute时，父元素应该设置postion:relative以便使它作为决定定位段落的定位环境。在这里相对定位的元素 必须是绝对定位的祖先元素，才有资格成为定位环境。 2、CSS选择器。其中用到了两种选择器：element,element 和 element element di...
div布局之所以要学懂学透，是因为table的布局实在是难堪大用，如果是同处于一个表格之内， 各行的规格分布根本就没法调， 例如下面的一段非常简单的代码： 无标题文档1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111本想写出这样的布局： 但实际上出来的效果却是这样： 这很正常，因为table布局中仅有第一行对于td的设置是起作用的，余下行的td设...
一、盒子模型（box model） 一个盒子又4部分组成：content（内容）、padding（填充）、border（边框）和margin（外边界） 盒子模型有两种： （1）标准W3C盒子模型 （2）IE盒子模型（content包含padding和border） 为了统一标准，让网页能兼容各个浏览器，必须使用标准W3C盒子模型 如何才算使用？答：在网页的顶部加上DOCTYPE声明 二、盒子模型结构详解 1、CSS边框（border）属性 border有3个属性：bo...
浮动 ( float ) 和绝对定位 ( position:absolute ) 相同点：（1）都是漂起来( 离开原来的位置 ) （2）并且都不占着原来的位置 （3）另外，如h1包文字的标签，默认只设height的情况下，它的width是铺满父元素的宽度的，而当浮动或绝对定位后，它的宽度就是h1内文字的宽度 不同点：float后，(这里float:left )它后面的对象，会占据它原来的位置， 但是后面对象里的文字和图片等好像知道它在左边，所以他们会自动的在它后面...
固定宽度布局 1-2-1布局（浮动） 固定宽度div ,p, h2 { margin: 2px; padding: 5px;}#container { width: 612px; margin: 10px auto;}#header,#footer { width: 596px; border: 1px solid blue;} #content { float: left; width: 360px; border: 1px solid blue;}#side { float: left; width: 220px; border: 1px solid blue;}#footer { clear: both;} Page Header ...
1-2-1单列变宽布局 side列定宽300px，content列变宽，尺寸是100%-300px。核心的问题就是浮动列的宽度应该等于“100% - 300px”，而CSS显然不支持这种带有减法运算的宽度表达方法。但是通过margin可以变通的实现这个宽度。实现的原理为，在content外面再套一个div，即图中的contentWrap，使它的宽度为100%，也就是等于container的宽度。然后通过将其margin-left设置为-300px，就使它向左平移了300px。再将content的margin-left设置...
上篇文章，小编简单的介绍了一下CSS的一些基本语法，学习内容不是很复杂，都是CSS的一些入门知识，但是万丈高楼平地起，搭好地基，高楼大厦不在话下，学习任何课程，都必须从基础开始，一步一个脚印，踏实坚定的往下走，今天这篇博文，小编主要简单总结一下CSS的文字效果，首先，我们来看一张图： 接下来，小编会随着上面图示的脉络，一一进行讲解，都是一下简单的知识，有兴趣的小伙伴，可以动手和小编一起来...
CSS英文名Cascading Style Sheet，中文名字叫层叠样式表，是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言，DIV+CSS是WEB设计标准，它是一种网页的布局方法。与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。提起DIV+CSS组合，还要从XHTML说起。XHTML是一种在HTML（标准通用标记语言的子集）基础上优化和改进的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络...
表格和表单是网页中非常重要的两个元素，在上篇博客中，我们简单的介绍了CSS的页面背景设置，今天小编继续来介绍CSS的相关知识，在我们的CSS中如何设置表格和表单，首先，来看一张思维导图，通过图简单的预览一下该博文主要讲解哪些CSS的基础知识： 首先我们的首先表格中的标记，代码和运行效果如下所示： 年度收入 年度收入 2004 - 2007 2004 2005 2006 2007 拨款 11,980 12,650 ...
上篇博客，我们主要简单的总结了CSS的图片效果，我们这回来讲讲CSS如何对网页的背景进行设置，网页的背景是整个网页的重要组成部分，她直接决定了整个网页的风格和色调。这篇博客简单的总结一下如何用CSS来设置背景颜色、背景图片。首先，我们来看一张图： 接着，小编会随着上述思维导图的脉络，对各个知识点进行详细讲解，首先，我们来看页面背景色，例子代码和运行效果如下所示： 页面背景色 背景...
摘要： 多列布局在网站应用中也是经常见到的，今天就分享4中多列布局。 display:table .table { width: auto; min-width: 1000px; margin: 0 auto; padding: 0; display:table; } .tableRow { display: table-row; } .tableCell { border: 1px solid red; display: table-cell; ...
介绍 这个布局是基于一个截面图，然后把它转化为一个html页面，但是介绍的目的不是仅限于这一个特定的例子，而是可以用于所有以后的布局过程。 在我们开始之前，需要有几点准则指导着我们，避免我们误入歧途、走火入魔，中毒太深： 每次进行一步，每一步都用一组浏览器来测试开始布局踏出第一步很容易，但是半途碰到问题并不是我们所期望的。为了避免这种情况的发生， 我们每进行一步，都要用一组浏览器来进行测试。这样...
在页面和浏览器中，除了文字、图片、表格、表单等，还有很多各种各样的元素，在上篇博文中，小编主要简单的介绍了一下在CSS中如何设置表格和表单，今天小编主要简单介绍一下丰富的超链接特效、鼠标特效、页面滚动条。首先我们来看一张思维导图： 接着，小编会跟随上述思维导图的足迹，慢慢探寻，丰富的超链接特效中，我们首先来介绍动态超链接，我们来看一下例子的代码和运行的效果： 动态超链接 动...
flexbox是CSS3提出的页面布局模块。flexbox可以把列表横向或者纵向排列，并且填满可以延伸到的空间。稍微复杂的布局可以通过嵌套flex container来实现。 利用flexbox可以方便的创建弹性布局，这使得在移动设备上，可以让元素在容器内扩展和收缩，更容易的实现常见布局，如三列布局。 弹性容器和弹性块 一个flex container中包含了left content right三个弹性块。 可以设置display为flex让块变为弹性块。 可以设置flex-flow来...
之前去面试被问到一个布局的问题：三栏布局，两边固定，中间自适应 当时给出的答案是左右两边分别左浮动和右，中间自适应，然后设置一个margin。也算是实现了效果。 *{margin:0;padding:0;} .left{float:left;width:300px;background:red;height:500px;} .right{float:right;width:300px;background:red;height:500px;} .center{margin:0 230px;background:blue;}leftrightcenter 注意：中间一列一定要放到最下面 在网...