SitePoint再次送书

Sitepoint免费电子书半年前,SitePoint送出了一本关于Photoshop网页设计方面的PDF。这次送出的是关于CSS的PDF电子书——《The Art & Science of CSS》。

此书介绍了多种现在流行的CSS技巧和怎么用CSS进行布局,例如: sIFR、Round Corner。内容简单易学,虽然不是什么新技术,但下一本收藏也是不错的。是了,免费时间是到这个月22号左右吧。

下载相关地址

目录:

Chapter 1 Headings
Hierarchy
Identity
Image Replacement
Flash Replacement
Summary

Chapter2 Images
Image Galleries
Contextual Images
Further Resources
Summary

Chapter 3 Backgrounds
Background Basics
Case Study: Deadwood Design
The Future of Backgrounds
Summary

Chapter 4 Navigation
The Markup
Basic Vertical Navigation
Basic Horizontal Navigation
Tabbed Navigation
Variable-width Tabs
Advanced Horizontal Navigation
Summary

Chapter 5 Forms
Accessible Form Markup
Form Layout
Required Fields and Error Me
Summary

Chapter 6 Rounded Corner
Flexibility
Experimenting with these Te
Summary

Chapter 7 Tables
The Structure
The Styling
Table Elements in Action
Using JavaScript
The Future
Summary

隐藏乐多日志的默认显示logo

乐多解禁了!!
早就有在那里申请一个blog的意思了,听说很好用的一个blog(应该是MT blog)
现在终于如愿了!
经过一番东翻翻西摸摸,发现真的是很好的一个blog,比起blogchina那些功能“强大”而花俏的blog,乐多简洁而容易上手。主题也是采用符合web标准而设计,页面load入时迅速!
只是她页面上默认有一堆logo,如rss订阅、乐多logo等,看上去不太美观!
我看了一下页面的源代码,发现这些logo都是放在class=’syndicate’的div中。呵呵,那就容易办了!
想想不久前看见有人就是用css屏障logo的。我也试试!
1、在乐多后台中进入“網頁樣式的設定”,点击“個人化設定”链接(选上此项);
2、在弹出的修改CSS页面中加入 .syndicate{display: none;}
3、按“儲存設定”,出现”儲存設定完成“,关闭此窗口;
4、回到“網頁樣式的設定”页面,点击“樣式更改”,等系统更新后就搞定了;
5、看看是不是清爽多了!老冰古
6、不知道乐多会不会因此而删掉帐户呢??所以请大家三思而后行!!被删的话,我可不负责哦!
7、此方法适用与可修改CSS而且被屏障代码位于class或id的标签内!

3-5-8比例运用在网页设计中

黄金分割运用在网页设计中,很久就看过了。
今天的sitepoint mailing list中介绍了另外一种类似黄金分割的比例-3-5-8比例(taked form the Fibonacci Sequence也就是斐波那契数列)。那里介绍的很简单就几句话加上三幅图,给大家参考一下:mrgreen::



文中还给出了一个farther reading(很长):
thorough explanation about the history and various applications of the Fibonacci sequence
Google一下

用css制作的国旗!!

两位高手,用css制作出自己国家的国旗!!

Britain Flag
and Canadian Flag
Britain Flag运用了图片所以可以在ie和firefox中正常显示(Works in IE5.5, IE6, FF, Mozilla and Opera.)
Canadian Flag好像是纯css制作!!firefox中显示效果不错,但一到ie上就彻底变形了!!

简单的css达到阴影效果

只要一小段的css就能达到网页阴影效果
我只在ie和firefox上看了效果(不错的效果:-)),不知道其他浏览器的效果如何呢?
css:

.shadowbox {
background: #ccc;
position: relative;
top: 2px;
left: 2px;
}
.shadowbox div {
background: #333;
border: 2px solid #000;
color: #fff;
padding: 10px;
position: relative;
top: -2px;
left: -2px;
}

html:

<div class="shadowbox">
<div>And there you have your result!</div>
</div>

来源:labs.silverorange.com

简单的两列居中布局

 简单!!太适合我们这些刚接触css的了!在这篇东西里,我们可以知道怎样设置使无序列表水平排列,而不是平常的垂直排列;还可以知道怎样使两个<div></div>并排显示!

原文地址:
在这里!!
Read More »

<title>:符合标准的网页中一个极其重要的标签

开始学着翻译一下e文的制作网页方面的文章。这样一方面可以学到更多“官方”一点的东西,另一方面也借此来提高自己的e文水平。因为是自己刚开始学着翻译,故毛病肯定是不少的了,因此我会在文章的前面加上原文的链接,如各位大虾发现什么错漏的地方,还请多多指教!!

原文地址

<title>:符合标准的网页中一个极其重要的标签

<title>标签在HTML中是被设计为在下列地方显示一段简洁的文字代替整个网页:

  • 标题栏
  • 收藏夹
  • 搜索的结果显示中

一个好的Title

不应太短

“第一节”这样的标题显示在搜索的结果页中对搜索者是不会有太大的用处的(谁会去点击这个“一点信息含量都没有”的结果呢?)。
好的标题:<title>流行音乐指南第一节</title>
这样更好:<title>时代的框架(流行音乐指南,第一节)</title>

不应太长

在大部分的窗口的标题栏、收藏夹等地方仅仅能显示60到80个字节的内容!!(即使写得再多也没人看得见!!白做功!!)
你可以用顶级标题标签(<h1>)来给你的用户一个更详细、看起来更舒服的标题!!
如:<h1>第一节:在音乐方面,是什么时候进入流行音乐时代的呢?</h1>(可以给出一个链接,链接到整部《流行音乐指南》的目录上!!)