网站弹出登陆窗口设计
大家都知道,很多博客或网站都有一个点击弹出登陆窗口的功能,非常漂亮。本文就介绍一下制作方法。
首先在你需要显示用户登陆的地方添加以下代码:
<div id="loginform"><a onclick="javascript:Login(true);" href="#">用户登陆</a></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: [...]
设计师必备的网页素材在线生成器
背景生成器
我们都知道,背景设置在设计中起着至关重要的作用。网页设计师有时会花费大量的时间来构造图案或条纹背景。以下的这些在线生成器会为您节省时间,并生成更好的成果。
1. Pattern Cooler
2. Stripe Mania
3. Dotted Background Generator
4. Tartan Maker
5. Striped Backgrounds
6. BgPatterns
7. Stripe Generator 2.0
8. ColourLovers
9. Stripe Designer
10. Bgmaker
杂项。图像生成器
这是一组不同类型的生成器,如Logo生成器,按钮生成器,载入中图像生成器等等。享受这一列表。
11. Ajax Loading Gif Generator
12. Ajax Load
13. Web 2.0 Badges
14. Buttonator
15. Brilliant Buttonmaker
16. Web 2.0 Logo Creator
17. Logo Creator
18. Logo Maker
19. Rounded Cornr
20. RSS Button Maker
21. Create a Graph
22. XML / SWF Charts
Favicon 生成器
这类由favicon生成器组成。Favicon图标是您网站的身份象征,因此请务必为您的每个网站选个独特。并且您可以通过这些生成器产生ico文件。
兼容IE和fireFox的设为首页、加入收藏代码
<!–/设为首页 加入收藏 兼容Firefox IE–>
<script language=”javascript” type=”text/javascript”>
function addCookie() { // 加入收藏
if (document.all) {
window.external.addFavorite(‘http://www.finalcn.com’, ‘终点科技网 -中文科技业界资讯站’);
}
else if (window.sidebar) {
window.sidebar.addPanel(‘终点科技网 – 中文科技业界资讯站’,’http://www.finalcn.com’, “”);
}
} function setHomepage() { // 设为首页
if (document.all) {
document.body.style.behavior = ‘url(#default#homepage)’;
document.body.setHomePage(‘http://www.finalcn.com’); }
else if (window.sidebar) {
if (window.netscape) {
try {
netscape.security.PrivilegeManager.enablePrivilege(“UniversalXPConnect”);
}
catch (e) {
alert(“该操作被浏览器拒绝,假如想启用该功能,请在地址栏内输入 about:config,然后将项 signed.applets.codebase_principal_support 值该为true”);
}
}
var prefs = Components.classes['@mozilla.org/preferences-service;1'].getService(Components.interfaces.nsIPrefBranch);
prefs.setCharPref(‘browser.startup.homepage’,’http://www.finalcn.com’);
} }
</script>
上面的代码放在网页的头部。
下面是引用代码:
<a href=”javascript:void(0)” onclick=”setHomepage()”>设为首页</a> | <a href=”javascript:void(0)” [...]
精选100个设计模板、代码、工具资源站
20年来,开源设计模式促进了网页设计的发展,下面这100个精选的开源设计站为我们提供了一些设计资源,给我们带来一些设计思路和灵感:
OSWD: Over 2,000 of the best freebie web design templates. Also allows for search capability by color, contrast, validation, and other categories.
OpenWebDesign:A large and active community of individuals who share free web design templates. Includes regular design contests and a sub-category of most popular designs to speed up your search.
Open Designs: Headed by a non-profit [...]
30个精选的CSS技术和实例
1.Hoverbox 图片集
一个纯净的基于CSS的图片集,鼠标悬停缩略图就会显示放大效果。
2.高级CSS菜单
一款很有创意且复杂的CSS导航方案。
3.滑动影集
手风琴效果的影集,悬停便可拉伸图片。
4.Lightbox幻灯片
题为”Supercharge your image borders“的文章中的一部分展示了如何使用CSS样式让图片变得更有意思。
5.图片的阴影效果
在A List Apart上的一个关于图片效果Demo的讨论文章“CSS Drop shadows“.
6.跨浏览器多页式影集
悬停标签改变分类,悬停缩略图显示放大图。
7.CSS照片放大
使用简单的图片和background-position属性来进行调解。
8.CSS gallery layout—smells like a table
模仿表格布局,但使用的是列表。图集是流式宽度。
9.Sticky Footer
仅使用了很少XHTML的静态页脚。
10.whatever: hover
模仿Windows开始菜单的CSS导航菜单。
11.纯CSS手风琴效果
使用div和:hover伪类的手风琴效果,这个效果可以垂直显示也可以水平显示。
12.使用PNG和背景色的可扩展按钮
13.Pushbutton Links
链接在不使用图片的情况下看起来像个按钮。
14.含固定Header的可卷动表格
表格的标题被固定的优秀长表格。
15.CSS内容遮盖
当你悬停在图片上时,div容器会显示更多文字。
16.CSS样式表格版本2
一个使用背景图片且非常漂亮,被语义化标记的表格。
17.PNG遮盖
另一种为图片添加圆角的方法。(圆角、边框、阴影)
18.利用CSS为超链接添加提示
关于为不同类型的链接添加图标的简单教程。
19.简单的CSS圆角边框
仅适用了一张图片和很少的几行代码及标记。
20.Sitemap Celebration
使用嵌套列表的树形导航,很适合网站地图页面。
21.简单的跨浏览器幻灯片
不使用JavaScript实现透明度技巧(但是以不符合XHTML验证为代价)
22.圆角2
流式跨度和高度的圆角div。
23.使用背景图片百分比来创建图表
条线图使用列表<li>。
24.CSS柱状图:实例
3款柱状图实例:使用div和列表标签的”基本CSS柱状图”、”复杂CSS柱状图”、”垂直CSS柱状图”。
25.动态翻转简单头
箭头会平滑的跟随鼠标移动,没有使用一丁点JavaScript和gif动画。
26.基于CSS的表单模板
27.CSS图片文本结合技巧
使用了空白div来让文本能围绕背景图中的图像显示。
28.使用CSS实现淡入效果的图片
这个实例使用透明度设置和简单的图片逐渐在文字上方淡入图片。
29.纯CSS弹出效果
一个在IE5(Mac)上也能正常工作的弹出技巧。
30.使用CSS实现文本渐变效果
使用背景图片遮盖,和一个空的span标签,还有position: absolute声明来实现文本的渐变效果。
DedeCMS 5.5 SP1 年底发布
今天突然想起我曾经相处多年的DedeCMS了,于是就去官方逛了逛,发现官方基本没什么变化,但在官方博客上看到了年底发布新版本的消息,版本为DedeCMS 5.5 SP1,看来这次动作不大,只在原来的基础上加了个SP1,新版本一瞥:
1.重新设计织梦帮助手册
帮助手册更新一直没有能够及时,这次不单单重新设计了下帮助手册的界面,并且单独成立项目,今后帮助文档尽量做到实时、全面。
图1
图2
2.会员中心功能及界面调整
会员中心增加了一个会员模型管理,可以自定义会员的字段,便于管理网站会员,这次也重新设计了下会员中心的UI,在这个基础上会加强一些功能。
图3
图4
图5
3.整理开发制作规范
很多人希望向织梦官方贡献代码,接下来我们也会整理一些开发规范,让大家共同参与到开发中来。
PS:之前天涯也弄了一个很轻便的论坛,这次也会放出来
看来DEDE官方下个版本有可能带个MINI论坛了。
期待中。。。
忍不住想转发:韩寒:从今天起,做一个低俗的人
近日,全国开始打击手机低俗涉黄短信。在上上一篇文章中(从次序上来讲的确是上上篇,但是从视觉上来讲却是上一篇),我说到我将发各种黄段子给各个朋友,看看这个尺度到底在哪里,因为难得我们国家有这么仁慈的惩罚手段,在违背了政府的意愿以后只需要停机,而不是像贵州村民一样直接停尸。既然只需要停机,为什么不试试呢。
但是我很后悔,因为这个行为破坏了我和很多朋友之间的感情,不少朋友在这两天直接质问我,为什么我没有收到黄段子,难道你不把我当朋友么?其实不是这样的,有可能你本人很黄,但我的黄段子不够黄,被你当成了一个普通笑话,有可能你本人不黄,但我的黄段子足够黄,被中国移动直接屏蔽,并不是每一个朋友我都发,因为很多朋友平时看上去还是比较正经的,没想到你们那么不正经。
除了给男性朋友黄段子以外,从明天开始,我决定双管齐下,对一些女性朋友进行性骚扰。这一切其实都是为了弥补政府的失职。我坚决拥护政府的决策,但是政府没有告诉我们对黄段子和色情短信的界定,相关部门应该在人民日报和新闻联播里刊登朗诵不能通过的黄段子或者淫秽词汇,比如说在新闻联播中,女播音员说,相关部门决定对手机涉黄进行严厉打击,防止手机短信低俗化,出席本次活动的屏蔽词有——“阴道”,男播音员接着说道“****”……这才是负责认真的态度。
其实,黄段子和性骚扰完全不一样,黄段子在人际交往里扮演着重要的角色,黄段子是拉近人与人之间距离的重要手段。我身边的朋友没有人看到有人在手机里给他发了一个黄段子而暴跳如雷的,唯一不爽的可能性只有两种,第一种就是这个黄段子不够好玩,第二个就是这个黄段子是自己刚刚看过并且转发出去的。当然,由于我们经常站在民意的对立面,所以也不排除政府做一个调查,百分之九十的人表示,非常讨厌黄段子,黄段子给他们的生活带来了巨大的困扰,比如导致他学习分心,考不上研究生,当不了公务员。
第二种短信就是性暗示短信或者调情短信,调情短信在人际交往里扮演着重要的角色,调情短信是拉近人与人之间距离的重要手段。既然都能发出这样的短信了,估计已经有着很高的回床率了,无论是情人情侣或者夫妻,这样的短信也是必不可少,合情合理,我又没有在新民晚报上登报表示就喜欢人家什么姿势,这种单对单的消息当事人双方都表示没意见,但是连当事人还没插入,怎么突然间政府就插手了呢。
所以,我相信政府此举的目的其实是要屏蔽一些卖淫嫖娼信息,比如说我收到过的“各地小妹,贴心服务,白领500元,学生妹600元,模特800元,洋妞1200元,破处3000元”,从这条消息里我们得知两个讯息,第一个就是往往这样的短信里并不含有屏蔽词,第二个就是白领真的很可怜,生活工作压力大,连出去卖或者假装这个身份出去卖都卖不出一个好价钱。
另外我又一个疑惑的是,这究竟是怎样的一个审查系统,我从来不把侵犯人权和隐私权用来做文章,这是一个夫妻做爱都有人破门而入命令你拔出的地方。但是我很好奇,比如说你和你女人调情,结果被电脑先屏蔽审查了,然后就是相关部门的人员进行人工审查,最后审查下来没问题,这短信发出去了,你这应该算是一条短信调戏了两个人啊,连组织的女人都被你一并调戏了。另外,这个系统肯定会截停很多各种人的低俗短信,无论是各地领导,社会名流,文体明星,工人农民等等,虽然这些人可能最后没有被停机,但是每天看他们发送的各种短信应该很有意思,说不定还有屏幕前的你你你你你你你。
在二十年前,我国对于要消灭的群体都冠以流氓两字,然后判刑的判刑,枪毙的枪毙,到了今天,这个词汇变成了“低俗”,要消灭你,你就是低俗的。我花了很长时间去想,那些界定别人低俗的人,他们到底高雅在哪里,比如说有人花一百块嫖娼是低俗,有人用一百万去玩艺人就是高雅,有人看黄色图片是低俗,有人看红头文件是高雅,有人买个仿真枪是低俗,有人真枪一暴两个头是高雅,有人玩魔兽就是低俗,有人玩模特就是高雅,当然,这个谁都说不清楚,说清楚了,就不能随心所欲了。为了防止有一天我突然变成一个低俗的人,我率先低俗,并承认从今天起,做一个低俗的人。
Windows 7 旗舰版 激活文件下载
使用Windows 7 旗舰版已经有一段时间了,说真的Windows 7 给我的印象非常好,可以说Windows 7 相对 Vista 来说是一个质的变化,使用过win7的网友们对它的评价都不错。
也是因为这个原因,平时我就鼓励同事们装windows 7 ,有时同事抱着本本就来找我说要重装系统,想装XP,我就像一个广告推销员一样向他们推销Windows 7,但每次我都是到我的信箱里找那个激活文件,不然,系统只能正常使用一个月。
今天奇怪地发现,我信箱里的文件不见了,本来我也不想发破解类的文件的,但每次到信箱里找,总是觉得麻烦,所以就产生了提供下载的念头,方便下次装机时激活方便,大家别拍砖啊!
点击下载 Windows 7 激活文件
下面是网友发的一个称为Windows 7万能KEY,大家不防试试:
TFP9Y-VCY3P-VVH3T-8XXCC-MF4YK
不用插件实现WordPress自定义日志缩略图的方法
网有已经有很多文章介绍了WordPress缩略图的方法,在此,我继续啰嗦一下,不过也给添加一点新的东西,就是实现缩略图位置当有图片的时候显示图片,没有图片的时候,显示你想显示的东西,比如广告啦什么的。
在你的日志模板文件中找到你要显示图片的地方,把相应的显示图片的代码改成:
<?php $image = get_post_meta($post->ID, ‘thumb_image’, true); ?>//设定自定义代码的名称
<?php if ( get_post_meta($post->ID, ‘lead_image’, true) ) : ?>//执行条件:有图片时候
<div><img width=”336″ height=”280″ src=”<?php echo $image; ?>” alt=”" /></div>//图片样式控制
<?php else : ?>//如果没有图片的话
//这里插入你的图片或广告代码
<?php endif ?>
这段代码中的thumb_image就是你自定义域的名称,在后面的内容里输入你的图片地址就可以了。
附一下WordPress自定义域添加图片方法:
在index.php文件中查找如下这句(根据主题模板不同而稍有不同):
<?php while ( have_posts() ) : the_post() ?>
<div id=”post-<?php the_ID() ?>”>
我们在其下面添加如下一句:
<?php $image = get_post_meta($post->ID, ‘index_image’, true); ?>
这一句的作用是用来控制自定义字段的设置,在这里我们把自定义字段设置为:index_image。
然后我们在需要插入照片的地方增加如下代码调用自定义字段:
<div><img width=”495″ src=”<?php echo $image; ?>” alt=”" /></div>
其中:
代码中的“img width=””495”是调用图片的宽度尺寸,请根据你的模板宽度进行调整。
<div>标签是对图片的CSS属性设置。
通过上面的几行代码,现在我们可以在撰写新日志时候通过自定义字段对各篇日志的图片进行控制,具体如下:
新建日志,在WordPress后台的自定义字段中填写如下:
字段名:index_image
字段值:http://www.saywp.com/postimages/2008/04/test.png
其中:
字段名:为我们在文章开始设置的名字。
字段值:是你将调用图片的路径。
然后点击“添加自定义字段”按钮则可。
Typecho 豪华蓝调主题 Premium Blue 制作完毕
从羽中的博客中看到他用的代码是Typecho代码,之后我对这个代码进行了下载测试,发现Typecho代码真的不错,代码非常简洁,设计思路清晰,体积小,速度特快,后台非常简洁,非常适合小型博客或网站使用。
于是乎,我就开始研究了一下这个代码,制作出Typecho的第一款主题,因为主题的色调是炫丽的蓝色,就给这款主题起名:Premium Blue -豪华蓝调主题。
声明:本主题是仿自国外最贵的一款商业主题之一,目前此主题在网络上没有任何下载源,请大家不要随意宣传。
目前本主题已经制作完毕,免费提供下载。希望大家保持本博链接,算是对本人辛苦工作的支持与肯定,谢谢!
点击到Typecho专题博客查看演示!
下面是内容页面预览图片:
点击下载!



最近评论