当前位置:爱推吧 » CSS

用Post_Class给不同的文章设计不同的Css风格

自WordPress2.7以来,新增的 post_class 函数,可以给文章设置不同的css类. 在你的模板里面你可以用以下的代码: <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> 这个函数可以改变文章的显示,虽然它的输出很受限制,幸运的是, 我们使用一些额外的php代码,可以给post_class函数增加额外的类. 它的默认输出的类如下: post-id, 这里面的id指文章的id. post type,文章的类型. Sticky,置顶 category-ca...

消除div+css布局之定位与浮动的难点

网络发展越来越快啦,网站的布局也从原来的表格Table转变成内容和形式相分离的DIV+CSS结构了,但是用div+CSS设计过程中也有一些难点,如果能克服这些东西,相信对你网页的布局设计将有相当的好处。 下面就我就自己对div+CSS布局的一些想法及技巧,来与大家分享一下。呵呵 不妥之处,敬请谅解、指证。主要讲述二个方面的知识,一是浮动,一是定位。 先说定位positon吧,它有相当定位relative和绝对定位absolute,这两个属性对大...

CSS中文字体对照表

css字体名可以使用2种Unicode格式,以“微软雅黑”为例: 微软雅黑 和 \5FAE\8F6F\96C5\9ED1,经过源码置换都会转成“微软雅黑”如果未找到需要的字体名称,可以到下面推荐的地方把简体中文转换为Unicode编码。 另外注意:繁体中文字体名,在简体中文系统中是不能被识别的。 请点击 “Css中文字体对照表” 进行查看。如下图所示  

IE HACK汇总

很多朋友搞不清楚CSS中有哪些HACK,怎么使用,我整理了一下,贴在这里。这篇文章是关于CSS的hacking技术。不要和微软专有的CSS属性“滤镜”混淆。 在理想世界里,正确的CSS应该在任何支持CSS的浏览器里工作良好。不幸的是,我们并不是生活在理想的世界里,浏览器们布满了BUG和不一致。创建一个跨浏览器并且显示一致的页面,CSS开发者必须想尽办法。通过使用BUG和未实现的CSS,开发者就能够为不同的浏览器应用不同的规则。HACK和FI...

Div+CSS经验总结

让你使用DIV+CSS排版, 不是让你用换个标签然后再去按照表格的方式去排版而是做到内容与表现的分离。 1: ID用于标识页面单独元素以及持久行的结构性元素,方便JS的调用。 类用于标识同一页面可重复定义使用的结构性元素 ID与类的命名需与表现形式无关 :leftContent 而使用有意义的定义方式:sideBar等等。命名方式遵循“驼峰式大小写(标志符由多个单词组成 除首词首字母小写外 其余单词首字母均大写)” 2:避免滥用类,当类型的...

HTML标签CSS属性默认值汇总

HTML标签CSS属性默认值,在你需要还原默认值的时候比较有用。 以前一直在找这份文档,今天偶然在网上看到了。除了inline和block的定义,主要是要注意body|h1~h6|blockquote|menu|ul|ol|dd等标签的默认样式(margin和font-size)。  html, address,blockquote,body, dd, div,dl, dt, fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6, noframes,ol, p, ul, center,dir, hr, menu, pre   { display: block } li           ...

纯CSS实现三列DIV等高布局

DIV等高布局,我想很多人都遇见过,我也看过不少的方法,有的是通过背景图片,实现假象的等高效果; 还有的用js实现等等。这些都是方法,但是现在都不用以上的方法,来个真正的纯css实现等高! 现在我们来看看真正的 CSS 实现的等高布局,其方法主要是采用“隐藏容器溢出”、“正内补丁”和“负外补丁”结合的方法实现的。 下面来看看实际的例子(三列等高),以下面的 XHTML 代码为例: html代码: <div id="wrap"> <div id...

简洁的 CSS 清理浮动方式

清理浮动有很多种方式,像使用 br 标签自带的 clear 属,使用元素的 overflow,使用空标签来设置 clear:both 等等。但考虑到兼容问题和语义化的问题,一般我们都会使用如下代码来清理浮动。 /* 清理浮动 */ .clearfix:after{ visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;} .clearfix { zoom:1;} 其原理是,在「高级」浏览器中使用 :after 伪类在浮动块后面加上一个非 display:non...

介绍worpress博客header.php

要制作自己的Wordpress主题首先要局部下面的一些知识: html知识 css知识 javascript知识 还有一点php知识 这里以worpress默认模板的代码为例来解析header.php,其余的在以后教程中解析,同时分享一些在主题制作过程中的经验;它的位置位于: (你的安装目录)wp-content / themes / default文件夹里; 全部header代码: <?php /** * @package WordPress * @subpackage Default_Theme */ ?> <!DOCTYPE h...