一起CSS

当前位置:一起CSS

百度有啊CSS圆角方案

日期:2009-02-18 分类:CSS

百度有啊的 CSS 圆角写法,原理和《一张图片实现圆角》差不多,也是用背景定位实现的。看代码吧: XHTML 代码:

<div class="box1">
    <span class="tl"></span><span class="tr"></span>
    <div class="cc">
        <p>圆角一</p>
    </div>
    <span class="bl"></span><span class="br"></span>
</div>

CSS 代码:

.box1 {
	background:url(images/bg1.gif) repeat-x #1d6cb7;
	margin-top:1em;
	position:relative;
	zoom:1;
	width:778px;
}
.box1 .tl, .box1 .tr, .box1 .bl, .box1 .br {
	width:5px;
	height:5px;
	position:absolute;
	background:url(images/bg3.gif) no-repeat;
	overflow:hidden;
}
.box1 .cc {
	height:40px;
	padding:5px;
}
.box1 .tl {
	left:0;
	top:0;
}
.box1 .tr {
	right:0;
	top:0;
	background-position:0 -5px;
}
.box1 .bl {
	left:0;
	bottom:0;
	background-position:0 -10px;
}
.box1 .br {
	right:0;
	bottom:0;
	background-position:0 -15px;
}

查看效果(上面的代码是第一个圆角的)

看看上面代码所用到的图片能更好的理解(下面): 用来制作 CSS 圆角的图片 第一部分是左上角的,第二部分是右上角的,第三部分是左下角的,第四部分是右下角的。

查看:1,308 评论:4 标签:,

真正的CSS等高布局

日期:2009-02-11 分类:CSS

为了让网页更美观、协调,有的时候需要用到左右等到布局,传统的等高布局是用 javascript 实现的,现在来看看 silence 发明的真正的 CSS 实现的等高布局,其方法主要是采用“隐藏容器溢出”、“正内补丁”和“负外补丁”结合的方法实现的。 下面来看看实际的例子(三列等高),以下面的 XHTML 代码为例:

<div id="wrap">
	<div id="left">
		<p>left</p>
		<p>left</p>
		<p>left</p>
		<p>left</p>
		<p>left</p>
	</div>
	<div id="center">
		<p>center</p>
		……(20个或更多个)
		<p>center</p>
	</div>
	<div id="right">
		<p>right</p>
		<p>right</p>
		<p>right</p>
	</div>
</div>

CSS 代码:

* {
	margin:0;
	padding:0;
}
#wrap {
	overflow:hidden;
	width:1000px;
	margin:0 auto;
}
#left, #center, #right {
	margin-bottom:-10000px;
	padding-bottom:10000px;
}
#left {
	float:left;
	width:250px;
	background:#00FFFF;
}
#center {
	float:left;
	width:500px;
	background:#FF0000;
}
#right {
	float:right;
	width:250px;
	background:#00FF00;
}

查看效果 从效果中可以看到,左右两列虽然内容少,但高度和内容最多的中间列等高。其核心代码(拿本例来说)是:

#wrap {
	overflow:hidden;
}
#left, #center, #right {
	margin-bottom:-10000px;
	padding-bottom:10000px;
}

其中的 10000px 可以修改为其他值,但不能小于最高列的高度。 经测试,此方法兼容 IE6/IE7/IE8 beta 2/FF/Opera/Chrome 。 方法很简单吧。从这里可以看出:看似简单的 CSS,其实并不简单。 ======= 华丽的分割线(2009/02/18) ================================== 前两天做网页的时候运用这样方法发现一个问题:如果子列有边框 border 属性的话,下边框不会将不显示(查看效果)。因为他们下面还有很长一部分,都被隐藏了,看图理解:

半透明部分都被隐藏了,所以看不到下边框。

查看:1,233 评论:6 标签:

作品之每天物流平台

日期:2009-02-10 分类:未分类

每天物流平台是一个网上物流平台,在这个平台里车主和货主可以自由发布所需的信息,可以在地图上看到自己的车或者货当前所在的位置,还可以用手记发送指令进行相关的操作。该平台预计 5 月 15 号发布第一版测试版,域名目前未知。

因为该公司没有提供logo,所以用了一个临时的,该平台所属广州华正道物流有限公司,德立物流有限公司好像其公司在香港开的分公司,具体什么关系不清楚,反正就是这么一个平台了。

每天物流平台

查看大图 查看网页

查看:594 评论:没有评论 标签:

HTML标签strong和em的区别

日期:2009-01-25 分类:前端技术

HTML 标签 strong 和 em 都表示强调,在合适的地方使用这两个标签往往能给网站带来良好的效果。但他们有什么区别呢? HTML 标签 strong 和 em 的区别,可以从三个层次上来谈: 首先看 HTML 4.01 中的说明:

EM: Indicates emphasis. STRONG: Indicates stronger emphasis.

em 表示强调,strong 表示更强烈的强调。言简意赅,表明了 em 和 strong 的命名来历。并且在浏览器中,em 默认用斜体表示,strong 用粗体表示。这是第一个层次上的区别。

em is for local emphasis. You see? Local emphasis. If you would emphasize a word in speech, use em. strong is for global highlighting. When somebody looks at your document, at a glance, certain words and phrases should jump out. These are the words and phrases that make up the gist of the content — the highlights.

em 用来局部强调,strong 则是全局强调。从视觉上考虑,em 的强调是有顺序的,阅读到某处时,才会注意到。strong 的强调则是一种随意无顺序的,看见某文时,立刻就凸显出来的关键词句。斜体和粗体刚好满足了这两种视觉效果,因此也就成了 em 和 strong 的默认样式。 感觉上面已经解释得很清楚了?我们再来看看第三个层次上的区别。HTML5 草案 中做了详尽解释:

The em element represents stress emphasis of its contents. The placement of emphasis changes the meaning of the sentence. The strong element represents strong importance for its contents. Changing the importance of a piece of text with the strong element does not change the meaning of the sentence.

em 表示内容的着重点(stress emphasis),strong 表示内容的重要性(strong importance),strong 不会改变所在句子的语意,em 则会改变所在句子的语义。并且举了一个非常好的例子:

<p><em>Cats</em> are cute animals.</p>

强调猫,讨论的是哪种动物聪明可爱。

<p>Cats <em>are</em> cute animals.</p>

强调是,讨论的是猫是不是聪明可爱。

<p>Cats are <em>cute</em> animals.</p>

强调聪明可爱,讨论的是猫究竟是聪明可爱呢还是愚蠢讨厌。

<p><strong>Warning.</strong> This dungeon is dangerous.<strong>Avoid the ducks.</strong> Take any gold you find.<strong><strong>Do not take any of the diamonds</strong>,they are explosive and <strong>will destroy anything within ten meters.</strong></strong> You have been warned.</p>

strong 表示的是重要性上的强调,不会引起句子意思的变化。最后注意 em 和 strong 都可以有多重,比如可以用两个 strong 来表示内容很重要。 可以看出,第二个层次上所说的局部强调和全局强调是不够准确的。em 和 strong 区别的玄妙处,在 HTML5 草案里才得到淋漓尽致的阐释。推荐大家有时间的时候,仔细阅读 HTML5 草案。有很多元素的语义,都阐释得非常清楚,对于我们如何在最恰当的地方使用最恰当的标签,非常具有价值。 em 是句意强调,加与不加会引起语义变化。 strong 是重要性强调,和局部还是全局无关,局部强调用 strong 也可以,strong 强调的是重要性,不会改变句意。

文章转自:岁月如歌

原文地址:http://lifesinger.org/blog/?p=909

查看:816 评论:3 标签:,,

你是一个职业的页面重构工作者吗?

日期:2009-01-17 分类:前端技术

做为一个专职的页面重构者,我们从事的工作简单的说就是“将设计稿转换成WEB页面”,这一过程可以很简单到直接把PSD从PS里导出成网页;也可复杂到需要考虑页面中每个标签的使用,考虑“页面性能”。以“前端工程师”为目标的同学可能会不愿承认将页面重构这块分出来,但随着工种的细分,加上页面重构本身的专业性,独立为一个职业也不是不可能,至少我现在从事的就是一个专职的职位。如果你觉得一个前端工程师必须去画设计稿,可以不理会下面的内容。

单纯的页面重构,所涉及到的工作内容一般是“分析设计稿=>切图=>写HTML和CSS”,虽然看起来很少,但要做好这份工作,绝非所想的那么容易。原因很简单:工作内容单一,在时间和工作量上必会很苛刻,往往跟设计师的工作时间是3:1,即设计师给三天的时间,制作只给一天的时间完成;在这种工作强度下,很多人都是靠着对这份工作的喜爱在维持着,一旦工作热情消失,很容易就会变得枯燥,保持热情也成了重构工作者(也许是所有参加工作的人)应该具备的能力。

跟“前端工程师”所要求的有所不同,“页面重构”虽然也是“前端工程师”的一个范畴,在职业化中,对专职的页面重构者,要求当然也更高。不单是做出页面,而是做出好页面。又引出另一个话题,“何为好页面?”,一般包括下面几点:

  1. 结构完整,可通过标准验证
  2. 标签语义化,结构合理
  3. 充分考虑到页面在站点中的“作用和重要性”,并对其进行有针对性的优化

很多同学多少都遇到过方向不明,不知道自己应该提高些什么,我们可以从“分析设计稿=>切图=>写HTML和CSS”这个工作内容,针对每一点提出一些要求,以方便我们分析自己的能力水平,为继续提高确定个方向:

一,设计稿的分析

设计稿的分析是指对设计稿如何制作成页面的分析,即哪一块的内容可以做为公共的部分、哪一块的内容结构可以如何实现等。对设计稿的分析能力可以划分成下面的几个阶段:

  1. 能分清设计稿中的公共与私有的部分
  2. 在1的基础上对各部分的实现方式有一个初步的方案(包括如何切图、写结构、写样式)
  3. 在1的基础上,准确的给出各部分的实现方案(包括如何切图、写结构、写样式)
  4. 在3的基础上,能同时考虑方案的扩展性、复用性及页面性能(包括如何切图、写结构、写样式)
  5. 在4的基础上,考虑整站的结构分布(包括文件分布、目录结构)

上面这些都是在还没开始动手制作之前所要做的。

二,切图

切图是指将设计稿切成便于制作成页面的图片。都有个误区,觉得切图就是把图片切出来,其实并不完全是这样,还包括把切出来的图片合并到一起,怎么切、从哪切才能将性能最大化,说“切图是一门艺术”完全不为过。切图也可以划分成几个阶段:

  1. 切成所需要的图片(如何将需要的部分切出来)
  2. 在1的基础上,对切出来的图片进行一些优化(包括压缩文件大小、选择图片类型)
  3. 在2的基础上,规划切出来的图片(包括文件分布)
  4. 在3的基础上,考虑整体的性能(包括合并图片、压缩文件大小)

HTML和CSS的编写

HTML和CSS的编写是指将上面完成的内容,通过HTML和CSS的编写,将设计稿转换成WEB页面最重要的一块,也是我们所要重点掌握的内容,把它们放在一起,是因为它们相互的关联性太强,HTML的写法会影响到CSS的写法,它又可以划分成下面几个阶段:

  1. 还原设计稿视觉效果,并通过标准验证(HTML)
  2. 在1的基础上,实现多浏览器的兼容(HTML)
  3. 在2的基础上,标签语义化(HTML)
  4. 在3的基础上,选择较优的实现方式(包括模块化结构,方便程序脚本使用,HTML和CSS)
  5. 在4的基础上,考虑到扩展性、复用性和可维护性(HTML和CSS)
  6. 在5的基础上,考虑到整站的样式分布(包括如何实现分布)
  7. 在6的基础上,样式写法的优化(包括技巧的应用)

是对所遇到问题的解决能力,这一点在不同的阶段都可能会遇到,所以没有写到上面。

如果你已经达到或超过3、4、5,恭喜你,你已经是一个职业的“页面重构工作者”了。为了我们自身的发展,关注新技术、技术创新、提高用户体验、审美观、程序脚本的实现方式等,也是十分必要的。大家一起进步吧。

文章转自:Webteam

原文地址:http://webteam.tencent.com/?p=133

查看:1,033 评论:6 标签:

分类

最新日志

最新评论

存档

链接

  • 亚当学院
  • CSS视频教程下载
  • 前沿视频教室
  • 前端爱好者
  • GoodText
  • Kily`s Blog
  • mymickey
  • 秦丰网站策划
  • 奥想创意
  • 我的职业生涯
  • 蜗爱CSS
  • 蜈蚣's Blog
  • web标准学习—小辉博客
  • 十字花匠

© Copyright 2010 一起CSS All Rights Reserved