2007年06月20日

<style type="text/css">
<!–
.con_div{
width:400px;
height:300px;
border:1px solid #777;
text-align:center;
display:table-cell;
vertical-align:middle;
background:red;
color:#fff
}
/*FOR IE*/
.fixie{
width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}
–>
</style>

<div class="con_div">
<span class="fixie"></span>
测试内容

</div>

2007年04月15日

新建一个简单的HTML测试文件,下面来测试ul li标签

引用
<ul>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单一</a></li>
</ul>

测试一,定义css为如下代码,效果如下

引用
body{font-size:12px;margin:0}
ul{list-style:none;margin:0;padding:0;width:120px;}
ul li{background:green;height:20px;}
ul li a{color:#fff;padding:0 0 0 10px;}

发现在IE5和IE5.5下左边都产生了空白,并且在IE5下,LI之间的行距产生空白,如下图
uploads/200704/13_011917_snap3.gif

测试二,定义css为如下代码,

引用
body{font-size:12px;margin:0}
ul{list-style:none;margin:0;padding:0;}
ul li{background:green;height:20px;width:120px;}
ul li a{color:#fff;padding:0 0 0 10px;}

和测试一相比,只是将width:120px;从ul的定义放置到li的定义,解决了IE5和IE5.5左边产生空白的问题,而IE5的li之间的间距还是有,如下图
uploads/200704/13_012050_snap2.gif

测试三,定义css为如下代码,(最佳写法)

引用
body{font-size:12px;margin:0}
ul{list-style:none;margin:0;padding:0;}
ul li{background:green;height:20px;width:120px;vertical-align: bottom;}
ul li a{color:#fff;padding:0 0 0 10px;}

和测试二比较,在li的定义中加上vertical-align: bottom;ie5下正常,li之间的空白行距消失了,取得各个浏览器的效果一样,如下图
uploads/200704/13_012538_snap1.gif

总结
1.解决li在IE5下产生空白行距的方法:如果li定义了宽度,那么需要在li里面再定义vertical-align: bottom;
2.宽度最好不要定义在UL,定义在LI或者UL外层的DIV里面
3. 书写LI的最佳方式,li里面要书写高度和宽度,以及vertical-align: bottom;(for ie5/win bug),或者在ul外面加上一层div,并定义宽度,那么在li里面不用定义宽度和vertical-align: bottom;,也显示正常(IE5下不会产生空白行距),不过高度还是要定义一下的。

2006年11月10日

CSS Diagrams, Bar Graphs, Star Rater

CSS Forms

CSS Galleries

CSS Image Maps, Image Switcher, Sliding Photograph Galleries

  • CSS Image Maps
    Below is a sample image map that’s built entirely using CSS and XHTML…
  • Map Pop
    This experiment uses CSS to create an image map with CSS pop-ups
  • FotoNotes RolloverViewer
    FotoNotes™ RolloverViewer is an open-source PHP script which will read a FotoNote™-annotated image and create an imagemap with Javascript rollovers to display the image’s notes…
  • Simple CSS Image Switcher
    This is a pure CSS image switcher that is lightweight and standards-compliant. It could be used for a gallery or any similar function…..
  • Simple(r) CSS Image Switcher
    I didn’t use nested unordered lists. Instead, I used just one unordered list…
  • A Two Step Photograph Gallery
    Stu Nicholls
  • Hoverbox Image Gallery
    …super light-weight (8kb) roll-over photo gallery that uses nothing but CSS…
  • Sliding Photograph Galleries
    Stu Nicholls Photo Galleries – vertical slide & horizontal slide

CSS Layouts Templates

Lightboxes

  • ThickBox 2.0
    Cody Lindley – ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.
  • Lightbox Gone Wild!
    Particletree – Chris Campbell
  • Suckerfish HoverLightbox
    Jonathan Christopher
  • Lightbox JS v2.0
    by Lokesh Dhakar
  • Lightbox Plus
    takuya otani – Lightbox JS is very cool and useful script to display an image on the page
  • Leightbox
    Simon de Haan · Eight Media

CSS Lists, Navigation, Menus, Rollovers

Miscellaneous

  • Architecting CSS
    The first step in architecting our CSS is to devise a plan for organizing our files…..
  • CSS Organization
    Tip 1: Flags
  • Beginner’s guide from a seasoned CSS designer
    Cameron Moll – Authentic Boredom
  • CSS Advanced Guide
    The CSS Advanced Guide is for those who want to push CSS to the extreme, highlighting methods that might not be immediately obvious to the intermediate developer.
  • CSS Panic Guide
    This is not a complete resource, this is a fast resource….
  • CSS & Design Galleries
    List of CSS and Design Showcases
  • CSS Table Gallery
    The CSS Table Gallery is a showcase of how CSS and data tables can work together to create usable and pretty results.
  • Dynamic Drive CSS Library
    Practical CSS codes and examples
  • CSSplay
    Stu Nicholls – Experiments with Cascading Style Sheets
  • CSS tests and experiments
    Floats, Containers, margins, …Centering, Shrink wrapping, Images, Miscellaneous, hacks, inline-block, Layouts, Tables…
  • Stylish
    Stylish allows easy management of user styles. User styles empower your browsing experience by letting you fix ugly sites, customize the look of your browser or mail client, or just have fun
  • Professor X
    The Professor X extension for Firefox let’s you see inside a page’s head without viewing the sourcecode
  • X-Ray
    The X-Ray extension let’s you see the tags on a page without viewing the sourcecode.
  • CSSViewer
    A simple CSS property viewer.

Tips & Tricks

Slideshows

CSS Tables

CSS (and JS)Tooltips

  • Bubble Tooltips
    Bubble Tooltips are an easy way to add (via a bit of CSS and javascript) fancy tooltips with a balloon shape to any web page.
  • qTip
    qTip will work on all like elements that are on the page. You can specify any HTML tag as your preferred element. Since the title attribute can be applied to any HTML element, this technique is standards compliant!
  • Sweet Titles Finalized
    JavaScript Fading Tooltips
  • Tooltip.js
    …is the NEXT GENERATION in Tooltips; using the Web 2.0 approach of doing a simple thing, and doing it well.

Articles

Tutorials

  • Advanced CSS Layouts: Step by Step
    By Rogelio Vizcaino Lizaola and Andy King
  • CSS Basics.com
    Making Cascading Style Sheets Easy to Understand
  • CSS Beginner’s Guide
    CSS, or ‘Cascading Styles Sheets’ are a way to style HTML. Whereas the HTML is the content, the style sheet is the presentation of that document.
  • CSS Intermediate Guide
    Like the HTML Intermediate Guide, this CSS Intermediate Guide should not be that difficult, but rather build on the basics of the CSS Beginner’s Guide.
  • CSS Advanced Guide
    The CSS Advanced Guide is for those who want to push CSS to the extreme, highlighting methods that might not be immediately obvious to the intermediate developer.
  • CSS Demonstrations and Tutorials
    CSS and HTML examples, demonstrations and tutorials
  • CSS Layout Techniques: for Fun and Profit
    A resource for web designers and developers who want to learn CSS layout techniques to replace archaic table-based web page layouts..
  • CSS Menu Tutorial
    Horizontal and Vertical CSS Menu Tutorials
  • CSS Tutorial
    CSS Tutorial von w3schools.com
  • CSS TUTORIAL
    The Complete CSS tutorial
  • Floatutorial: Step by step CSS float tutorial
    Floatutorial takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts.
  • Learn CSS Positioning in Ten Steps
    This tutorial examines the different layout properties available in CSS: position:static, position:relative, position:absolute, and float
  • Listutorial: Step by step CSS list tutorial
    Listutorial takes you through the basics of building background image lists, rollover lists, nested lists and horizontal lists
  • Selectutorial – CSS selectors
    Selectors are one of the most important aspects of CSS as they are used to “select” elements on an HTML page so that they can be styled.
    Find out more about selectors including the structure of rules, the document tree, types of selectors and their uses. There is also a step-by-step tutorial showing how selectors are used in the process of building a 3-column layout.
  • Site in an Hour
    by Andrew Krespanis – Making Simple Work of Complex CSS Layouts
  • Style master css tutorial
    hands on css tutorial – This tutorial teaches CSS using both hand-coding and Style Master for Windows.
  • Online tutorials
    The House of Style has several cascading style sheets tutorials, with explanations, excercises and worked examples to get you up and running with style sheets as quickly as possible.
  • Stylesheets
    Cascading style sheets tutorials and style guide
2006年06月22日

我是这样来做DIV布局代码的.不知道说的清楚不清楚,凑和看吧
我的想法是未来能这样:用标准件的方式来组装网页DIV布局

我把class分为2种,布局class,风格class,布局class是骨架,风格class是衣服
举个例子:
比如布局中的左栏
首先它的属性有:是左栏,宽度,背景颜色,字体颜色等

1.首先会定义一个class,比如:.layout,主要用来控制页面整个的大小
.layout{width:98%;margin:0 auto;text-align:left;}

2.然后会定义3个基本布局Class(l,m,r)
.l{float:left}
.m{width:auto}
.r{float:right}
我把2栏布局也归类于3栏布局,因为3栏布局中,左右栏的宽度分别为0的时候,3栏就变成了2栏.
我们写基本布局代码的时候,最好还是写成3栏格式.

3.对应布局Class,定义需要的风格Class,比如宽度,高度,背景颜色等等这些都属于风格元素
.class_l{background:#ff0;margin-right: -150px;width:150px;}
.class_m{background:#f00;margin:0 140px 0 150px;}
.class_r{background:#00f;margin-left: -140px;width:140px;}

布局class只有一套,风格class可以定义很多.
比如,要中栏里面在做一个小的2栏布局
就可以再定义一个风格class
.mid_l{background:#ff0;margin-right: -100px;width:100px;}
.mid_m{background:#f00;margin:0 0 0 100px;}

4.将布局class和风格class结合起来,在代码这样引用
<div class="l class_l"></div>
<div class="l mid_l"></div>
将2个class都引用,中间用空格隔开,前面的是布局class,后面的是风格class,后面还可以继续空格引用,如果需要再特殊定义,你可以给这个div取一个id来定义.

其他的一些常用的风格class也可以写成通用的,比如隐含可以定义为
.hide{display:none}
然后需要的时候,class="xxx hide"来引用,很方便.

点击看我写的一个demo

代码:
 

有这样一个想法,不知道可行么

例子:
布局中的左栏,它的属性有:{居左,宽度,背景色,字体等等}
如果把每个属性都做成一个标准件,然后这样组装起来使用
class="float width height background font padding….",通过多个class的标准件的引用来完成页面布局样式
先按需要定义好标准件如:

float标准件
.l{float:left}
.r{float:right}
.cl{clear:left}

width标准件
.w200{width:200px}
.w300{width:300px}

background标准件
.red{background:red}
.black{background:#000}
.white{background:#fff}

根据需要引用
class="l w200 red"[居左,宽度为200,背景红色]
class="r w200 white" [居右,宽度为200,背景白色]

我现在自己写代码,最多就2个class来定义一个布局样式,感觉很方便

2005年12月13日

想学习DIV+CSS的,自己去下载回来看好了
http://www.ssi-developer.net/main/templates/



Two
Column Flexible

Browsers:

Mozilla Icon
Firebird Icon
Netscape Icon
Opera Icon
IE6 Icon(5+)
Description:

Probably the easiest page to make. Contains two
layout divs, the main content div is just floated to the left.
Very simple!
Actions:

View | Image
Preview
| Download [ 5k]
[ZIP]





Two
Column Flexible With Header

Browsers:

Mozilla Icon
Firebird Icon
Netscape Icon
Opera Icon
IE6 Icon(5+)
Description:
Basically the same template as above but with the
addition of a header div for page title, your logo or banners
etc. Again very simple to set up.
Actions:
View | Image
Preview
| Download [ 3k]
[ZIP]






Two
Column, Left Column Static

Browsers:

Mozilla Icon
Firebird Icon
Netscape Icon
Opera Icon
IE6 Icon(5+)
Description:
Two columns, the left
column is absolutely positioned on the left and is a fixed width. The right
content column is sized and positioned by using margins and will
resize with the browser window.
Actions:
View | Image
Preview
| Download [ 6k]
[ZIP]






Two
Column, Left Column Static, with Header Bar

Browsers:

Mozilla Icon
Firebird Icon
Netscape Icon
Opera Icon
IE6 Icon(5+)
Description:
This is the same template as above but with the
addition of a simple header bar which can be used for links,
search box etc..
Actions:
View | Image
Preview
| Download [ 6k]
[ZIP]






Two
Column Fixed Width with Header & Footer Recommended !

Browsers:

Mozilla Icon
Firebird Icon
Netscape Icon
Opera Icon
IE6 Icon(5+)
Description:
A fixed width centered page with a header,
footer, left navigation column and right content column. One of
my favourites.
Actions:
View | Image
Preview
| Download [ 6k]
[ZIP]


Three
Column, Left & Right Columns Static

Browsers:

Mozilla Icon
Firebird Icon
Netscape Icon
Opera Icon
IE6 Icon(5+)
Description:
This is much the same as ‘Two Col Left Col
Static’ but now with the addition of a right hand column which is absolutely
positioned.
Actions:
View | Image
Preview
| Download [ 6k]
[ZIP]






Three
Column ‘Pixel-Perfect’

Browsers:

Mozilla Icon
Firebird Icon
Netscape Icon
Opera Icon
IE6 Icon(6)
Description:
Sometimes this is called the "Holy Grail".
It’s a three column template which fits together "pixel perfect".
Actions:
View | Image Preview | Download [ 6k]
[ZIP]






Three
Column ‘Pixel-Perfect’ with Header

Browsers:

Mozilla Icon
Firebird Icon
Netscape Icon
Opera Icon
IE6 Icon(6)
Description:
The same as the "Holy Grail" above but with
a header div. Also expands to fit the whole screen.
Actions:
View | Image Preview | Download [ 3k]
[ZIP]






Three
Column Pixel-Perfect with Header & Footer Recommended !

Browsers:

Mozilla Icon
Firebird Icon
Netscape Icon
Opera Icon
IE6 Icon(5+)
Description:
My most complete template. It has three columns, a header and footer
and will resize with the browser window.
Actions:
View | Image Preview | Download [ 6k]
[ZIP]




2005年12月02日

用TABLE和DIV做页面布局设计的时候,遇到大尺寸的图片和长英文字符串,布局中定义的尺寸都会被破坏,导致页面布局变形.


有没有办法可以解决呢?

用CSS的属性OVERFLOW:hidden可以来控制,这样超出部分会自动隐藏,这样做不好的地方是就是这部分的信息显示不完全,比如图片只显示了一部分. 但是页面布局不会乱.
要注意的是,使用overflow的时候,一定要定义width,百分比或者具体值都可以.
在使用DIV做页面布局的时候,可以在大布局上定义,比如在左栏,右栏,中栏里面,也可以针对页面中具体的某个布局元素.

在用ul和li做图片列表排列的时候,也可以用这个,这样避免一些大尺寸图搞乱布局,也可以解决浏览器窗口缩小时,li元素自动回行排列出错的问题.

BTW:用overflow:auto,还可以在页面里模仿出IFRAME的效果,回头写出来

在线运行演示


2005年06月18日

在TABLE布局中设计Form,一般都是用2个td来布局,如果不用table,用CSS怎么做呢?看看下面的代码

在线运行演示

2005年06月03日

图片在页面上的页面上的的位置体现是方形,不会是圆形或者多边形,这样做图片周围的文字环绕也就只能按方形来排列,
可以用DIV+CSS来做到不规则形状的文字环绕

在线运行演示

2005年05月25日

阿捷(www.w3cn.org)发给我的,不错的东西
代码如下:

在线运行演示