文章分类 - CSS
摘要：转：http://edu.itbulo.com/200905/125719.htm字体的类型 英文字体(Typeface)，分为几种大类，这是在使用英文字体的时候必须知道的基本知识： 一、衬线体(Serif) 衬线(serif)就是笔画边缘的装饰部分。下图中红色标注的地方就是衬线。 衬线设计的初衷是为了更清楚地标明笔触的末端，提高辨识率，提高阅读速度。另外，使用衬线字体会让人感觉更加的...
阅读全文
摘要：CSS简写就是指将多行的CSS属性声明化成一行，又称为CSS代码优化。CSS简写的最大好处就是能够显著减少CSS文件的大小，其实还有很多其他益处。臃肿而杂乱的CSS样式表会使你遇到问题是难以调试。尤其是当一个团队在进行设计的时候，你的臃肿的CSS代码会使你的团队其他成员的工作效率下降。 今天，暴风彬彬整理了一些CSS简写技巧，它们其实是CSS最常用的写法，但是太多的人使用Dreamweave...
阅读全文
摘要：Code Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> Menu treeview Page Menu1 a...
阅读全文
摘要：(一)常用的CSS命名规则 头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center 登录条：loginbar 标志：logo 广告：banner 页面主体：main 热点：hot ...
阅读全文
摘要：Code Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->body { font-size:12px; margin:0px; font-family:Verdana; } .container { marg...
阅读全文
摘要：常用CSS缩写语法总结 使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则如下： 颜色 16进制的色彩值，如果每两位的值相同，可以缩写一半，例如： #000000可以缩写为#000;#336699可以缩写为#369; 盒尺寸 通常有下面四种书写方法: property:value1; 表示所有边都是一个值value1； property:value1 va...
阅读全文
posted @ 2008-08-17 15:02
ike_li
摘要：在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。 所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作...
阅读全文
posted @ 2008-08-16 13:39
ike_li
摘要：复杂的列表布局是我最为头痛的。往往在测试时会乱得不堪入目，而且不能兼容IE和FireFox。这个问题困扰了我几个晚上，今天终于搞定了。在IE和FireFox中测试几乎一模一样。 源码下载： 该文件只允许会员下载! 登录 | 注册 先看效果图：这是模仿闪客帝国的作品爬行榜。 实现代码： 程序代码 步步为营，实战div+css系列教程--chaojibaby.com-- ...
阅读全文
posted @ 2008-08-16 13:19
ike_li
摘要：1、列表形式由于展示形式整齐直观，在网站设计中占有很大的比重。早期的列表都是由表格实现的，在代码上过于繁杂，设计和可读性较差。这一节我们重点探讨无序列表ul及有序列表ol元素的使用。 看XHTML代码很简单： 程序代码 布局概述 页面元素入门 高级技巧 高级技巧 布局概述 页面元素入门 高级技巧 高级技巧 以上对比效果...
阅读全文
posted @ 2008-08-16 13:18
ike_li
摘要：以下为下拉式多级菜单样式实现： 已测试好，欢迎下载使用，这是我见过的最简捷的代码！ Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> 下拉多级菜单-css系列教程-超级宝贝-http://www.chaojibaby.com ...
阅读全文
posted @ 2008-08-16 13:15
ike_li
摘要：纵向导航多常见于电子商务网站的一侧，便于用户查找各个分类的商品。 先来看一段XHTML代码： Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> 纵向分类导航-css系列教程-超级宝贝-http://www.chaojibaby.com ...
阅读全文
posted @ 2008-08-16 13:08
ike_li
摘要：导航在网站中起着举足轻重的作用，常见的导航形式主要有横向导航、纵向导航和下拉式导航等三种形式。 传统的导航是表格式布局，不仅代码量大，后期维护起来也不方便，而且也没有实现表现与内容的分离，显然不符合web2.0的标准。下面我们重点来看css是如何实现横向导航的。 先看代码： 程序代码 首页 心路 历程 设计 代码 优化 这里我们引入了一个...
阅读全文
posted @ 2008-08-16 13:06
ike_li
摘要：既然是复杂的布局自然用到较多的div以及并列与嵌套。这就要我们在为它们命名的时候遵从一定的规定，以便于可读性。 下面先来看一张布局图： 这是三九健康网一个频道的页面，原本是很长的页面，但为了说明问题，取了个完整布局样式，而省去了中间的内容。 我们可以把它看做是一个居中的页面布局，这样要实现整体居中，就需要一个div作为主要容器，我们把这个div命名为container. CSS样式为： 程...
阅读全文
posted @ 2008-08-16 13:04
ike_li
摘要：要实现两列固定宽度居中的布局，其实很简单，在第四节及第六节教程中已经提到，我们只要把两个固定列丢在一个div对象中去，实现嵌套就可以了，修改后的码如下： 程序代码 我是layout对象下的左栏 我是layout对象下的左栏 如下图上所示： 在很多情况下我们讨论对象横向排列的次数比较多，包括宽度的自适应。但有些时候也会用到高度的自适应问题，其实在实...
阅读全文
posted @ 2008-08-16 13:03
ike_li
摘要：在css中实现两列右列宽度自适应与三列中间列宽度自适应的布局是相当简单的。下面分别作一解说： 一、两列右列宽度自适应 我们只需要设定左列为固定宽度，右列不设值，并且不浮动即可。代码如下： 程序代码 #left,right{ background-color:#eeeeee; border:1px solid #33ccff; height:400px; } ...
阅读全文
posted @ 2008-08-16 13:02
ike_li
摘要：上一节教程讲的是单列固定宽度及自适应宽度，这一节我们讲的是两列的固定宽度与其中一列自适应宽度，这也是最常用的布局结构。 一、两列固定宽度： 两列固定宽度自然要用到两个div.如下XHTML代码： 程序代码 我的ID是left 我的ID是right 下面我们来为它设定统一的大小及其它样式： 程序代码 #left,#right {width:240px, height:1...
阅读全文
posted @ 2008-08-16 13:00
ike_li
摘要：上一节我们也提到了div的左右分栏布局，但没有实现真正意义上的分栏。这一节，我们就来结合css样式实现分栏。 在讲解分栏之前，有必要对单一列的布局做一个了解。 如代码： Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> 单一列的固定宽度默认居...
阅读全文
posted @ 2008-08-16 12:59
ike_li
摘要：div是XHTML中专门用于布局设计的容器对象。下面我们就来接触最常见的并列与嵌套。 看代码： 程序代码 头部 中间部分 底部 在此我们为每一个div对象加了一个id名称，以便于css能够区别对待。 以上代码实现了头部、中间部分与底部的并列。但在大多情况下，中间部分又分为左栏与右栏部分。 这时候我们就要在中间部分嵌套进去一个左栏和一个右栏，如下代码： 程序代码 ...
阅读全文
posted @ 2008-08-16 12:55
ike_li
摘要：刚开始的时候已经讲过，对于理解CSS，大可从理解div标签开始。其实布局最核心的标签就是div,也是下一步我们接触最多的一个。 1、div的意义所在: div是一个容器，在使用时以形式存在。 在XHTML中，每一个标签都可以称作是容器，能够放置内容。但div是XHTML中专门用于布局设计的容器对象。 在传统的表格布局中，完全依赖于表格对象table,在页面中绘制多个单元格，在表格中放置内容，达到排...
阅读全文
posted @ 2008-08-16 12:54
ike_li
摘要：css编码允许我们以多种方式应用到我们所设计的XHTML页面之中，主要有以下三种方式，应用时应根据设计要求确定。 1、行间样式表 行间样式表是将CSS样式编码应用到XHTML标签之中，格式如下： [...文本内容...] 行间样式是使用style=""来完成样式设置的，把标签所支持的属性丢到双引号之中，每一属性中间用分号隔开，结局处分号可以省略。 根据web2.0要求的“表现与内容分离”的标准...
阅读全文
浙公网安备 33010602011771号