分类: CSS预览模式: 普通 | 列表

DIV+CSS网页及导航布局实例教程

作者:lanyi  日期:2010-08-07




在中国，很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS，甚至很多人都还不知道xHTML+CSS是什么意思，只知道盲目的追求DIV+CSS，但在国外，是没有DIV+CSS这个概念的，很明显如果单从字面上去理解，DIV+CSS的网页就要全都是div，很明显是无法达到语义化标准的。希望通过博客让所有读者正视代码语义化的重要性，请把”DIV+CSS”这个词从脑子中删除，用”xHTML+CSS”替代吧！
向大家推荐43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程，在国外也可以叫做PSD2XHTML。如果你是以为网页设计师，可能会对将自己的效果图实现成语义化的xHTML页面感到头痛，还有一些CSS初学者对于xHTML+CSS处于懵懂状态，希望大家通过这43个”DIV+CSS”实例教程学习到语义化xHTML+CSS布局的精髓，即使你已经成为高手，我也相信其中有你值得学习的地方。

查看更多...

Tags: 网页布局 CSS

分类:CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 50

几种方式 Css代码美化 改进你的Css

作者:lanyi  日期:2010-08-04

前面我们已经介绍了国外优秀的CSS框架 ,这里我们谈谈如何在普通平常的工作站更好的改善你的css代码。
简介
当然，每个人都可以编写CSS代码，甚至你现在已经让它为你的项目工作了。但是CSS还可以更好吗？开始用这5个Tips改进你的CSS吧！

1.重置

查看更多...

Tags: CSS 代码美化

分类:CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 52

国外优秀的CSS框架

作者:lanyi  日期:2010-08-02

下面一起来了解一下各种不同的CSS框架吧:
1.
960 Grid System
[url=http://blog.bingo929.com/css-frameworks-15.html]

查看更多...

Tags: CSS框架 CSS css美化

分类:CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 49

各浏览器的默认CSS

作者:lanyi  日期:2010-07-29

       在丸子主编的帮助下终于找到了各浏览器的默认CSS。只要是由于今天解决了一个特殊的问题，依靠的就是看各浏览器的默认CSS，然后重置它，所以很多时候浏览器的默认css还是很有用的。
各浏览器的默认CSS可以在这里
http://www.iecss.com/
找到，贪心一下，把这些样式都保存了一份：
IE6(下载)

查看更多...

Tags: 浏览器默认CSS

分类:CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 48

网站变黑白色CSS一行代码实现 网站变灰

作者:lanyi  日期:2010-07-23

在CSS文件的最前面加上一行代码就可以了，这段代码使用的是CSS滤镜，将网页中的色彩部分过滤掉。
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }（不换行）

Tags: CSS滤镜 网站变灰

分类:CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 54

CSS实现 屏幕自适应

作者:lanyi  日期:2010-03-23

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>屏幕自适应</title>


<style type="text/css">*{ margin:0px;padding:0px;}html,body{ width:100%;height:100%; *padding:50px 0 50px 0; overflow:hidden;}#room{ position:fixed;top:50px;right:0;bottom:50px;left:0; overflow:auto; *width:100%;*height:100%;}#header{ width:100%;height:46px; *height:50px; position:absolute;left:0;top:0; overflow:auto; background:#66CDAA;border-bottom:4px solid #6A5ACD;}#footer{ width:100%;height:46px; *height:50px; position:absolute;left:0;bottom:0; overflow:auto; background:#66CDAA;border-top:4px solid #6A5ACD;}#box{ width:100%;height:100%; float:left;overflow:auto; background:#EE7600;}


</style>


</head><body><div id="header"></div>


查看更多...

分类:CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 131

好读的css样式

作者:lanyi  日期:2010-03-22

/*  it is writen by
    author:sam chow
    QQ:244851119
    email:web_zhoucun@126.com
    a gift to (x)html
    run in ie(6+) ie(7+) firefox(2.0+) opera(9.0+) */
* {padding:0;margin:0;}
body {font:12px/1.5em Verdana,"",sans-serif;color:#333;background:#ebebeb;}
ul {list-style:none;}
.border {border:1px solid #ccc;}
h1{font-size:17px;}
h2{font-size:16px;}
h3{font-size:15px;}
h4{font-size:14px;}
h5{font-size:13px;}
h6{font-size:12px;}
img{border:0;}
table{border-collapse:collapse;}
a:link {color:#333;text-decoration:none;}
a:visited {color:#333;text-decoration:none;}
a:hover {color:#f60;text-decoration:underline;}
a:active {color:#333;text-decoration:none;}
.clear {display:block;width:0;height:0;clear:both;margin:0;padding:0;font:0/0 sans-serif;}
.tRed {color:#f00;}
.b {font-weight:bold;}
.t {border:1px solid #159;}
.mLeft { margin-left:10px;}
.tCenter {text-align:center;}
.center {margin:0 auto;}
code { color:#f00;font-family:Verdana;}
pre { font-family:Verdana,""; border:1px dashed #ccc; border-left:4px solid #06c; background:#fffeff; margin:3px 0 3px 15px;padding:5px 10px;word-wrap:break-word;word-break:break-all;}
.wrapper {width:100%;margin:0 auto;}
    .main,.side {border:1px solid #d5d5d5;background:#fff;}
    .main li a,.main div.ps a {padding-left:20px;display:inline-block;background:url(../i/new.gif) no-repeat 0 4px;color:#0746ba;}
    .main li a.bad {background:url(../i/bad.gif) no-repeat 0 1px;}
    .main li a.search {background:url(../i/search.gif) no-repeat 0 1px;padding-left:60px;}
    .main li a.down {background:url(../i/down.gif) no-repeat 0 2px;padding-left:42px;}
    .main li a.down {background-position:0 4px;}
    .main {margin:10px 10px 0 10px;padding:10px 15px 20px;}
    .mainWarp {}
    * html .main {margin:10px 0 0 5px;}   
        .main h2,.side h2 {margin:20px 0;font:28px/1em Geneva,Verdana,sans-serif;color:#222;text-transform:capitalize;}
        .main h2 span {font-size:14px;padding-left:15px;color:#000;}
        .displaySelect {height:28px;}
            .displaySelect a {display:block;float:left;margin:5px 15px 0 0;padding-top:3px;padding:3px 0.8em 2px 0.6em;background:#fff;/*width:70px;*/height:20px;text-align:center;}
            .displaySelect a:hover {background:#0746ba;color:#fff;text-decoration:none;}
        .main h4,.side h3 {color:#f60;border-bottom:1px dashed #999;padding:5px 0;margin:15px 0 10px;text-transform:capitalize;clear:both;}
        .main h5 {margin:10px;text-transform:capitalize;clear:both;}
        .main ol {list-style-position:inside;margin-left:30px;}
        .main li {padding:2px 0;word-break:break-all;word-wrap:break-word;-moz-binding: url(../xml/wordwrap.xml#wordwrap);overflow:hidden;}
        *+html .main li {overflow:visible;}
        .main ol.sec {padding-left:0px;}
        .main ul.sec {padding-left:40px;}
        .main ol.nolist { list-style:none;padding-left:20px;}       
        .main li span { color:#090;}
        .main div.ps {padding:10px;margin:10px; border:1px dashed #ccc; background:#fafafa;}
    .side {width:178px;margin:10px 0 0 10px;}
        .side h3 {color:#0746ba;padding:5px 0 5px 10px;}
        .side h4 {margin:0 10px 0 20px;font-size:12px;text-transform:capitalize;}
        .side ul,.side ol {padding:5px 10px 5px 30px;text-transform:capitalize;}
#footerWarp {}   
#footerWarp img { display:none;}
#footer {padding:10px 15px;margin:10px;background:#fff;border:1px solid #d5d5d5;}
#header {height:165px;margin-bottom:0;color:#fff;font-size:14px;background:url(../i/header.jpg) repeat-x 0 -2px; position:relative;border-top:1px solid #000;}
    #headerin {margin:50px 0 0 50px;}
    #headerin span.name {font:42px/1.2em Geneva,Verdana,sans-serif;padding-right:10px;text-transform:capitalize;}
    #header a {color:#fff;}
    #headerLink { position:absolute;top:1px;right:10px;}
        #headerLink li { float:left; padding:3px 10px;}
    #count img {display:none;}
ul.d:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
ul.d li {float:left;>float:none;display:inline-block;word-break:keep-all;padding-right:6px;}
ul.d li {display:inline;}
ul.d li a { text-transform:capitalize;}
.listBox { background:#fdfdfd; border:1px solid #ededed; margin:20px 10px; padding:10px;}
.listBox li { width:120px;}
/*站点内部链接*/
#siteLink { margin:5px 10px;border:1px solid #d5d5d5; background:#fdfdfd;}
#siteLink ul{ margin:10px 20px;}
#siteLink ul li {background:url(../i/arr03.gif) no-repeat 0 4px;padding:0 20px; text-transform:capitalize; }

分类:CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 68

CSS cursor 属性

作者:lanyi  日期:2010-02-24

CSS cursor 属性

值 描述
url

需使用的自定义光标的 URL。

注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default 默认光标（通常是一个箭头）
auto 默认。浏览器设置的光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针（一只手）
move 此光标指示某对象可被移动。
e-resize 此光标指示矩形框的边缘可被向右（东）移动。
ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize 此光标指示矩形框的边缘可被向上（北）移动。
se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize 此光标指示矩形框的边缘可被向下移动（北/西）。
w-resize 此光标指示矩形框的边缘可被向左移动（西）。
text 此光标指示文本。
wait 此光标指示程序正忙（通常是一只表或沙漏）。
help 此光标指示可用的帮助（通常是一个问号或一个气球）。

实例

一些不同的光标：

span.crosshair {cursor:crosshair;}
span.help {cursor:help;}
span.wait {cursor:wait;}

查看更多...

Tags: CSS

分类:CSS | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 111