divcss布局:Web标准实战CSS网页布局 豆瓣首页
前言 ◎下文中例子以豆瓣用户登录后页面为基础各人显示内容可能有所差别； ◎这次并不强求像素级致特别是行距、间距部分可能有细微出入； ◎理解本文需要你对HTML和CSS有所了解最好能够手写HTML和CSS代码； ◎详细阅读本文可能会花上你15分钟以上时间； ◎本文遵循Codeforthebest,fixfortherest原则、分析结构 布... [阅读全文]
CSS实例：Unobtrusive页签切换 符合Web标准 具有html语义
页签流行 自从Yahoo!首页引进页签(tab,见下图)的后这种可用性极佳方式越来越受欢迎用户也逐步习惯和喜欢上它它可以在原有空间上增加更多可用信息而且只需切换不需刷新整个页面浏览更舒畅很多网站WebSite接受并使用如新浪等页签标记结构 那么让我们来看看这些页签后代码 新浪完全不考虑什么标准就是表格嵌套我们略过不提Yahoo!XHTML形式是... [阅读全文]
css图片比例:利用CSS同比例缩小图片 并且符合Web标准
当然生成缩略图这个工作如果交给来完成效果会好很多但是有时出于某种原因例如服务器不支持GD的类难免就要请CSS代劳 把副大图片按比例缩小到某个尺寸对于现代浏览器直接使用max-width和max-height两条CSS属性即可 对于IE 6.0及以下版本以上两条CSS属性均不会被理会的前处理这种事情我们往往会借助Javascript然后为图片加... [阅读全文]
css圆角边框:CSS圆角边框 纯CSS制作
\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Source Code to Run\" Source Code to Run [www.52css.com]#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-... [阅读全文]
CSS菜单：明快清新的格调 阐述CSS当前页效果的实现
在前面文章中学习用列表ul制作CSS横向菜单基础知识http://www.52css.com/article.asp?id=395以及蓝绿色调http://www.52css.com/article.asp?id=396会动小竖条http://www.52css.com/article.asp?id=401红蓝炫http://www.52css.... [阅读全文]
网页校验器:含有Flash的网页如何通过校验？
有关W3Cxhtml和css校验在某些时候大家都是比较看重不过我现在要强调校验只是检测代码种手段不是我们制作符合Web标准网站WebSite最终目标我们制作符合Web标准网站WebSite意义在于内容、结构、表现相分离使我们页面代码更简洁更精减更快速 提交我们网页看W3C校验目在于查看我们代码是不是符合规范标准是不是有和使用不妥东西存在是我... [阅读全文]
word段落空格:段落前面空两个字，不使用空格。怎么做？
段落前面空两个字距离不要再使用空格了应该使用首行缩进text-indent text-indent可以使得容器内首行缩进定单位比如中文段落般每段前空两个汉字 有关text-indent属性可以参考:http://www.52css.com/css/c_textindent.html 在这里我们需要了解种长度单位emem是相对长度单位相对于当... [阅读全文]
Div+css菜单：一张图片实现翻转效果！
传统思路方法制作这个翻转图效果菜单要把图片切成10块还要加上JS鼠标交互效果代码现在完全用CSS来实现图片只要张即可以达到效果\" border=\"0\" alt=\"\"/查看运行效果:\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Source Code to Run\"... [阅读全文]
竖排版:网页中可以竖写文字、象古代书籍那样排版吗？
在WEB设计领域内会遇到各种各样客户而有些客户需要我们营造古色古香网页风格在通常情况下象古代书籍那样排版我们只能过图片来实现在Photoshop或fireworks中处理好所需要版式再直接插入在网页中我们有没有办法直接在网页中竖写文字呢？ 答案是肯定了我们只需要应用writing-mode属性就可以了 有关writing-mode属性可以... [阅读全文]
首字下沉与首行样式的如何实现？
首字下沉效果我们可以用伪对象first-letter需要和其它些属性配合使用font-size、float、padding等伪对象first-letter参考:http://www.52css.com/css/p_firstletter.html 我们来看下面例子:\" style=\"margin:0px 2px -3px 0px\" a... [阅读全文]
divcss排版:div css布局中段落的排版一般如何进行？
margin div css布局中段落使用p标签对于段落上下左右空白(缩进)可以使用margin标签定义样式margin有上、下、左、右 4个方向定义正常情况下我们可以用行来描述我们需要样式 例如:margin: 20px 8px 8px 20px; 此句分别表示了:margin-top；margin-right；margin-bottom... [阅读全文]
liststyle:如何使用list-style项目符号？
项目符号有多种罗列如下: disc(实心圆点)、 circle(空心圆圈)、 square(实心方块)、 decimal(阿拉伯数字)、 lower-roman(小写罗马数字)、 upper-roman(大写罗马数字)、 lower-alpha(小写英文字母)、 upper-alpha(大写英文字母)、 none(无) 比... [阅读全文]
background:背景(Background)如何缩写？
Background背景属性如下:\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/ Example Source Code [www.52css.com] ●background-color:#f00; ●backgro... [阅读全文]
border:border与list缩写的时候应该注意什么？
border边框属性如下:\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/ Example Source Code [www.52css.com] ●border-width:1px; ●border-style:sol... [阅读全文]
font属性:font属性的缩写有何技巧？
css font属性是用来控制文字字体、颜色、大小等而font属性有多种在通常情况下我们用缩写办法将多种属性概括在句css代码中这样极大减小了代码优化css文件 我们常用font属性有下面这 6种:\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Sou... [阅读全文]
web标准化:为什么要Web标准化，有何价值？
采用W3C推荐标准进行设计是件正确事情当我准备重新设计adaptivepath.com站点时我搭档同意用符合标准思路方法来建设它但在我们开始前我们也有番讨论:采用web标准需要付出很大努力这样做是否值得？ 当然重新设计可以在“web标准支持者”中树立信誉但是除了业界赞誉以外标准对于象我们这样个人商业站点真重要吗？web标准能为我们带来回报吗... [阅读全文]
html4.0:HTML4.0与XHTML1.0真正的区别在哪里？
文档必须是编排良好 XHTML是XML个应用些在基于SGMLHTML 4中完全合法习惯在XHTML中必须改变编排良好性Well-formedness是[XML]引入个新概念从本质上说这意味着元素必须有结束标签或者必须以特殊方式书写(在下面介绍说明) 元素必须嵌套尽管SGML规定层叠非法但现有浏览器普遍允许层叠 正确:嵌套元素 pher... [阅读全文]
桌面图标任意排:如何处理图标文字的混排？
对于小图标和文字混合排版确是个很麻烦问题网上有人整理总结了以下几种解决思路方法仅供大家参考: 1、可以把小图标设为背景 比较常见于ulli制作菜单中；(注意:可能你经常会看到在IE5下定义在LI中小图片会在文字下面原因就是制作者把样式定义在A中了IE5对内联元素补白样式支持不完善所以在般情况下把背景小图标定义在LI中LI在默认情况下是有块元... [阅读全文]
层垂直居中:如何让层垂直居中于浏览器窗口？
层垂直居中于浏览器直是新手朋友比较头疼问题 其实解决思路是这样:首们需要position:absolute;绝对定位而层定位点使用外补丁margin负值思路方法负值大小为层自身宽度高度除以 2 如:个层宽度是400高度是300使用绝对定位距离上部和左部都设置成50%而margin-top值为－150margin-left值为－200这样我... [阅读全文]
段落文本换行:标题元素、段落和强制换行如何正确使用？
如何正确使用标题元素 HTML 标题元素类型是h1 、h2 、h3 、h4 、h5 和h6 数字表示标题结构级别我们要像在学校里学习那样认真对待标题 最高级别标题在页面中必须是h1 它应该描述是这个页面是做什么大多数页面有个h1 标题, 但复杂页面文件也许不止个h1标签 h2 标题将标记下个结构级次级是h3,等等而不能从h2跳到h4h4 不... [阅读全文]
滚动条颜色:web标准中滚动条颜色设置失效怎么办？
以往网页设计中我们常改变窗口滚动条颜色以此达到美丽别致效果 但在WEB标准XHTML中我们发现我们设置代码失效了并不能如愿达到所设置样式 是哪里出了问题呢其实是选择器问题！ 以往设置是针对BODY其实将BODY改成HTML即可 请看下面两个例子滚动条样式设置失效情况\" style=\"margin:0px 2px -3px 0px\... [阅读全文]
css样式不起作用:为什么设置的样式失效不起作用了？！
在某些时候我们会遇到设置样式不能应用于选择器所圈定元素 我们所定义样式没有起作用、失效了这是为什么呢？ 其实我们在多层定义样式时需要考虑优先权问题 有关优先权可以参考www.52css.com相关文章介绍 我们来看下面两个例子这是最常见样式失效情况样式定义失效发有起作用\" style=\"margin:0px 2px -3px 0p... [阅读全文]
css文本垂直居中:如何在父元素中垂直居中文本？
这是新手最常遇到问题设置了个div或span但文字是居于上部对齐在传统Table制作中默认文本都是垂直居中于单元格这个问题其实很容易解决设置行高line-height就很好解决了 我们看下面例子a是未设置行高情形b是设置行高解决垂直居中文本问题情形\" style=\"margin:0px 2px -3px 0px\" alt=\"div ... [阅读全文]
文本输入框:文本输入框与文本不对齐(input对齐同一行的文字)怎么办？
在进行div+css网页布局时候不可避免需要插入定表单元素input是其中最常见种我们在布局中常会遇到文本输入框和同处行文本不对齐问题这个问题设置inputvertical-align:middle属性来解决 我们来看下面例子如何解决文本输入框和文本对齐问题！\" style=\"margin:0px 2px -3px 0px\" alt=... [阅读全文]
cssdiv居中:div居中的设置该如何编写css？
div居中设置该如何编写css？我们在传统表格布局中只要设置表格居中属性就实现了居中块元素应用div css网站WebSite布局div居中该如何编写css来控制它呢？ 主要样式定义如下:\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source C... [阅读全文]
class4class6区别:id与class区别 - 该用id还是用class呢？！
id和区别我在前面文章中已经讲过了但还是有新手对此非常迷茫不知道什么时候该用id什么时候该用这两个选择器让新手左右为难 、在web标准中是不容许重复ID例如 div id=\"a\" 不容许重复2次；而所定义是类理论上可以无限重复以根据需要多次引用 2、属性优先级问题:ID 优先级要高于我们在下面代码中有举例介绍说明 3、方便JS等... [阅读全文]
省略号:如何设置列表(li)超出部分显示省略号？
我们常常希望列表中内容超过设置长度时候不要撑开父元素也不希望它直接换行；我们更愿意让其超过部分用省略号来代替而在title标签中置放是完整标题 这样思路方法新手们常常不知道该如何搞定下面就是思路方法演示不过请注意此思路方法适用和IE和OP浏览器！设置li超出部分显示省略号思路方法\" style=\"margin:0px 2px -3px ... [阅读全文]
listyle:列表(li)标记图片定位不精确(list-style)怎么办？
新手们常常苦恼于list-style-image定位问题解决办法般是用li背景模拟来解决这个文章中我们向大家介绍采用相对定位思路方法同样可以很好解决未使用li标记图片相对定位样子\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Source Code to Run\" Sou... [阅读全文]
最小离地间隙:两个层之间的为什么会有间隙(IE 3px bug)？
这个问题普遍困扰着新手朋友不知道如何是好想不出办法进行解决其实这就是传说中“IE 3px bug”解决办法也比较简单请看下面举例介绍说明IE中两个层的间间隙(IE 3px bug)\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Source Code to Run\" So... [阅读全文]
网络无边界解决方案:图片IMG与容器下边界有空隙的解决方法
第给图片img标签display:block\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/ Example Source Code [www.52css.com]img{display:block}第 2定义容器里字体大小为0\" ... [阅读全文]
