FACE OF ADVERSITY - My Posture » css http://www.lidecheng.com/blog 直面困境 - lidecheng's weblog Tue, 31 Aug 2010 04:50:34 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 IE6, IE7, IE8 CSS 兼容速查表 http://www.lidecheng.com/blog/visual-cheat-sheet-css-compatiblity/ http://www.lidecheng.com/blog/visual-cheat-sheet-css-compatiblity/#comments Sun, 18 Oct 2009 15:57:22 +0000 lidecheng http://www.lidecheng.com/blog/?p=182 Read the full story »]]> 现代 Web 设计与开发越来越看重浏览器兼容问题，IE 每个新版本的推出，都在 CSS 的标准化方面前进一大步，同时，也就不可避免地在 IE 的各个主要版本之间产生兼容问题，尽管 IE8 推出已有时日，使用 IE6的用户仍然相当可观。本文以速查手册的形式介绍 CSS （2.1 和 3）在 IE6,7,8 三个版本之间的兼容情况。

这套速查手册可以打印成 A3 尺寸，共2页，以下是各种不同格式下载：

本文来源：http://tutorialfeed.blogspot.com/2009/10/visual-cheat-sheet-css-compatiblity.html

]]> http://www.lidecheng.com/blog/visual-cheat-sheet-css-compatiblity/feed/ 0 xHTML + CSS 标准网页制作视频教程 http://www.lidecheng.com/blog/xhtml-css-teaching-video/ http://www.lidecheng.com/blog/xhtml-css-teaching-video/#comments Fri, 31 Jul 2009 08:21:44 +0000 lidecheng http://www.lidecheng.com/blog/?p=173 Read the full story »]]> 这是09年初admin5邀请我做几期 'xHTML+css制作标准网页' 的课程，这里分享出来的是当时我做的课程录像，一共是八节课。

相比起其他的视频教程呢，我的教程主要讲的都是实用的一些DIV+CSS制作手法和技巧，我也看过其他人制作的这方面教程，虽然可以做到十几讲甚至二十几讲，但是有很多功能在平时工作中都是用不到的，有的连我做了这么多年前端开发的人都没有用到过，那些我就跳过了，避轻就重的讲了八节课。

这次把这八节课的视频发出来，希望能给你们帮助。当然还有很多没有讲到的功能点，大家可以google一下。

下面是课程的清单：

xHTML + CSS 标准网页制作视频教程

  • 第一讲：概述、什么是标准web页面、正确的书写规范、字体的控制、列表的控制等等...（64′30″）(第一课、第二课)
  • 第二讲：开发工具、对整个页面的控制、margin/padding的使用，float详解、网页排版初步（43′08″）（第三课、第四课）
  • 第三讲：css+div制作表格（15′14″）
  • 第四讲：网站页面分析、网站头部制作格（13′35″）
  • 第五讲：网站导航、首条新闻区域的制作（21′41″）
  • 第六讲：网站新闻区域的DIV+CSS混排（31′10″）
  • 第七讲：内容页的制作（29′10″）
  • 第八讲：input/hr的样式、SEO初步（23′48″）

可以在线观看，下载办法请自行开发  :)

]]> http://www.lidecheng.com/blog/xhtml-css-teaching-video/feed/ 1 学习使用CSS+Div配合cms系统完美建站 http://www.lidecheng.com/blog/admin5-tech-css-div-cms/ http://www.lidecheng.com/blog/admin5-tech-css-div-cms/#comments Fri, 07 Nov 2008 03:00:28 +0000 lidecheng http://www.lidecheng.com/blog/?p=89 Read the full story »]]> 第二期：两周学习织梦建站完全教程

第一天

  • 织梦产品的介绍
  • 织梦产品的安装
  • config.php详解
  • 织梦目录详解
  • 织梦模板目录详解

第二天

  • 织梦的设计架构
  • 织梦数据库的常用表介绍
  • 新建一个织梦模板
  • 织梦文章调用方法介绍
  • 文章底层模板修改详解
  • 跨频道调用及整站调用文章列表

第三天

  • 织梦图片文章调用方法介绍
  • 图片与文章列表的图文混排
  • 织梦文章时间的多种调用方式

第四天

  • 文章内容页的制作及修改
  • 织梦后台自定义标签的使用及调用方法

第五天

  • 织梦列表页文章的调用
  • 列表页的全站调用及混编调用
  • 列表页的制作及注意事项

第六天

  • 织梦常用标签的使用
  • 常用标签的底层模板修改方法
  • 友情链接、投票等系统的调用

第七天

  • 织梦的自定义宏标记的制作
  • 织梦的自定义宏标记的两种调用方法
  • 织梦的自定义宏标记的使用注意事项

第八天

  • 织梦智能标记的使用
  • 织梦专题及单页面的制作及使用方法
  • 织梦用户登陆框的调用及修改
  • 织梦用户登陆后登陆框的变换
  • 用户后台的修改

第九天

  • 织梦系统与discuz的整合
  • 织梦系统与phpwind的整合
  • 织梦整合API文件详解

第十天~第十四

  • 使用织梦cms系统及div+css制作一个完整的新闻发布站点

第一期：十天学习DIV+CSS制作标准web页面

第一天

  • 什么样的网页可以称为标准的Web页面
  • 使用Web标准开发网页的优势
  • 初识XTHML / DIV / CSS
  • 制作标准Web页面的注意事项

第二天

  • 常用CSS方法的使用详解
  • CSS的写法与格式
  • Class与id
  • CSS对文字、列表、背景、超链接等的操作

第三天

  • CSS开发及调试工具
  • 多浏览器支持（每节课都要提到）
  • CSS对整个页面的控制

第四天

  • margin / padding 的使用
  • float 详解
  • 网页的横向排版和纵向排版

第五天

  • 用CSS+DIv替代表格
  • 只要是Table能完成的CSS+Div一定能完成
  • 使用margin / padding配合网页表格制作

第六天

  • 带领学员使用Web标准制作一个个人网站
  • 整站的规划、目录结构、命名规范
  • SEO初步知识

第七天

  • 完成首页
  • 网页栅格布局
  • 头部尾部、sidebar、main

第八天

  • 完成两个附页面（自我介绍、关于本站）
  • 图文混排
  • 定位与控制

第九天

  • 完成两个附页面（我的照片、下载资源）
  • CSS对图片的控制
  • CSS列表详解

第十天

  • 完成个人网页（全部五个页面）的制作
  • UCD初步介绍
  • 解决学员Email问题及其他遗留问题
]]> http://www.lidecheng.com/blog/admin5-tech-css-div-cms/feed/ 6 css hack 针对不同浏览器的写法 http://www.lidecheng.com/blog/css-hack-to-different-browser/ http://www.lidecheng.com/blog/css-hack-to-different-browser/#comments Sun, 12 Oct 2008 19:46:41 +0000 lidecheng http://www.lidecheng.com/blog/?p=71 又是浏览器的兼容问题。

针对不同浏览器对页面的显示方式来写css文件，需要使其对IE6 IE7 FIREFOX都有最佳的显示效果，或要调整css在其中一中浏览器中的显示方式，可以通过下划线(_)、星号(*)来处理：

比如要居中显示，我们都知道css中写法为：

text-align: center;

当然这属性是所有浏览器都解释的，如果只想让ie6有居中的效果而firefox和IE7则不应用居中，可写为

_text-align: center;

如果想让所有IE都解释而在firefox不解释则写为：

*text-align: center;

而ie6与ie7的不同在于ie6解释!important，而ie7会解释!important。

区别不同浏览器的css hack写法为：

区别ie6和ie7：text-align: center; text-align: left!important;
区别firefox和ie6：text-align: center; _text-align: left;
区别firefox和ie7：text-align: center; *text-align: left;
区别firefox、ie6和ie7：text-align: center; *text-align: left; *text-align: right!important;

总结：

IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
IE6支持下划线"_"，IE7和firefox均不支持下划线"_"。

]]> http://www.lidecheng.com/blog/css-hack-to-different-browser/feed/ 2