前言： 网页布局是制作一个网页的第一步也是最重要的一步，今天来详细谈一下使用div+css布局的方法。 用dw编写网页的时候是可以通过两种方法的，一是图形界面，二是代码，初学的话可以用图形界面，学的差不多的时候使用代码更能提高效率。 因为现在css3和之前css2有较大改动，咱们先从css2的说起吧。 （笔者采用的是dreamweaver cs6，破解版下载地址：http://www.aa25.cn/download/954.shtml） 一、单列布局 一个网页编写手先...
在前面的章节中，我们了解了，可以使用行内样式，ID选择器，类选择器，以及标签选择器来给一个元素应用样式。 如果我们想给定义了那些都定义了某一个属性的元素应用样式，这个时候我们该怎么做呢？ 这一节中，我将使用 双色球案例 和 文档类型提示图标案例 来引入和应用属性选择器。 双色球案例： 大家都知道，双色球共有7个球，6个红球，1个蓝球。首先我们先在页面上面定义7个span标签： CSS3 属性选择器 b...
CSS的选择器，我想大家并不会陌生吧，因为天天在使用，但对于CSS3的选择器，要运用的灵活到位，我想对很多朋友还是一定的难度，特别是CSS3中的:nth选择器。那么从现在开始我们先丢开他们版本的区别，从头一起来看看CSS选择器的运用。 CSS是一种用于屏幕上渲染html，xml等一种语言，CSS主要是在相应的元素中应用样式，来渲染相对应用的元素，那么这样我们选择相应的元素就很重要了，如何选择对应的元素，此时就需要我们所说的选择...
canvas画布好像可是说是HTML5的精华了，一定要学好，嗯嗯，绚丽的东西就要从基础的开始。。。。 先看看啥玩意叫做canvas 什么是 Canvas？ HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 创建一个canvas 向 HTML5 页面添加 canvas 元素。 规定元素的 id、宽度和高度： 矩形的绘制 ...
写过CSS的人都免不了与position属性打交道，但是要真正理解position属性还不是一个很容易的事。前两天博主想在一个html页面上实现一个元素重叠在另一个元素上，并且位于该元素的右下角的效果。在网上搜到他人的解决方法，并且也实现了，这里面最关键的就是利用position属性以及left、right、top、bottom等属性。为了更为透彻地理解背后原理，博主在网上搜了相关的资料，总算是有了一些认识，或许也只是一知半解，不过先写下来供大家...
CSS2.0 HandBook上的解释： 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。此时对象不具有外补丁( margin )，但仍有内补丁( padding )和边框( border )。 要激活对象的绝对(absolute)定位，必须指定 left ， right ， top ， bottom 属性中的至少一个，并且设置此属性值为 absolute...
关于CSS中 position在布局中非常重要，查了很多资料都说的很难理解，下面说说个人的理解： 语法： position： relative | absolute relative： 对象遵循常规流，并且参照自身在常规流中的位置通过 top， right， bottom， left属性进行偏移时不影响常规流中的任何元素。 absolute： 对象脱离常规流，使用 top， right， bottom， left等属性进行绝对定位，盒子的偏移位置不影响常规流中的任何元素，其margin不与其他...
有时候我们会使用CSS中的z-index属性来使某些块状元素更有层次感。 如下图：可以通过z-index实现鼠标居于文字后面，使得网页更有层次感 实现上面效果的代码如下： img.x{position:absolute;left:0px;top:0px;z-index:-1}这是一个标题 默认的 z-index 是 0。Z-index -1 拥有更低的优先级。 但是好多刚学习css的新手们，会对z-index属性有些不解，明明自己设置了z-index属性，但是问什么看不到任何效果呢？ 要解决这个问...
.transparent_class {filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5;} 上面的几个属性分别是: opacity: 0.5; 这是最重要的，因为它是CSS标准.该属性支持firefox, Safari和 Opera. filter:alpha(opacity=50); 这个是为IE6设的，可取值在0-100，其它三个0到1. -moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器. -khtml-opacity: 0.5; 这个为了支持一些老版本的Safari浏览器.
本文由 www.169it.com 搜集整理 1. 注释 HTML中的注释和其它语言注释作用相似，都是为了方便阅读和调试代码。当浏览器遇到注释时会自动忽略注释内容。HTML的注释格式多行和单行注释都用一种格式，如下： 当页面HTML结构复杂或内容较多时，需要添加必要的注释来方便阅读和维护代码。同时，有时候为了调试代码，需要暂时注释掉一些不必要的代码，方便调试。 代码规范：需要注意的是，XHTML 1.0标...
Transform字面上就是变形，改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。下面我们一起来看看CSS3中transform的旋转rotate、扭曲skew、缩放scale和移动translate具体如何实现，老样子，我们就从transform的语法开始吧。 语法： transform ： none | <transform-function> [ <transform-function> ]* 也就是： transform: rotate | scale | skew |...
很多人对盒子模型搞晕头了，下面通过一个简单的代码来分析盒子模型的结构！ 为了方便方便观看！在第一个div中画了一个表格，并将其尺寸设置成与div内容大小一样！且设置body的margin和padding的属性都为0px； 本例子采用行内CSS样式！ 代码如下： 盒子模型 Javalittleman 把标尺打开！ 大家发现了什么没有？ 分析如下： 显示效果： 其...
Axure用来画原型图，在这几天的学习实践中学到不少东西。今天给大家小小展示一下。 在不同的页面之间，常常有很多相同的东西，像头部 底部 菜单 导航等都是一致的。只有页面的一部分是活动的，可以显示不同的内容。今天我们就来做一个这样的框架。 图中黄色部分都是固定的。蓝色部分是根据导航栏中每次点击的内容不同，显示不同的信息。 第一步： 写头部自己的内容。写好各个子页面的内容。准备好材料。 第二步 左...
其用法为： 代码如下 box-shadow: x-offset y-offset blur spread color inset; 上述六个参数含义依次是水平方向的偏移（正值向右偏移，负值向左偏移）、垂直方向的偏移（正值向下偏移，负值向上偏移）、模糊距离、阴影的尺寸（扩展尺寸）、阴影的颜色以及阴影类型（默认是外阴影，使用inset表示为内阴影）。除了第一和第二个参数是必须的，其他的都是可选参数。当使用参数“0 0px 10px...
在CSS中，使用display属性来定义盒的类型。总体来说，盒类型分为两类：inline和block。如div默认是block，span默认是Inline。可以通过display修改默认的表现方式。 block and inline elements div { background:#aaff00; } span { background:#ffaa00; } div元素1 div元素2 span元素1 span元素2 默认的div和span表现形式：htt...