CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。 1.基本语法规范 分析一个典型CSS的语句： p {COLOR:#FF0000;BACKGROUND:#FFFFFF} 其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式； 样式声明写在一对大括号"{}"中； COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； "#FF0000"和"#FFFFFF"是属性的值(value)。 2.颜色值 颜...
有了一列固定宽度作为基础，二列固定宽度就非常简单，我们知道div用于对某一个区域的标识，而二列的布局，自然需要用到两个div，XHTML代码如下： 代码如下:左列 右列 新的代码结构中使用了两个id，分别为left和right，表示两个div的名称，我们所需要做的是，首先为它们制定宽度，然后让两个div在水平行中并排显示，从而形成二列式的布局，CSS代码如下：二列固定宽度——AA25.CN 左列 右列 [Ctrl+A 全选 注:如需引入外部Js需刷新...
当前标识指用户点击该频道或栏目，该栏目的标签呈现出与其他标签不同的颜色用以提示用户所处的位置。 这种设计是网站设计中相当简单而且是相当经典的一种增进网站可用性的方式。网站让用户使用时是应该考虑到用户浏览的思考过程，糟糕的网页设计只顾及页面本身而不去考虑用户感受，优秀的设计应当是以用户为中心出发的，这样一种简单的当前频道的标识往往是许多设计师所忽略的内容，用户需要知道自已的位置，以及知道自已还能去哪里...
CSS网页布局入门教程3：一列固定宽度居中_基础教程页面整体居中是网页设计中最普遍应用的形式，在传统表格布局中，我们使用表格的align="center"属性来实现，。p本身也支持align="center"属性，也可以让p呈现居中状态，但css布局是为了实现表现和内容的分离，而align对齐属性是一种样式代码，书写在XHTML的p属性之中，有违背分享原则（分离可以使你的网站更加利于管理），因此应当css的方法实现内容的居中，我们以固定宽度一列布局...
网站导航是网站中最重要的元素，是网站提供给用户的最直接最方便的访问网站内容的工具。网站导航从形式上主要由横向导航、纵向导航、下拉及多级菜单导航第三种形式。 横向导航 作为门户网站的设计而言，主导航一般采用横向导航。由于门户网站下方文字较多，且每个频道均有一同的样式区分，因此在顶部固定一个区域设计统一风格且不占用过多空间的导航是最理想的选择，国内大部分门户均采用这种形式。 纵向导航 目前在门户...
学完了上节教程，我想对于这于这节的学习就容易得多了。 横向菜单是通过div及JavaSprict实现下拉控制，纵向菜单呢？答案是肯定的。我们现在要做的就是一个纵向菜单，css代码： ul { margin:0; padding:0; list-style:none; width:120px; border-bottom:1px solid #ccc; font-size:12px;} ul li { position:relative;} li ul { position:absolute; left:119px; top:0; display:none;} ul li a { width:108px; display:block; text-d...
本系列教程为入门级教程，适合初学者学习，由最简单的知识一点一点进阶。主要以实例为主，很少部分理论，这样更适应初学者快速掌握。因本人也正在学习，难免有一些错误或疏漏地方，望各位给予指正。本教程参考《CSS网站布局实录》一书，在此向作者表示感谢。 要想学好DIV+CSS，首先要有一定的HTML和CSS知识，如果这些你还不了解，建议你先去补习这一课，再来学习本教程。另外还要抛弃传统表格布局的思维模式，至于为什么，在你学习...
在一列固定宽度之中，我们使用margi:0px auto;这样的设置，使一个div得以达到居中显示，而二列分栏中，需要控制的是左分栏的左边与右分栏的右边相等，因此使用margi:0px auto;似乎不能够达到宁产的效果，这时就需要进行div的嵌套式设计来完成了，可以使用一个居中的div作为容器，钭二列分栏的两个div旋转在容器中，从而实现二列的显示，结合上面的代码，新的XHTML代码结构如下： 二列固定宽度居中——AA25.CN 左列 右列 [Ctrl+A 全...
纵向导航菜单也是网站应用中的一种重要形式，所谓纵向导航菜单是指放置在网页左侧或右侧的从上至下排列的一种导航形式。先看一下效果吧！ 如图所示的效果，我们先看一下代码结构： CSS css入门 css进阶 css高级 webUI 理论知识 实战应用 高级技巧 DOM DOM入门 DOM应用 DOM与浏览器 XHTML 参考手册 交流论坛 从以上可以看出，这次的X...
设置外边距的最简单的办法就是运用 margin属性。margin用于设置对象标签之间间隔距离，比方2个上下排列的DIV盒子，我们就能够运用margin款式完成上下2个盒子间距。margin 属性承受任何长度单位，能够是像素、英寸、毫米或 em。margin 能够设置为 auto。更常见的做法是为外边距设置长度值。下面的声明在 h1 元素的各个边上设置了1/4 英寸宽的空白：h1 {margin : 0.25in;}，下面为 h1 元素的四个边分别定义了不同的外边距，所运用的长...
对带有指定属性的 HTML 元素设置样式。 ( 推荐学习：CSS入门教程 )可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。注：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。属性选择器下面的例子为带有 title 属性的所有元素设置样式：[title] { color:red; }属性和值选择器下面的例子为 title="W3School" 的所有元素设置样式：[title=hello] { borde...
对带有指定属性的 HTML 元素设置样式。 ( 推荐学习：CSS入门教程 )可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。注：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。属性选择器下面的例子为带有 title 属性的所有元素设置样式：[title] { color:red; }属性和值选择器下面的例子为 title="W3School" 的所有元素设置样式：[title=hello] { borde...
CSS 伪元素用于向某些选择器设置特殊效果。语法：selector:pseudo-element {property:value;}(1):first-line 伪元素"first-line" 伪元素用于向文本的首行设置特殊样式。在下面的例子中，浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化:p:first-line{color:#ff0000;font-variant:small-caps;}(2):first-letter 伪元素"first-letter" 伪元素用于向文本的首字母设置特殊样式：p:first-letter{color:#ff000...