CQ-CSER » css

CSS EDITOR

cq — Sat, 29 May 2010 08:09:39 +0000

WEB开发中，你也许会使用一个全功能的IDE或源代码编辑器，但CSS编辑器可提供专门的功能和特点，帮助您更快更好的撰写CSS。

1.EnginSite CSS Editor

EnginSite CSS Editor是一个很好的CSS“即时”预览编辑器。此编辑器是开始简

单任务和设计师设计重点的理想工具。

2.CSSEdit

CSSEdit屹立在世界的发展与先进的网络编辑和基本的中间。CSS编辑漂亮和干净。这是最

适合第一次进行CSS编码的人员。

3.Stylizer

Stylizer是一个可视化的CSS代码编辑器。它具有实时预览的功能。它还具有指向和点击界

面，让您的目标通过点击网页元素，使CSS编辑不在话下。 Stylizer仅适用于Windows和

Mac OS。

4.Style Master

Style Master是一个跨平台的CSS开发中的应用，与强大的功能设置，例如自动

完成功能。它还有一个功能叫做支持监视器，警告可能某些浏览器会不兼容的的CSS。

5.RapidCSS

RapidCSS是理想的编写CSS代码，它重量轻，提供了多种功能，如代码自动完成，语法

高亮，内置的CSS参考和标签的CSS各种捷径。

6.Free CSS Toolbox

Free CSS toolbox对CSS是一种简单的文本编辑器。这是非常轻便和易于使用。它有一

个语法高亮显示功能，代码自动完成，CSS验证器和压缩机。

7.CoffeeCup StyleSheet Maker

CoffeeCup StyleSheet Maker是另一个CSS编辑器可以提供许多功能，但缺点是不灵活。

8.JellyFish-CSS

JellyFish CSS 是一个聪明，简单的CSS编辑器。它有助于编辑CSS代码方便，快捷。

它还将帮助您避开与它的代码感觉功能不一致的CSS语法错误。

9.SnapCSS

SnapCSS只是一个窗口的CSS编辑器，但是非常轻巧，具有一个超级简单的文本编辑器接

口。它有一个美化的代码功能，可以自动格式化和规范你的CSS。

10.SimpleCSS

SimpleCSS是Mac OS的从头轻松地创建样式表的应用。它有一个导入功能

允许您汇集到一个文件中的几个样式。 SimpleCSS还有拖曳重新排序拖放

功能。

No related posts.

ASP.CSS编程

cq — Thu, 24 Dec 2009 15:24:51 +0000

曾经是否想给您的网站的观众有机会去定制网站的色彩?这篇文章给出了使用ASP.NET来建立自己这样的网站的一个解决方案。在这里，我们使用ASP.NET母版页，所选择的语言是C＃。

如msn.com和bbc.co.uk网站允许用户改变他们的网站模板颜色。这个想法看上去似乎是个噱头，并似乎有点毫无意义的，因为不是每个人都需要的，或者是符合每个人的口味。

但也有一些地方- 如MSN和BBC等大型组织会花很多钱在市场营销研究上。

首先，让我们看看演示的顺序和文件要求。我们使用Default.aspx开始，

所有的工作在 central.aspx 和master.cs中完成。

首先的一个关键点是样式是aspx文件而不是css文件。central.aspx文件渲染一个CSS文件，因为我们在文档内容的顶部声明。样式表如下：

代码

Tips

Every thumbnail image which fires the BackBox must have the history div enclosing it, otherwise the back button will not shut down the BackBox.
The empty links referencing the images for the slideshow can be anywhere on the page, not necessarily directly below the thumbnail image. The script will find them and add them to the slideshow.
If the back button does not work in Internet Explorer, it may be because the file called “blank.html” is missing or in the wrong place. The references to it in dhtmlhistory.js need to be hard coded.

QuickBox

cq — Fri, 11 Dec 2009 12:38:32 +0000

Overview

QuickBox.js can be dropped into a page and immediately called to initialize the thumbnail images.JUST LIGHT THICKBOX

Requirements

The MooTools framework 1.2+, both Core and More, with the following packages:

Core: Core, Native, Class, Element, and FX Packages.
More: Asset Package.

Usage

Getting Started

QuickBox is very easy to start using. Just link your thumbnails to the full size images, and set the rel attributes to quickbox:

/path/to/fullsize.jpg” rel=”quickbox“> /path/to/thumbnail.jpg” alt=”Image Description” />

Then, simply link to the source files (css file in the head) and call the constructor:

/path/to/quickbox.css” />

That’s it! You can now click on your thumbnails and they will open the full size images in the same page. Captions for the images will be taken from the alt attribute of the thumbnails, unless you override it by specifying a title attribute in the links.

If things don’t look quite right, double check that the links to the image resources (the close and left/right buttons) aren’t broken.

thickbox IFRAME

cq — Fri, 11 Dec 2009 10:54:10 +0000

Thickbox是jQuery的一个插件plugins；它可以实习弹出框效果；这个效果比浏览器自定义的效果要好的多，并且还可以自定义弹出框里的内容；
开发者：Cody Lindle
Thickbox的官方网址：http://jquery.com/demo/thickbox/
下载：可以在官方网址点击thickbox.js 、thickbox-compressed.js、ThickBox.css 、loadingAnimation.gif链接；其中thickbox-compressed.js是压缩版的JavaScript代码，loadingAnimation.gif为弹出框文件载入时的等待动画；ThickBox.css的css样式文件，thickbox.js是完整代码；

下面介绍一下使用方法：

实现需要在head标签里加入下列JavaScript文件；现将jQuery和thickbox下载，然后设置相应路径；

1 2	<script type="text/javascript" src="文件夹路径/jquery.js"></script> <script type="text/javascript" src="文件夹路径/thickbox.js"></script>

将css文件和loadingAnimation.gif及macFFBgHack.png也上传到你的网站；接下来加入css文件到head标签里

同时要在css里修改

1	.TB_overlayMacFFBGHack {background: url(macFFBgHack.png) repeat;}

将url(macFFBgHack.png)设置为你的文件路径；

官方Demo

有单个图片、图片展览、内容、iframe和Ajax内容；
1.单张图片是建立一个a标签，给链接a加个class名为thickbox，同时将要显示图片包含在链接里如下：

<a href="images/single.jpg"  class="thickbox"><img src="images/single_t.jpg" /></a>

2、图片展览同样建立多个a标签，给链接a加个class名为thickbox，还有给rel设置相同的值，

<a href="images/plant1.jpg" class="thickbox" rel="gallery-plants"><img src="images/plant1_t.jpg" alt="Plant 1" /></a>
<a href="images/plant2.jpg" class="thickbox" rel="gallery-plants"><img src="images/plant2_t.jpg" alt="Plant 2" /></a>
<a href="images/plant3.jpg" class="thickbox" rel="gallery-plants"><img src="images/plant3_t.jpg" alt="Plant 3" /></a>
<a href="images/plant4.jpg" class="thickbox" rel="gallery-plants"><img src="images/plant4_t.jpg" alt="Plant 4" /></a>

3、显示内容也要建立一个a标签或者input ，给它加个class名为thickbox，为input标签设置alt=”#TB_inline?height=高度&width=宽度& amp;inlineId=要显示内容id”或a标签设置href=”#TB_inline?height=高度&width=宽度& inlineId=要显示内容id”&modal=true”,其中modal=true为设置另一种关闭模式；默认不设置；接着要给需要显示的内容加上id=”要显示内容id”;id自己设定要与上边链接为同一值；高度、宽度根据实际需要设置如下,可以事先将要显示内容css设置为：display:none;

<input alt="#TB_inline?height=300&width=400&inlineId=myOnPageContent" type="button" value="Show" class="thickbox" />
<div id="myOnPageContent">要显示的内容</div>
<a href="#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true" class="thickbox">Show hidden modal content.</a>
<div id="hiddenModalContent">要显示的内容</div>

4.iframe建立一个a标签，给链接a加个class名为thickbox，a设置标签的href=”要显示的网页地址或者php文件地址?keepThis=true&TB_iframe=true&height=高度&width=宽度”；还有另一种关闭模式：href=”要显示的网页地址或者php文件地址?placeValuesBeforeTB_=savedValues& TB_iframe=true&height=高度&width=宽度&modal=true”

1
2
3

<a href="ajax.PHP?keepThis=true&TB_iframe=true&height=250&width=400" class="thickbox">Example 1</a>
<a href="ajaxOverFlow.htm?keepThis=true&TB_iframe=true&height=300&width=500" class="thickbox">Example 2</a>
<a href="iframeModal.html?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=200&width=300&modal=true" class="thickbox">Open iFrame Modal</a>

5.Ajax内容建立一个a标签，给链接a加个class名为thickbox，a设置标签的href=”要显示的ajax文件地址?height=高度&width=宽度，例如：

1	<a href="ajaxOverFlow.html?height=300&width=300" class="thickbox">Scrolling content</a>

DIV移动

cq — Mon, 07 Dec 2009 09:41:51 +0000

移动移动

三列自适应等高且中列宽度自适应

cq — Mon, 07 Dec 2009 02:55:42 +0000

三列自适应等高且中列宽度自适应的CSS布局实例，作者silence应用了很多HACK进行代码编写。
　　IE6是主要出现问题的浏览器，希望在以后的发展中，IE6与标准不再协调的事情不要再次发生。我们看代码：

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
http://www.w3.org/1999/xhtml“>

三列自适应等高且中列宽度自适应 – cq-cser.cn

cq-cser.cn

                http://cq-cser.cn/”>cq-cser.cn />
                http://cq-cser.cn/”>cq-cser.cn />
                http://cq-cser.cn/”>cq-cser.cn />
                http://cq-cser.cn/”>cq-cser.cn />
                http://cq-cser.cn/”>cq-cser.cn />
                http://cq-cser.cn/”>cq-cser.cn />
                http://cq-cser.cn/”>cq-cser.cn />
                http://cq-cser.cn/”>cq-cser.cn />
        http://cq-cser.cn/”>cq-cser.cn />
                http://cq-cser.cn/”>cq-cser.cn />
                http://cq-cser.cn/”>cq-cser.cn />
                http://cq-cser.cn/”>cq-cser.cn />
                http://cq-cser.cn/”>cq-cser.cn />
                http://cq-cser.cn/”>cq-cser.cn />
                http://cq-cser.cn/”>cq-cser.cn />
                http://cq-cser.cn/”>cq-cser.cn />
        http://cq-cser.cn/”>cq-cser.cn />
                http://cq-cser.cn/”>cq-cser.cn />
                http://cq-cser.cn/”>cq-cser.cn />
                http://cq-cser.cn/”>cq-cser.cn />
                http://cq-cser.cn/”>cq-cser.cn />
                http://cq-cser.cn/”>cq-cser.cn />
                http://cq-cser.cn/”>cq-cser.cn />
                http://cq-cser.cn/”>cq-cser.cn />
        http://cq-cser.cn/”>cq-cser.cn />
                http://cq-cser.cn/”>cq-cser.cn />
                http://cq-cser.cn/”>cq-cser.cn />
                http://cq-cser.cn/”>cq-cser.cn />
                http://cq-cser.cn/”>cq-cser.cn />
                http://cq-cser.cn/”>cq-cser.cn />
                http://cq-cser.cn/”>cq-cser.cn />
                http://cq-cser.cn/”>cq-cser.cn />

text-indent隐藏文字(以图换字)

cq — Mon, 07 Dec 2009 02:53:21 +0000

以图换字是CSS布局中非常常用的一种手段，因为图片文字有时候比可选的文字的表达效果更好！
　　因此，某些文字标题是用图片来表达的。但写一个img标签实在不雅，为了照顾蜘蛛，我们使用浏览器障眼法。
　　于是用最常用的text-indent：

css:

Example Source Code

h4 a{background:url(http://www.w3cbbs.com/images/w3cbbs/logow3cbbs.png) left top no-repeat;width:300px;height:75px;text-indent:300px; white-space:nowrap; overflow:hidden;}

Xhtml:

Example Source Code

css网页布局w3c标准

　　但你会发现，在IE6中，没有得到期望的效果，背景图片和文字都被隐藏了（IE7也是这样，其它的未做测试）。
　　解决办法至少有两个：

Example Source Code

1：将display:inline-block;改为display:block;
2：去掉display:inline-block;属性，加float:left;属性。

最终结果：

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> DIVCSS实例：text-indent隐藏文字（以图换字） - mb5u.com

http://www.w3cbbs.com/”>css网页布局w3c标准

仿迅雷博客用户登陆弹出窗口

cq — Sat, 14 Nov 2009 08:28:37 +0000

N久前没发的草稿，汗

很多人都想要这种仿迅雷博客用户登陆弹出窗口，所以就自己做了个。其实方法很简单的，就是要建立一个层(DIV)，或者事先已经建好这个层，然后先隐藏，等用户点击登陆的时候再显示出来。背景也用一个层来覆盖整个屏幕，然后用滤镜把透明度调整下就行了。

现在我们就一起来实现这种效果，首先在你需要显示用户登陆的地方添加以下代码：

用户登陆

其中javascript:Login()中的参数是控制是否有背景层的，ture是有背景层，false是无背景层。点击这里演示：用户登陆(有背景层) 用户登陆(无背景层)

然后编写css代码：
/*———- 用户登陆*/
* {
padding: 0px;
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
html, body{
text-align: center;
width: 100%;
font-size: 12px;
}
a:link, a:visited {
text-decoration: none;
}
a:hover{
text-decoration:underline;
}
ul {
list-style: none;
}
img {
border: 0px;
vertical-align:middle;
}
#loginform{
display:inline;
}
#loginform span a{
color:#FF0000;
font-weight:bold;
}
#floatDiv {
background: #EEF7FE;
border: 1px #B8D2F5 solid;
}
#headDiv{
height:30px;
background-color:#E9F1FC;
cursor:move;
}
#headDiv h3{
font-size: 14px;
font-weight: bold;
color: #1A73C5;
float:left;
text-indent:10px;
line-height:30px;
}
#headDiv span {
margin-right:6px;
margin-top:7px;
float:right;
}
#bodyDiv {
margin:0px 6px 6px 6px;
padding:10px;
background: #FFF;
border: 1px #D9E9F9 solid;
clear:both;
line-height:32px;
}
#bodyDiv a{
color:#666;
}
#bodyDiv ul{
width:200px;
color:#1973C1;
margin-bottom:6px;
vertical-align:middle;
}
#bodyDiv .tbx{
border:1px #B7D1F4 solid;
width:125px;
height:18px;
}
#bodyDiv .code{
border:1px #B7D1F4 solid;
width:60px;
height:18px;
}
#bodyDiv .submit{
width:58px;
height:19px;
border:0px;
background:url(images/login.gif) no-repeat;
}

接着用JavaScript来生成一个id为floatDiv的层，您也可以事先在html中写好代码了，然后把它隐藏，在调用的时候把它显示出来就行了，这样做比较简单一点。但是在这里我们采用第JavaScript生成的方法。代码如下：

这样，一个仿迅雷博客的登陆效果就做出来了。