2009 年 7月随笔档案 - 炜升

CSS网页布局的优势与弊端

摘要：转自： http://blog.onlygrape.com/css-advantage/404关于CSS网页布局，随着WEB2.0标准化设计理念的普及，国内很多大型门户网站已经纷纷采用DIV+CSS制作方法，从实际应用情况来看，此种方法绝对好于表格制作页面的方法。如今大部分网站仍然采用表格嵌套内容的方式来制作网站，虽然此方法对于我们来说比较熟悉、比较上手；但是，它却阻碍了一种更好的、更有亲和力的、... 阅读全文

posted @ 2009-07-29 17:45 炜升阅读(513) 评论(0) 推荐(0)

CSS下拉菜单的制作

摘要：转自： http://blog.onlygrape.com/css-menu/460给大家介绍一种简单的实现方法，没有用到复杂的JS代码，进行简单的变换就可以了。我们来看最终的效果，如下图所示：HTML代码：[代码]大家特别留意类似于以下代码的HTML, 这是变换的关键。[代码]下面看CSS代码：[代码] 阅读全文

posted @ 2009-07-29 16:46 炜升阅读(419) 评论(0) 推荐(0)

img元素设置背景图以及边框

摘要：转自： http://blog.onlygrape.com/img/453实现方法很简单：设置 img 元素为块元素（display:block;），并赋一个 padding 值。 [代码]根据上面的原理，举一反三，通过类似的方法，我们还可以给 img 元素设置双边：[代码] 阅读全文

posted @ 2009-07-29 14:28 炜升阅读(1231) 评论(0) 推荐(0)

CSS经典书写技巧之（一）

摘要：转自： http://blog.onlygrape.com/css-skill/468一、CSS字体属性简写规则一般用CSS设定字体属性是这样做的： font-weight: bold; font-style: italic; font-varient: small-caps; font-size: 1em; line-height: 1.5em; font-family: verdana,san... 阅读全文

posted @ 2009-07-29 12:37 炜升阅读(366) 评论(0) 推荐(0)

CSS中Float（浮动）概念详解

摘要：转自： http://blog.onlygrape.com/css-float/434Float（浮动）概念也许是CSS中最让人迷惑的一个概念吧。Float经常被错误理解，而且因为将上下文元素全部浮动导致的可读性、可用性问题备受责难。然而，这些问题的根源并不在于理论本身，而是开发人员以及浏览器对理论的解读造成的。　　如果你认真的去读一下浮动概念，你会发现并不像所见的那样复杂。大多数问题都是由于老版... 阅读全文

posted @ 2009-07-29 12:26 炜升阅读(560) 评论(0) 推荐(0)

CSS利用UL LI制作横向列表菜单

摘要：转自： http://blog.onlygrape.com/css-ul-li-2/395ul是html中的无序列表，li是列表中的列表项。如果没有CSS定义它的外观，它默认是显示成一列列表，并且它会存在项目符号（比如方块或实心的黑点）的列表内容。CSS网页布局中，除了新闻列表、链接运行ul、li制作以外，我们通常将菜单也用ul、li来实现。我们下面用CSS来改变它的外观，使它能横向在一行中显示，... 阅读全文

posted @ 2009-07-29 12:25 炜升阅读(1309) 评论(0) 推荐(0)

CSS导航菜单在网站设计中的优点分析

摘要：转自： http://blog.onlygrape.com/css-navigation/440 导航结构在网站设计中是起到决定性作用的，导航菜单/栏常常通过颜色、排版、形状和一些图片来帮助网站创造更好的视觉和感受，它是网页设计的关键元素。　　虽然网站导航菜单的外观是网页设计中关系到整个设计成败与否的关键，但视觉效果也不能影响到网站可用性。最理想的设计是网站的导航既能比其他网站的导航外观更吸引人，... 阅读全文

posted @ 2009-07-29 12:25 炜升阅读(250) 评论(0) 推荐(0)

CSS优化UL LI打造精致的横向菜单

摘要：转自： http://blog.onlygrape.com/css-ul-li-3/392Example Source Code：[代码]我们详细的解释与说明CSS代码，看它是如何控制这个UL LI打造CSS横向菜单的：[代码]首页我们进行了整体布局声明，声明了文字大小及居中的对齐方式。需要说明的是，在ff中，我们设置margin:0 auto。即可实现容器的居中了，但在IE中，这还不够，还需要在... 阅读全文

posted @ 2009-07-29 12:24 炜升阅读(1257) 评论(0) 推荐(0)

position属性及实现图片垂直居中

摘要：转自： http://blog.onlygrape.com/position/186定义position 属性把元素放置到一个静态的、相对的、绝对的、或固定的位置中。span>position版本：CSS2　兼容性：IE4+ NS4+　继承性：无br>语法：position : static | absolute | fixed | relative参数：static：默认。它始终会... 阅读全文

posted @ 2009-07-29 12:20 炜升阅读(516) 评论(0) 推荐(0)

word-spacing与letter-spacing在文字编辑中的应用

摘要：转自： http://blog.onlygrape.com/word-spacing-letter-spacing/278在对网页文本进行精细编辑时，需要应用到多方面的CSS属性设置，如垂直方向上的行距line-height，水平方向上的字距word-spacing和letter-spacing。word-spacing是指单词间隔，letter-spacing是指字母的间隔。下面我们来介绍下wo... 阅读全文

posted @ 2009-07-29 12:17 炜升阅读(417) 评论(0) 推荐(0)

CSS的渲染效率-书写高效的CSS

摘要：转自： http://blog.onlygrape.com/css-3/298根据一些CSS写作经验，如何提高渲染效率及所占用消耗的资源，我们来浅谈一下CSS的渲染效率，书写高效的CSS。1、十六进制的颜色值对位数与大小写　　编写十六进制颜色值时你可能会用小写字母或省略成3位数，关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响，但十六进制的颜色值默认标准是大写及6位数标注。在未知情况下不... 阅读全文

posted @ 2009-07-29 12:16 炜升阅读(201) 评论(0) 推荐(0)

CSS有效的编写代码

摘要：转自： http://blog.onlygrape.com/css-prepared/397如何有效的编写代码？这是许多网页制作者与开发者都关心的问题。合理的 CSS 编码与组织技巧，的确能够帮助你的更有效率地写出更清晰高效的代码，自然，样式表大小的缩减还能减少下载的时间。一、排版：1、关键词和操作符之间加适当的空格。2、相对独立的程序块与块之间加空行3、较长的语句、表达式等要分成多行书写。4、划... 阅读全文

posted @ 2009-07-29 12:15 炜升阅读(238) 评论(0) 推荐(0)

overflow:hidden语法属性全面理解

摘要：转自: http://blog.onlygrape.com/overflow-hidden/312Overflow: hidden 的使用引用:overflow 版本：CSS2　兼容性：IE4+ NS6+　继承性：无语法：overflow : visible | auto | hidden | scroll参数：visible : 　不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为... 阅读全文

posted @ 2009-07-29 12:13 炜升阅读(1007) 评论(0) 推荐(0)

CSS制作圆角边框

摘要：转自： http://blog.onlygrape.com/css-arc/362一直做圆角的边框都是用图片来铺成的，这次尝试了下用CSS来制作圆角的边框，效果还是蛮不错的。代码如下：[代码] 效果如图：阅读全文

posted @ 2009-07-29 12:12 炜升阅读(385) 评论(0) 推荐(0)

常用的CSS BUG解决方法与技巧

摘要：转自： http://blog.onlygrape.com/css-bug/323CSSbug是布局中最头疼的问题。我们需要兼顾各种浏览器，以期待获得一致的效果。非常遗憾的是各厂商之间的竞争导致很多问题的存在。而IE6与IE7在很多问题上也存在着很大的差别。在葡提子之前的技术文档中，也介绍了这方面的内容。轻松的解决CSSbug是我们必须掌握的技能。现在整理出最常用的几种CSSBUG解决方法以及CS... 阅读全文

posted @ 2009-07-29 12:02 炜升阅读(184) 评论(0) 推荐(0)

DIV+CSS网页布局常用的书写规范

摘要：转自： http://blog.onlygrape.com/divcss-4/257CSS命名规范一．文件命名规范全局样式：global.css；框架布局：layout.css；字体样式：font.css；链接样式：link.css；打印样式：print.css；二．常用类/ID命名规范页　眉：header内　容：content容　器：container页　脚：footer版　权：copyrigh... 阅读全文

posted @ 2009-07-21 18:01 炜升阅读(511) 评论(0) 推荐(0)

CSS布局最常用属性float（浮动）和position（定位）

摘要：转自： http://blog.onlygrape.com/float-position/271在进行CSS网页布局时，对元素与容器进行布置与规划，最常用的两个属性就是浮动float和定位position。这两个属性的理解对CSS网页布局的学习非常重要。首先了解float（浮动）和position（定位）属性的基础知识：float（浮动）属性：　　float:none|left|right　　取值... 阅读全文

posted @ 2009-07-21 17:17 炜升阅读(1047) 评论(0) 推荐(0)

DIV+CSS网页制作中CLASS和ID的区别

摘要：转自： http://blog.onlygrape.com/divcss-3/381最近在做PNG背景图片背景透明的一个效果的时候，应用到ID，在此之前做页面效果的时候一直用的是CLASS，在这里分析下在页面样式表定义的时候，CLASS与ID的应用。1、在CSS文件里书写时，ID加前缀“#”；CLASS用“.”class和id在页面里面的使用方法：c... 阅读全文

posted @ 2009-07-21 17:15 炜升阅读(390) 评论(0) 推荐(0)

单行溢出文本显示省略号的方法（兼容IE FF）

摘要：转自： http://blog.onlygrape.com/oneway-overflow/229为了更符合实际，我用一个div装起要调试的内容,并为这个div定义一个宽度。例如：[代码]　　在IE中实现是非常简单的，CSS 如下：[代码]　　但在FF中用上面的样式是实现不了的,因为text-overflow: ellipsis;是IE中特有的(非CSS标准)。现在在FF下看到的仅仅只是把溢出的内... 阅读全文

posted @ 2009-07-21 16:54 炜升阅读(279) 评论(0) 推荐(0)

CSS新手必备CSS技巧

摘要：转自： http://blog.onlygrape.com/css/352一、CSS字体属性简写规则一般用CSS设定字体属性方法：font-weight:bold;font-style:italic;font-varient:small-caps;font-size:1em;line-height:1.5em;font-family:verdana,sans-serif;可以把它们全部写到一行上去... 阅读全文

posted @ 2009-07-21 16:51 炜升阅读(205) 评论(0) 推荐(0)

DIV+CSS:有效的编写代码

摘要：转自： http://blog.onlygrape.com/divcss/377如何编写CSS代码才能更有效率？这是许多网页制作者与开发者都关心的问题。大概没有什么魔法，可以保证一下就把你的样式表缩小到百分之多少，但合理的 CSS 编码与组织技巧，的确能够帮助你的更有效率地写出更清晰高效的代码，自然，样式表大小的缩减还能减少下载的时间。一、排版：1、关键词和操作符之间加适当的空格。2、相对独立的程... 阅读全文

posted @ 2009-07-21 16:50 炜升阅读(349) 评论(0) 推荐(0)

DIV+CSS表单布局的五个小技巧

摘要：转自： http://blog.onlygrape.com/css-form-layout/2671、表单文本输入的移动选择：在文本输入栏中，假如加入了提示，来访者往往要用鼠标选取后删除，再输入有用的信息。其实只要加入onMouseOver=”this.focus()” onFocus=”this.select()” 代码到 <textarea... 阅读全文

posted @ 2009-07-21 16:50 炜升阅读(436) 评论(0) 推荐(0)

CSS控制背景透明度

摘要：转自： http://blog.onlygrape.com/css-background-transparency/177 在CSS表中找到 [代码]换行后加入如下代码（透明度80%）：[代码]注：代码应用的式CSS中的Alpha滤镜，这个滤镜可以设置目标元素的透明度。还可以通过指定坐标，从而实现各种不同范围的透明度。具体语法如下[代码]具体参数含义如下：“opacity”... 阅读全文

posted @ 2009-07-21 16:41 炜升阅读(1764) 评论(0) 推荐(0)

CSS控制图片自适应大小

摘要：转自： http://blog.onlygrape.com/css-adaptive-picture/175图片自动适应大小是一个非常常用的功能，在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制代码：引用内容[代码]◎max-width:600px;在IE7、FF等其他非IE浏览器下最大宽度为600px。但在IE6中无效。◎width:600px;在所有浏览... 阅读全文

posted @ 2009-07-21 16:41 炜升阅读(244) 评论(0) 推荐(0)

CSS修饰滚动条

摘要：转自： http://blog.onlygrape.com/css-modification-rolling/169使用CSS 1．overflow内容溢出时的设置 overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。2．scrollbar-3d-light-color立体... 阅读全文

posted @ 2009-07-21 16:39 炜升阅读(529) 评论(0) 推荐(0)

网站建设页面设计中CSS正确书写

摘要：转自： http://blog.onlygrape.com/webdesign-css/2931.css 字体简写规则当使用css定义字体时你可能会这样做：Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--font-size:1em;line-heigh... 阅读全文

posted @ 2009-07-21 16:37 炜升阅读(319) 评论(0) 推荐(0)

ORACLE mix SQL Server

摘要：一、在ORACLE里，需遵循一般的约定, 增加可读性:1. select, from, where, order by, having和group by在正文中总采用小写;2. SQL *Plus命令也是小写(例如, column, set, save, ttile等等);3. IN, BETWEEN, UPPER和其他SQL运算符和函数将采用大写;4. 列名是大小写的混合(如Feature, E... 阅读全文

posted @ 2009-07-11 16:36 炜升阅读(398) 评论(0) 推荐(0)