博客首页
注册
建议与交流
排行榜
加入友情链接
推荐
投诉
搜索：
帮助
九月枫叶
人生有如枫叶在秋风里也能红的灿烂Unix is simple. It just takes a genius to understand its simplicity
w3g8.cublog.cn
管理博客
发表文章
留言
收藏夹
· 数据库
· 网络安全
· 友情链接
· php
· unix
· www
· 操作系统
· 程序设计
博客圈
音乐
相册
文章
· BSD
}
· Temp
· C/C++
· 网站推广技巧
· liunx
· php
· Windows
· 程序设计
· 网管技术
· 数据库
· 网页制作
}
· dedecms
· WEB设计、DIV+CSS入门
· 个人日记
· 综合交流
· 规范标准
首页
关于作者
姓名：***** 职业：计算机网络 年龄：25 位置：山西★运城 个性介绍：人生有如枫叶在秋风里也能红的灿烂。工具，而不是策略。
||
<<
>>
||
我的分类
文章列表 - WEB设计、DIV+CSS入门
DIV的边显示圆角？不用图片的
<BLOCKQUOTE dir=ltr style="MARGIN-RIGHT: 0px"> <DIV></DIV></BLOCKQUOTE> <TABLE style="BORDER-COLLAPSE: collapse" borderColor=#999999 cellSpacing=0 cellPadding=0 width="95%" bgColor=#f1f1f1 border=1>……
查看全文
发表于:2006-12-06 ┆
阅读(1343)
┆
评论(1)
[下载] 减少重复劳动，加快开发速度 *新增EP CSS语法自动完成*
<DIV> <DIV style="FONT-SIZE: 14px; WIDTH: 580px; LINE-HEIGHT: 160%"><A href="http://www.joinstu.com/download/css.rar" target=_blank><FONT color=#000077><B>先点击这里下载Editplus CSS语法自动完成文件</……
查看全文
发表于:2006-12-06 ┆
阅读(1083)
┆
评论(0)
【转贴】学习用Xhtml+CSS2构建网页
<DIV><STRONG>【转贴】学习用Xhtml+CSS2构建网页</STRONG> <DIV style="PADDING-RIGHT: 0px; MARGIN-TOP: 10px; FONT-SIZE: 9pt; OVERFLOW-X: hidden; WIDTH: 97%; WORD-BREAK: break-all; TEXT-INDENT: 0px; LINE-HEIGHT: normal; HEIGHT: 200px; WORD-WRAP: break-word" onload="this.style.overflowX='auto';"><SPAN style="FONT-SIZE: 11px">来有很多网站用Xhtml1.0标准将站点重构，其中包括yahoo，163，CSDN等这些大站。近来一段时间Xhtml+CSS2的热潮更是一浪高过一浪，所以偶也开始学起了，慢慢的就爱上她们了，页面构建技术就是若……
查看全文
发表于:2006-09-27 ┆
阅读(1203)
┆
评论(0)
从基础开始:CSS实用教程（三）
<DIV> <DIV style="PADDING-RIGHT: 0px; MARGIN-TOP: 10px; FONT-SIZE: 9pt; OVERFLOW-X: hidden; WIDTH: 97%; WORD-BREAK: break-all; TEXT-INDENT: 24px; LINE-HEIGHT: normal; HEIGHT: 200px; WORD-WRAP: break-word" onload="this.style.overflowX='auto';"> <P style="TEXT-INDENT: 2em"><STRONG>十二．控制BOX的样式</STRONG> </P> <P style="TEXT-INDENT: 2em">样式表规定了一个容器BOX，它将要储存一个对象的所有可操作的样式。包括了对象本身、边框空白、对象边框、对象间隙四个方面。 </P> <P style="TEXT-INDENT: 2em"></P……
查看全文
发表于:2006-09-26 ┆
阅读(692)
┆
评论(0)
从基础开始:CSS实用教程（二）
<DIV> <P style="TEXT-INDENT: 2em"><STRONG>七．控制文字的样式 <P style="TEXT-INDENT: 2em">控制文字的样式包括文字大小写、文字修饰两个部分。 </P></STRONG> <P></P> <P style="TEXT-INDENT: 2em">控制文字的样式包括文字大小写、文字修饰两个部分。 </P> <P style="TEXT-INDENT: 2em">1．文字大小写 </P> <P style="TEXT-INDENT: 2em">文字大小写使网页的设计者不用在输入文字时就完成文字的大小写，而可以在输入完毕后，再根据需要对局部的文字设置大小写。 </P> <P style="TEXT-INDENT: 2em">基本格式如下： </P> <P sty……
查看全文
发表于:2006-09-26 ┆
阅读(793)
┆
评论(0)
从基础开始:CSS实用教程（一）
<DIV> <P style="TEXT-INDENT: 2em">CSS（Cascading Stylesheets，层叠样式表）是一种制作网页的新技术，现在已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。使用CSS能够简化网页的格式代码，加快下载显示的速度，也减少了需要上传的代码数量，大大减少了重复劳动的工作量。尤其是当你面对的是有数百个网页的站点时，CSS简直象是神对我们的恩赐！^_^ </P> <P style="TEXT-INDENT: 2em"><B>前言</B></P> <P style="TEXT-INDENT: 2em">CSS（Cascading Stylesheets，层叠样式表）是一种制作网页的新技术，现在已经为大多数……
查看全文
发表于:2006-09-26 ┆
阅读(746)
┆
评论(0)
CSS的十八般技巧（五）
<DIV> <P style="TEXT-INDENT: 2em"><STRONG>十七.调试技巧:层有多大?</STRONG></P> <P style="TEXT-INDENT: 2em">当调试CSS发生错误，你就要象排版工人，逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色，这样就能很明显看到层占据多大空间。有些人建议用border，一般情况也是可以的，但问题是，有时候border 会增加元素的尺寸，border-top和boeder-bottom会破坏纵向margin的值，所以使用background更加安全些。</P> <P style="TEXT-INDENT: 2em">另外一个经常出问题的属性是outline。outline看起来象boeder，但不会影响元素的……
查看全文
发表于:2006-09-26 ┆
阅读(628)
┆
评论(0)
CSS的十八般技巧（四）
<DIV> <P style="TEXT-INDENT: 2em"><STRONG>十五.导入(Import)和隐藏CSS</STRONG></P> <P style="TEXT-INDENT: 2em">因为老版本浏览器不支持CSS，一个通常的做法是使用@import技巧来把CSS隐藏起来。例如:</P> <P style="TEXT-INDENT: 2em">@import url("main.css");</P> <P style="TEXT-INDENT: 2em">然而，这个方法对IE4不起作用，这让我很是头疼了一阵子。后来我用这样的写法:</P> <P style="TEXT-INDENT: 2em">@import "main.css";</P> <P style="TEXT-INDENT: 2em">这样就可以在IE4中也隐藏CSS了，呵呵，还节省了5个字节呢。想……
查看全文
发表于:2006-09-26 ┆
阅读(635)
┆
评论(0)
CSS的十八般技巧（三）
<DIV> <P style="TEXT-INDENT: 2em"><STRONG>十二.用正确的顺序指定链接的样式</STRONG></P> <P style="TEXT-INDENT: 2em">当你用CSS来定义链接的多个状态样式时，要注意它们书写的顺序，正确的顺序是::link :visited :hover :active。抽取第一个字母是"LVHA"，你可以记忆成"LoVe HAte"(喜欢讨厌)。为什么这么定义，可以参考Eric Meyer的《Link Specificity》。</P> <P style="TEXT-INDENT: 2em">如果你的用户需要用键盘来控制，需要知道当前链接的焦点，你还可以定义:focus属性。:focus属性的效果也取决与你书写的位置，如果你希望聚焦……
查看全文
发表于:2006-09-26 ┆
阅读(627)
┆
评论(0)
CSS的十八般技巧（二）
<DIV> <P style="TEXT-INDENT: 2em"><STRONG>九.使用子选择器(descendant selectors)</STRONG></P> <P style="TEXT-INDENT: 2em">CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码: </P> <P style="TEXT-INDENT: 2em"><div id="subnav"> </P> <P style="TEXT-INDENT: 2em"><ul> </P> <P style="TEXT-INDENT: 2em"><li class="subnavitem"> <a href="#" class="subnavitem">Item 1</a></li>> </P> <P style="TEXT-INDENT……
查看全文
发表于:2006-09-26 ┆
阅读(617)
┆
评论(0)
CSS的十八般技巧（一）
<DIV> <P style="TEXT-INDENT: 2em">翻译:阿捷 </P> <P style="TEXT-INDENT: 2em">原文作者:Roger Johansson</P> <P style="TEXT-INDENT: 2em">作者简介:住在瑞典哥德堡，1994年开始接触和参与web设计，456 Berea Street是他的住址，因此采用这个名字作为他的个人主页域名</P> <P style="TEXT-INDENT: 2em">最近，经常有朋友问我一些工作中遇到的CSS问题。他们总是不能很好的控制CSS，影响CSS的效率发挥。我来分析总结一下错误所在，帮助大家更加容易使用CSS。</P> <P style="TEXT-INDENT: 2em">本文总结了我开始使用CSS布局方法以来……
查看全文
发表于:2006-09-26 ┆
阅读(571)
┆
评论(0)
10个你未必知道的CSS技巧
<DIV> <P style="TEXT-INDENT: 2em">1.CSS字体属性简写规则</P> <P style="TEXT-INDENT: 2em">一般用CSS设定字体属性是这样做的：</P> <P style="TEXT-INDENT: 2em">font-weight:bold;</P> <P style="TEXT-INDENT: 2em">font-style:italic;</P> <P style="TEXT-INDENT: 2em">font-varient:small-caps;</P> <P style="TEXT-INDENT: 2em">font-size:1em;</P> <P style="TEXT-INDENT: 2em">line-height:1.5em;</P> <P style="TEXT-INDENT: 2em">font-family:verdana,sans-serif;</P> <P style="TEXT-INDENT: 2em">但也可以把它们全部……
查看全文
发表于:2006-09-26 ┆
阅读(630)
┆
评论(0)
CSS兼容要点分析
<DIV> <P style="TEXT-INDENT: 2em">IE vs FF</P> <P style="TEXT-INDENT: 2em">CSS 兼容要点：</P> <P style="TEXT-INDENT: 2em">DOCTYPE 影响 CSS 处理</P> <P style="TEXT-INDENT: 2em">FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行</P> <P style="TEXT-INDENT: 2em">FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中</P> <P style="TEXT-INDENT: 2em">FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 ……
查看全文
发表于:2006-09-26 ┆
阅读(574)
┆
评论(0)
w3c技术架构介绍
<DIV> <UL> <LI>原文：<A href="http://www.w3.org/Consortium/technology" target=_blank><FONT color=#60a179>http://www.w3.org/Consortium/technology</FONT></A> <LI>原作者：<A href="http://www.w3.org/" target=_blank><FONT color=#60a179>w3c</FONT></A> <LI>翻译：<A href="mailto:ahong2004@gamil.com" target=_blank><FONT color=#60a179>阿宏</FONT></A> </LI></UL> <P><IMG style="CURSOR: pointer" onclick=javascript:window.open(this.src); height=347 alt=图片点击可在新窗口打开查看 src="http://www.w3cn.or……
查看全文
发表于:2006-09-26 ┆
阅读(582)
┆
评论(0)
CSS2盒模型的3D示意图
<DIV> <P>CSS2中的盒模型是关系到我们排版定位的关键，例如<div>就遵循盒模型规范。盒模型定义的margin，background-color，background-image，padding ，content，border，初学者经常会搞不清楚它们之间的层次、关系和相互影响。这里提供一张盒模型的3D示意图，希望便于你的理解和记忆。</P><IMG style="CURSOR: pointer" onclick=javascript:window.open(this.src); height=400 alt=图片点击可在新窗口打开查看 src="http://www.w3cn.org/article/tips/2004/images/cssbox3d.gif" width=500 onload=imgresize(this);> <P>原图出……
查看全文
发表于:2006-09-26 ┆
阅读(636)
┆
评论(0)
自适应高度
<DIV> <P>如果我们想在3列布局的最后加一行页脚，放版权之类的信息。就遇到必须对齐3列底部的问题。在table布局中，我们用大表格嵌套小表格的方法，可以很方便对齐三列；而用div布局，三列独立分散，内容高低不同，就很难对齐。其实我们完全可以嵌套div，把三列放进一个DIV中，就做到了底部对齐。下面是实现例子(白色背景框模拟一个页面)：</P> <DIV id=pagebox>Body <DIV id=header>这里是#header{ MARGIN: 0px; BORDER: 0px; BACKGROUND: #ccd2de; WIDTH: 580px; HEIGHT: 60px;}</DIV> <DIV id=mainbox>这里是#mainbox { MARGIN: 0……
查看全文
发表于:2006-09-26 ┆
阅读(610)
┆
评论(0)
第一个CSS布局实例
<DIV> <P>接下来开始要真正设计布局了。和传统的方法一样，你首先要在脑海里有大致的轮廓构想，然后用photoshop把它画出来。你可能看到有关web标准的站点大都很朴素，因为web标准更关注结构和内容，实际上它与网页的美观没有根本冲突，你想怎么设计就怎么设计，用传统表格方法实现的布局，用DIV也可以实现。技术有一个成熟的过程，把DIV看成和TABLE一样的工具，如何运用就看你的想象力了。</P> <P>注：在实际应用过程中，DIV在有些地方的确不如表格方便，比如背景色的定义。但任何事情都有得有失，取舍在于你的价值判断。好，不罗嗦了，……
查看全文
发表于:2006-09-26 ┆
阅读(711)
┆
评论(0)
CSS布局入门
<DIV> <P>CSS布局与传统表格(table)布局最大的区别在于：原来的定位都是采用表格，通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距；而现在则采用层(div)来定位，通过层的margin,padding,border等属性来控制版块的间距。</P> <H3>1.定义DIV</H3> <P>分析一个典型的定义div例子：</P><SPAN class=code><STRONG><FONT face=Verdana color=#60a179>#sample{ MARGIN: 10px 10px 10px 10px;<BR>PADDING:20px 10px 10px 20px; <BR>BORDER-TOP: #CCC 2px solid;<BR>BORDER-RIGHT: #CCC 2px solid;<BR>BORDER-BOTTOM: #CCC 2px s……
查看全文
发表于:2006-09-26 ┆
阅读(618)
┆
评论(0)
CSS入门
<DIV> <P><FONT color=#ff3300>申明：我不是作者哦，我都是转来的，方便大家学习DIV+CSS做模板，这个是以后WEB设计的趋势，望大家多多的学习</FONT></P> <P>=================================================================</P> <P>CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。</P> <H3>1.基本语法规范</H3> <P>分析一个典型CSS的语句：</P> <P><SPAN class=code><STRONG><FONT face=Verdana color=#60a179>p {COLOR:#FF0000;BACKGROUND:#FFFFFF}</FONT></STRON……
查看全文
发表于:2006-09-26 ┆
阅读(612)
┆
评论(0)
WEB设计、DIV+CSS入门
<DIV> <TABLE style="BORDER-COLLAPSE: collapse" borderColor=#dddddd cellSpacing=0 cellPadding=0 width=360 align=center border=1> <TBODY> <TR height=60> <TD align=middle width=60><IMG alt="" src="http://control.cublog.cn/fileicon/rar.gif" border=0></TD> <TD> <TABLE style="BORDER-COLLAPSE: collapse" cellSpacing=0 cellPadding=0 width="100%" border=0> <TBODY> <TR height=20> <TD align=middle width=40>文件:</TD> <TD>CSS2.0中文手册.rar</TD></TR> <TR height=20> <TD align=middle width=40>大小:……
查看全文
发表于:2006-09-26 ┆
阅读(560)
┆
评论(0)
