css实例 <转载>

songzhan

浏览: 240605 次
性别:

最近访客更多访客>>

lclc88com

yanga520

Sunflower-13

iaiai

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
    <head>
        <title>欢迎进入新《网页设计师》:web标准教程及推广</title>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <meta http-equiv="Content-Language" content="gb2312" />
        <meta content="all" name="robots" />
        <meta name="author" content="ajie(at)netease.com,阿捷" />
        <meta name="Copyright" content="www.w3cn.org,自由版权,任意转载" />
        <meta name="description" content="新网页设计师,web标准的教程站点,推动web标准在中国的应用." />
        <meta content="web标准,教程,web, standards, xhtml, css, usability, accessibility" name="keywords" />
        <link rel="icon" href="/favicon.ico" type="image/x-icon" />
        <link rel="shortcut icon" href="http://www.w3cn.org/favicon.ico" type="image/x-icon" />
        <link rel="stylesheet" rev="stylesheet" href="css/style01.css" type="text/css" media="all" />
        <style type="text/css">
            *{
                padding:0px;
                margin:0px;
            }
            body{
                font-size:12px;
                line-height:22px;
            }
            img {
                border:0px;
            }
            td{
                border-collapse;/*相邻边被合并*/
            }
            /**列表控制*/
            ul,li{
                /*去掉ul,li默认的小圆点*/
                list-style: none;
                list-style-position:inside;
                /*list-style-type:square;*/
                list-style-image:none;
            }
            ul{
                margin: 0px;
                padding: 0px;
            }
            li{
                /*这个背景颜色非常重要,既使是#ffffff也要设计一个，因为他来消除黑边*/
                /*background-color: #EEEEEE;*/
                padding-left:20px;
                background: url("more.gif") no-repeat scroll 0 0 transparent;
                /*scroll 随对象内容滚动,transparent背景透明哈*、
                /*0 0是代表一个坐标，还就这强调一下就是后面那个0是代码高，如果是一个大图片，因为图片是从上外下，所以　一般都是负数.*/
                /*怎么设计一个将多个小图片合为一个大图片呢，然后怎么定位呢，这个参见（ifeng里面的登录，搜索，更多）等按钮button.gif,其实还有一点就是一定要设置width,hight 因为他会自动从x,y轴以width,height之大的不重复背景*/

                /*
                *background-attachment : scroll(背景图像是随对象内容滚动) | fixed(背景图像固定)
                *background-color : transparent(背景色透明) | color
                *background-image : none | url ( url ) 指明路径
                *
                *在这强调一下哈，因为现在网络上有很多就一系列的小图片做成一个大图来作背景，再来用background-position取出
                *background-position:　  length || length (必须是两个值,除了取具体的值外，还可以取top | center | bottom | left | center | right)
                *如 background-position: 35% 80%;  background-position: top right;
                *分开设置也可以：
                *background-position-x：num|left,center,right
                *background-position-y : length | top | center | bottom
                *
                *background-repeat:repeat | no-repeat | repeat-x | repeat-y
                */
            }
            #header{
                MARGIN: 0px;
                BORDER: 0px;
                WIDTH: 580px;
                HEIGHT: 60px;

                /*BACKGROUND: #ccd2de; */
                background:url(1.gif) #ccd2de no-repeat right bottom;
            }
            #mainbox{ /*它的高度由下一级(包含了#menu,#sidebar和#content)来决定*/
                MARGIN: 0px;
                WIDTH: 580px;
                BACKGROUND: #FFF;
            }

            /*根据内容自动适应高度，当然也可以对里面的这三个div指定高度，来决定整个mainbax的高度*/
            #sidebar{
                FLOAT: left;
                MARGIN: 2px 2px 0px 0px;
                PADDING: 0px;
                WIDTH: 170px;
                BACKGROUND: #F2F3F7;
            }
            #menu{
                FLOAT: right;
                MARGIN: 2px 0px;
                PADDING:0px;
                WIDTH: 400px;
                BACKGROUND: #ccd2de;
                height:100px;
            }
            /*测试水平居中，垂直居中(要求设计高度)，完全居中(要求设计高度)*/
            #menuCenter{
                BACKGROUND-color:red;
                height:30px;
                width:40px;
                overflow:hidden;/*内容超出以后隐藏*/

                /*这里需要强调一下就是：position:relative,再用top,left就是内部偏移(也就是固定在这人div里面了)，若position:absolute 就是外部偏移*/
                position:relative;/*内部偏转,相对定位*/
                top:50%;
                /*还要减去div的一半的高度哈*/
                margin:-15px auto 0px auto;

                outline: #E9E9E9 double thin;/*轮廓线（重要）*/
            }

            #content{
                /*定位，定位*/
                z-index:1;
                /*position:absolute
                left:0px;
                top:0px;
                right:0px;
                buttom:0px;*/
                float: right;
                /*clear:both*/
                /**重要显示块的滚动条[上，下]**/

                /**overflow:scroll;*/
                overflow-x:hidden;
                overflow-y:scroll; /*这个属性跟*/

                display:block;
                visibility:visible;



                /*外补丁*/
                MARGIN: 1px 0px 2px 0px;
                /*内补丁*/
                PADDING:2px;
                /*边框*/
                border:none;


                /*尺寸*/
                 /*padding，margin,border　影响计算高度*/
                WIDTH: 396px;
                /*
                min-width:**px;
                max-width:**px
                */
                height:200px;
                /*
                min-height:**px;
                max-height:**px
                */



                /*背景*/
                BACKGROUND: #E0EFDE;



                /*字体,大小，颜色,风格,线条*/
                font-family:"Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;
                font-size:14px;
                color:blue;
                font-style:oblique;
                font-weight:bold;
                text-decoration:underline;

                /*文本相关处理:首行缩近,对象内文本溢出时显示省略标记，对齐方式*/
                text-indent:1cm;
                text-overflow:ellipsis; /*(重要)这个现实生活中很有用，如果文本超出了宽度自动显示，与overflow配合使用*/
                vertical-align:middle;
                /*还有一个问题，如果div的一块显示在底部，如vertical-align对div也不起作用，如:
                    <div>
                        <div>底部显示<div>
                    </div>

                    这怎么来控制呢，有三种方法，第一种:padding,margion，第二种:绝对定位，第三种:在拿一个div来填充上面那一块
                    <div style="height:250px;">
                        <div style="height:225px;">填充空白</div>
                        <div>真正显示的内容</div>
                    </div>
                */
                text-align:left;
                /*要实现水平居中
                * margin:0px auto;
                *
                * 要实现垂直居中(固定高度)
                * position:relative;
                * top:50%;内部偏转，决定定位
                * margin:-15px 0px 0px 0px;
                *
                * 要实现完全居中(固定高度)
                * position:relative;内部偏转
                * top:50%;
                * margin:-15px auto 0px auto; 还要减去div的高度哈
                */
                layout-flow:horizontal;/*控制是横向显示还是竖向显示，古代的诗歌*/

                /*字间隔,行高*/
                letter-spacing:2px;/*每个字或一个字母　之间的间隔*/
                word-spacing:5px; /*每个字或一个[完整]单词　之间的间隔*/
                line-height:30px;

                /*滚动条控制*/
                scrollbar-3dlight-color:red;/*设置滚动条亮 [边框　左，上] 颜色*/
                scrollbar-shadow-color:red;/*右下边框*/
                scrollbar-highlight-color:#000;/**设置索滚动条3D界面的 [底层边的颜色，一般都会被覆盖](ThreedHighlight)颜色*/
                scrollbar-face-color:yellow;/*设置滚动条最上面一层的颜色*/
                scrollbar-arrow-color:blue;/*设置或检索滚动条方向[箭头]的颜色*/
                scrollbar-darkshadow-color:#ADFF2F;
            }

            #footer{
                CLEAR: both;
                MARGIN: 0px 0px 0px 0px;
                PADDING: 5px 0px 5px 0px;
                WIDTH: 580px;
                HEIGHT: 40px;
                BACKGROUND: #ccd2de;
            }
        </style>
    </head>
    <body>
        <div id="header">header</div>
        <div id="mainbox">
            <div id="sidebar">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                <ul>
            </div>
            <div id="menu">
                <div id="menuCenter">menu</div>
            </div>
            <div id="content">
                Every man dies , Not every man really lives
                contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
                contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
                contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
                contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
                contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
                contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
                contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
                contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
            </div>
        </div>
        <div id="footer">footer</div>
    </body>
</html>