Crazy Web

注册 | 登陆
浏览模式: 标准 | 列表全部文章

CSS盒模型3D示意图演示

Submitted by anlee on 2010, March 3, 3:27 PM

CSS中的盒模型是关系到设计中排版定位的关键，任何一个选择符都遵循盒模型规范。
下图是CSS盒模型的3D示意图：
你可以拖动查看效果!

CSS | 评论:0 | Trackbacks:0 | 阅读:27

jQuery & CSS实现流体导航

Submitted by anlee on 2010, March 2, 2:30 PM

大小: 9 K 尺寸: 459 x 229 浏览: 1 次 点击打开新窗口浏览全图
JS代码：

JavaScript代码
  1. <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>  
  2. <script type="text/javascript">  
  3.   
  4. $(document).ready(function()  
  5. {  
  6.   
  7. $('#menuBar li').click(function()  
  8. {  
  9.   var url = $(this).find('a').attr('href');  
  10.   document.location.href = url;  
  11.   
  12. });  
  13.   
  14. $('#menuBar li').hover(function()  
  15. {  
  16.      
  17.    $(this).find('.menuInfo').slideDown();  
  18. },  
  19. function()  
  20. {  
  21.     
  22.   $(this).find('.menuInfo').slideUp();  
  23.   
  24. });  
  25.   
  26. });  
  27.   
  28.   
  29. </script> 

(X)HTML代码：

XML/HTML代码
  1. <div id="menuBarHolder">  
  2.    
  3. <ul id="menuBar">  
  4.    
  5. <li class="firstchild"><a href="javascript:#">Home</a>  
  6.    
  7. <div class="menuInfo">I am some text about the home section</div></li>  
  8. <li><a href="javascript:#">Services</a>  
  9.    
  10. <div class="menuInfo">I am some text about the services section</div></li>  
  11. <li><a href="javascript:#">Clients</a>  
  12.    
  13. <div class="menuInfo">I am some text about the clients section</div></li>  
  14. <li><a href="javascript:#">Portfolio</a>  
  15.    
  16. <div class="menuInfo">I am some text about the portfolio section</div></li>  
  17. <li><a href="javascript:#">About</a>  
  18.    
  19. <div class="menuInfo">I am some text about the about section</div></li>  
  20. <li><a href="javascript:#">Blog</a>  
  21.    
  22. <div class="menuInfo">I am some text about the blog section</div></li>  
  23. <li><a href="javascript:#">Follow</a>  
  24.    
  25. <div class="menuInfo">I am some text about the follow section</div></li>  
  26. <li><a href="javascript:#">Contact</a>  
  27.    
  28. <div class="menuInfo">I am some text about the contact section</div></li>  
  29.    
  30. </ul>  
  31.    
  32. </div>  
  33. </div>  

 CSS代码

CSS代码
  1. #menuBarHolder { width: 730px; height:45px; background-color:#000; color:#fff; font-family:Arial; font-size:14px; margin-top:20px;}  
  2. #menuBarHolder ul{ list-style-type:none; display:block;}  
  3. #container { margin-top:100px;}  
  4. #menuBar li{  float:left;  padding:15px; height:16px; width:50px; border-right:1px solid #ccc; }  
  5. #menuBar li a{color:#fff; text-decoration:none; letter-spacing:-1px; font-weight:bold;}  
  6. .menuHover { background-color:#999;}  
  7. .firstchild { border-left:1px solid #ccc;}  
  8. .menuInfo { cursor:hand; background-color:#000; color:#fff;  
  9. width:74px; font-size:11px;height:100px; padding:3px; display:none;  
  10. position:absolute; margin-left:-15px; margin-top:-15px;  
  11. -moz-border-radius-bottomright: 5px;  
  12. -moz-border-radius-bottomleft: 5px;  
  13. -webkit-border-bottom-left-radius: 5px;  
  14. -webkit-border-bottom-rightright-radius: 5px;  
  15. -khtml-border-radius-bottomright: 5px;  
  16. -khtml-border-radius-bottomleft: 5px;  
  17.  border-radius-bottomright: 5px;  
  18. border-radius-bottomleft: 5px;  
  19. }  

Demo 

Download

Tags: css导航

CSS | 评论:0 | Trackbacks:0 | 阅读:23

最新PHP，HTML&CSS帮助Sheets

Submitted by anlee on 2010, February 21, 3:35 PM

这些手册是最新更新的，方便开发者查阅，可以打印或下载电脑
1. PHP Help Sheet
大小: 106.34 K 尺寸: 500 x 127 浏览: 1 次 点击打开新窗口浏览全图

下载地址：获取PDF[1.9MB]

2. HTML Help Sheet
大小: 94 K 尺寸: 500 x 127 浏览: 0 次 点击打开新窗口浏览全图
下载地址：获取PDF[1.9MB]

3. CSS Help Sheet
大小: 102 K 尺寸: 500 x 127 浏览: 0 次 点击打开新窗口浏览全图
下载地址：获取PDF[1.9MB]

Tags: php, html, css

开发手册 | 评论:1 | Trackbacks:0 | 阅读:74

HTML5 Reset Stylesheet

Submitted by anlee on 2010, February 9, 11:34 AM

前端开发有不少人使用模板，boilerplates，和HTML 5样式。Remy 介绍了一些 basic boilerplates for HTML 5, 为了保持这样，国外人修改Eric Meyer’s CSS reset 你可以用在你的HTML 5 页面中。
The code：

XML/HTML代码
  1. /*   
  2. html5doctor.com Reset Stylesheet  
  3. v1.4   
  4. 2009-07-27  
  5. Author: Richard Clark - http://richclarkdesign.com  
  6. */  
  7.   
  8. html, body, div, span, object, iframe,  
  9. h1, h2, h3, h4, h5, h6, p, blockquote, pre,  
  10. abbr, address, cite, code,  
  11. del, dfn, em, img, ins, kbd, q, samp,  
  12. small, strong, sub, sup, var,  
  13. b, i,  
  14. dl, dt, dd, ol, ul, li,  
  15. fieldset, form, label, legend,  
  16. table, caption, tbody, tfoot, thead, tr, th, td,  
  17. article, aside, dialog, figure, footer, header,   
  18. hgroup, menu, nav, section,  
  19. time, mark, audio, video {  
  20.     margin:0;  
  21.     padding:0;  
  22.     border:0;  
  23.     outline:0;  
  24.     font-size:100%;  
  25.     vertical-align:baseline;  
  26.     background:transparent;  
  27. }  
  28.   
  29. body {  
  30.     line-height:1;  
  31. }  
  32.   
  33. article, aside, dialog, figure, footer, header,   
  34. hgroup, nav, section {   
  35.     display:block;  
  36. }  
  37.   
  38. nav ul {  
  39.     list-style:none;  
  40. }  
  41.   
  42. blockquote, q {  
  43.     quotes:none;  
  44. }  
  45.   
  46. blockquote:before, blockquote:after,  
  47. q:before, q:after {  
  48.     content:'';  
  49.     content:none;  
  50. }  
  51.   
  52. a {  
  53.     margin:0;  
  54.     padding:0;  
  55.     border:0;  
  56.     font-size:100%;  
  57.     vertical-align:baseline;  
  58.     background:transparent;  
  59. }  
  60.   
  61. ins {  
  62.     background-color:#ff9;  
  63.     color:#000;  
  64.     text-decoration:none;  
  65. }  
  66.   
  67. mark {  
  68.     background-color:#ff9;  
  69.     color:#000;   
  70.     font-style:italic;  
  71.     font-weight:bold;  
  72. }  
  73.   
  74. del {  
  75.     text-decoration: line-through;  
  76. }  
  77.   
  78. abbr[title], dfn[title] {  
  79.     border-bottom:1px dotted #000;  
  80.     cursor:help;  
  81. }  
  82.   
  83. table {  
  84.     border-collapse:collapse;  
  85.     border-spacing:0;  
  86. }  
  87.   
  88. hr {  
  89.     display:block;  
  90.     height:1px;  
  91.     border:0;     
  92.     border-top:1px solid #cccccc;  
  93.     margin:1em 0;  
  94.     padding:0;  
  95. }  
  96.   
  97. input, select {  
  98.     vertical-align:middle;  
  99. }  
这里你可以下载：http://code.google.com/p/html5resetcss/downloads/list
文章来自：http://html5doctor.com/html-5-reset-stylesheet/

Tags: html5

(X)HTML | 评论:0 | Trackbacks:0 | 阅读:52

css3.0参考手册+w3c标准html5手册+jQuery 1.4.1参考手册

Submitted by anlee on 2010, February 9, 11:08 AM

css3.0参考手册+w3c标准html5手册+jQuery 1.4.1参考手册分享前端开发朋友
大小: 4.16 K 尺寸: 500 x 42 浏览: 1 次 点击打开新窗口浏览全图
下载地址：http://www.webdeveloping.cn/bbs/viewthread.php?tid=2635&extra=page%3D1

Tags: css手册, html5手册, jquery手册

开发手册 | 评论:0 | Trackbacks:0 | 阅读:77

网页设计师配色方案和调色板

Submitted by anlee on 2010, January 13, 9:26 AM

Colr

Colr has been around since March 2005.  It’s a tool to let people fiddle around with colors and it’s a jungle gym for software ideas. It has a pretty neat function: you can load colors from a random image or your own image.

ColorJack

ColorJack is one of the best websites to go to for a little inspiration on what is the best combination of color pallets to use on your website. It also has a few variations of it via sphere and galaxy.

Redalt

Redalt is a unique wordpress site that has a color analyzer. You submit your website and the analyzer picks up which colors are used in your template and then groups it based on hues , shades of a certain color as well as showing you where the colors come from via css stylesheet.

DaGraeve

DaGraeve has a pallets generator that gives you colors based on the pictures you upload. It is excelent to find color pallets for projects where you get some content images from your clients. I used it for my projects a few times and it worked like a charm.

Colour Lovers

Colour Lovers is the best community out there for color pallets and schemes. It is insane at how dedicated this website is towards website color scheme that it makes you feel like you can do SO much more ! You can register for free and contribute with your own color pallets or patterns.

» 阅读全文

Tags: 配色方案, 调色板

网页设计 | 评论:0 | Trackbacks:0 | 阅读:137

漂亮100招聘啦...

Submitted by anlee on 2009, December 21, 1:35 PM

漂亮100是国内领先的、以女性消费者为主导的，集合信息数据、购物、多样化服务为一体的新型网络时尚生活平台，是专注于美容护肤产品的一站式导购型B2C电子商务平台。
漂亮100作为全媒体整合互动营销专家，通过全新的电子商务模式，致力于构建国内最具影响力的立体化、全媒体资源服务平台，为用户提供完善的、一站式的宣传服务解决方案。
漂亮100通过时尚妆品信息分享、网上化妆品购买、活动互动、口碑推荐等方式，为追求生活品质的都市时尚人群打造一个精致的时尚生活互动空间，引领时尚人群的流行消费导向。
漂亮100将为您提供舒心、专业、体贴和信赖的网上购物新体验。以多种个性化的、贴心周到的服务，让您感受漂亮100无微不至的贴心关怀。从而能在不同层面帮助用户更好地进行消费决策，让您足不出户，却走在美丽的前沿！品味时尚生活，尽享购物乐趣，就在漂亮100！

技术部：
初中级运维工程师（1人）

岗位职责：
1、负责公司服务器的运维工作；
2、负责公司设备的日常维护及管理；技术档案维护；
3、负责内部信息系统建设、维护；进行域名、后台数据、邮箱管理；
任职资格：
1、计算机或IT相关专业，英语水平较好；
2、一年的网络管理、服务器网管工作经验，熟悉Windows，linux系统管理；
3、熟悉路由器，交换机、防火墙的网络设备的设置与管理；
4、熟悉Apache、Mysql、php等网站常用软件安装与维护；
5、熟悉RedHat Linux系统下的各种管理，服务配置，系统安全设置,系统监控；
6、学习能力强，较好的沟通和协作能力，较强的执行力和沟通能力，具备良好的服务意识
更多职位：漂亮100官方网

Tags: 漂亮100

站长日记 | 评论:3 | Trackbacks:0 | 阅读:513

jQuery 1.3 开发手册（壁纸版+网页版）

Submitted by anlee on 2009, November 24, 1:10 PM

jQuery 1.3 开发必备手册，收藏分享
大小: 87.16 K 尺寸: 500 x 313 浏览: 49 次 点击打开新窗口浏览全图

壁纸版下载：
jquery_1_3_1440×900jquery_1_3_1440_900.rar
jquery_1_3_1680×1050jquery_1_3_1680_1050.rar
jquery_1_3_1920×1200jquery_1_3_1920_1200.rar

jQuery 1.3 Cheatsheet 网页版

jQuery UI 1.7 网页版

jQuery website

Download jQuery 1.3.2 (latest version)

Tags: jquery手册

JavaScript | 评论:0 | Trackbacks:0 | 阅读:330

IE6, IE7, IE8 CSS 兼容速查表

Submitted by anlee on 2009, October 18, 8:25 PM

Web 设计与开发越来越看重浏览器兼容问题，IE 每个新版本的推出，都在 CSS 的标准化方面前进一大步，同时，也就不可避免地在 IE 的各个主要版本之间产生兼容问题，尽管 IE8 推出已有时日，使用 IE6的用户仍然相当可观。本文以速查手册的形式介绍 CSS （2.1 和 3）在 IE6,7,8 三个版本之间的兼容情况。
这套速查手册可以打印成 A3 尺寸，共2页，以下是各种不同格式下载：
高分辨率 GIF 图片格式，第一页，第二页
PDF 格式，第一页，第二页

大小: 41.49 K 尺寸: 500 x 392 浏览: 27 次 点击打开新窗口浏览全图

Tags: css

开发手册 | 评论:0 | Trackbacks:0 | 阅读:319

GooglePicasa 相册无法访问解决方法

Submitted by anlee on 2009, October 8, 1:02 PM

我一直在用GooglePicasa，最近一直访问不了GooglePicasa，即使可以访问也是一团乱，我试用了网上分享的方法还是不可以，修改了他们的方法，现在可以了。
1、手动修改hosts文件（hosts文件位置：c:\windows\system32\drivers\etc）
2、有记事本（或你喜欢用的编辑器）添加如下行：
203.208.39.104 picadaweb.google.com
203.208.39.104 lh1.ggpht.com
203.208.39.104 lh2.ggpht.com
203.208.39.104 lh3.ggpht.com
203.208.39.104 lh4.ggpht.com
203.208.39.104 lh5.ggpht.com
203.208.39.104 lh6.ggpht.com
现在我的Picasa 网络相册可以正常访问了.

Tags: picasa

电脑网络 | 评论:0 | Trackbacks:0 | 阅读:244

Records:29712345678910›»