CSS 分类 (Classification) 实例
CSS 分类属性 (Classification)
CSS 分类属性允许你控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。

属性 描述
clear  设置一个元素的侧面是否允许其他的浮动元素。
cursor 规定当指向某元素之上时显示的指针类型。
display    设置是否及如何显示元素。
float  定义元素在哪个方向浮动。
position   把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
visibility 设置元素是否可见或不可见。

1.如何把元素显示为内联元素
本例演示如何把元素显示为内联元素。
    <style type="text/css">
        p{display:inline}
        div{display:none}
    </style>
</head>
<body>
<p>本实例得样式表把段落元素设置为内联元素。</p>
<br/>
<p>而div 元素不会显示出来</p>
<br/>
<div>div 元素的内容不会显示出来！</div>
</body>

2.如何把元素显示为块级元素
本例演示如何把元素显示为块级元素。
    <style>
        span{display:block}
    </style>
</head>
<body>
<span>本实例中的样式表把span元素设置为块级元素。</span>
<span>两个span 元素之间产生了一个换行行为。</span>
</body>

3.float 属性的简单应用
使图像浮动于一个段落的右侧。

    <style type="text/css">
        img{float:right}
    </style>
</head>
<body>
<p>在下面的段落中，我们添加了一个样式为 <b>float:right</b> 的图像。结果是这个图像会浮动到段落的右侧。</p>
<p>
<img src="eg_cute.gif" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>

4.将带有边框和边界的图像浮动于段落的右侧
使图像浮动于段落的右侧。向图像添加边框和边界。
    <style type="text/css">
        img{float:right;
            border:1px dotted black;
            margin:0px 15px 20px;

        }
    </style>
</head>
<body>
<p>在下面的段落中，图像会浮动到右侧，并且添加了点状的边框。我们还为图像添加了边距，这样就可以把文本推离图像：
    上和右外边距是 0px，下外边距是 15px，而图像左侧的外边距是 20px</p>
<p>
<img src="eg_cute.gif" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>

5.带标题的图像浮动于右侧
使带有标题的图像浮动于右侧
    <style type="text/css">
        div{
            float:right;
            width:120px;
            margin: 0 0 15px 20px;
            padding:15px;
            border:1px solid black;
            text-align:center;
        }
    </style>
</head>
<body>
<div>
    <img src="eg_cute.gif">
</div>
<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>

6.使段落的首字母浮动于左侧
使段落的首字母浮动于左侧，并向这个字母添加样式。

    <style type="text/css">
        span{
            float:left;
            width:0.7em;
            font-size:400%;
            font-family: algerian,Courier;
            line-height:80%;
        }
    </style>
</head>
<body>
<p>
<span>T</span>his is some text.
This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>

<p>
在上面的段落中，文本的第一个字母包含在一个 span 元素中。这个 span 元素的宽度是当前字体尺寸的 0.7 倍。span 元素的字体尺寸是 400%，行高是 80%。span 中的字母字体是 "Algerian"
</p>

7.创建水平菜单
使用具有一栏超链接的浮动来创建水平菜单。

    <style type="text/css">
        ul{
            float:left;
            width: 100%;
            padding:0;
            margin:0;
            list-style-type:none;
        }
        a{
            float:left;
            width:7em;
            text-decoration:none;
            color:white;

            padding:0.2em 0.6em;
            border-right:1px solid white;
        }
        a:hover {background-color:#ff3300}
        li {
            display:inline;
        }
    </style>
</head>
<body>

<ul>
    <li><a href="#">Link one</a></li>
    <li><a href="#">Link two</a></li>
    <li><a href="#">Link three</a></li>
    <li><a href="#">Link four</a></li>
</ul>
<p>
在上面的例子中，我们把 ul 元素和 a 元素浮向左浮动。li 元素显示为行内元素（元素前后没有换行）。这样就可以使列表排列成一行。ul 元素的宽度是 100%，列表中的每个超链接的宽度是 7em（当前字体尺寸的 7 倍）。我们添加了颜色和边框，以使其更漂亮。
</p>

8.创建无表格的首页
使用浮动来创建拥有页眉、页脚、左侧目录和主体内容的首页。
    <style type="text/css">
        div.container{
            width:100%;
            margin:0px;
            border:1px;
            line-herght:150%;
        }
        div.header,div.footer{
            color:white;

            clear:left;
        }
        h1.header{
            padding:0;
            margin:0;
        }
        div.left{
            float:left;
            width:160px;
            margin:0px;
            padding:1em;
        }
        div.content{
            margin-left:190px;
            border-left:1px solid gray;
            padding:1em;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <h1 class="header">zoulixiang.com</h1>
    </div>
    <div class="left">
        <p>"Never increasre,beyond what is ne"</p>
    </div>
    <div class="content">
        <h2>Fre web</h2>
        <p>At zoulixiang.com</p>
    </div>
    <div class="footer">Copy right</div>
</div>

</body>
</html>

9.定位：相对定位
本例演示如何相对于一个元素的正常位置来对其定位。
    <style type="text/css">
        h2.pos_left{
            position:relative;
            left:-20px;
        }
        h2.pos_right{
            position:relative;
            left:20px;
        }
    </style>
</head>
<body>
<h2>正常标题</h2>
<h2 class="pos_left">这个是向左移动</h2>
<h2 class="pos_right">这个是向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>

10.定位：绝对定位
本例演示如何使用绝对值来对元素进行定位。
    <style type="text/css">
        h2.pos_abs{
            position:absolute;
            left:100px;
            top:150px;
        }
    </style>
</head>
<body>
<h2 class="pos_abs">这个是带有绝对定位的标题</h2>
<p>t通过绝对定位，元素可以放置到页面的任何位置。下面的标题距离页面左侧 100px, 距离页面顶部150px。</p>
</body>

11.定位：固定定位
本例演示如何相对于浏览器窗口来对元素进行定位。
    <style type="text/css">
        p.one{
            position:fixed;
            left:5px;
            top:5px;
        }
        p.two{
            position:fixed;
            top:30px;
            right:5px;
        }
    </style>
</head>
<body>
<p class="one">一些文本</p>
<p class="two"> 更多文本</p>

12.如何使元素不可见
本例演示如何使元素不可见。你希望元素被显示出来，还是不呢？
    <style type="text/css">
        h1.visible{visibility:visible}
        h1.invisible{visibility:hidden}
    </style>
</head>
<body>
<h1 class="visible">这是可见的标题</h1>
<h1 class="invisible">这是不可见的标题</h1>
</body>

13.把表格元素设置为 collapse（请在非 IE 的浏览器中查看）
本例演示如何使表格元素叠加？
    <style type="text/css">
        tr.coll{
            visibility:collapse;
        }
    </style>
</head>
<body>
<table border="1">
    <tr>
        <td>Adams</td>
        <td>John</td>
    </tr>
    <tr class="coll">
        <td>Bush</td>
        <td>George</td>
    </tr>
</table>

14.改变光标
本例演示如何改变光标。
<body>
<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
<span style="cursor:auto">Auto</span><br/>
<span style="cursor:crosshair">Crosshair</span><br/>
<span style="cursor: default">default</span><br/>
<span style="cursor: pointer">pointer</span><br/>
<span style="cursor: move">Move</span><br/>
<span style="cursor: e-resize">e-resize</span><br/>
<span style="cursor: ne-resize">ne-resize</span><br/>
<span style="cursor: nw-resize">nw-resize</span><br/>
<span style="cursor: n-resize">n-resize</span><br/>
<span style="cursor: se-resize">se-resize</span><br/>
<span style="cursor:w-resize">
w-resize</span><br />
<span style="cursor:text">
text</span><br />
<span style="cursor:wait">
wait</span><br />
<span style="cursor:help">
help</span>
</body>

15.清除元素的侧面
本例演示如何使用清除元素侧面的浮动元素。
    <style type="text/css">
        img{
            float:left;
            clear:both;
        }
    </style>
</head>
<body>
<img  src="eg_cute.gif"/>
<img src="eg_cute.gif" />

</body>

CSS 分类 (Classification) 实例的更多相关文章

  1. W3School-CSS 分类 (Classification) 实例

    CSS 分类 (Classification) 实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) ...

  2. CSS 分类 (Classification)

    ★★CSS 分类属性 (Classification)★★ ⑴CSS 分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的可见度 ...

  3. 【转】精选30个优秀的CSS技术和实例

    今天,我为大家收集精选了30个使用纯CSS完成的强大实践的优秀CSS技术和实例,您将在这里发现很多与众不同的技术,比如:图片集.阴影效果.可扩展按钮.菜单等-这些实例都是使用纯CSS和HTML实现的. ...

  4. 精选30个优秀的CSS技术和实例

    精选30个优秀的CSS技术和实例   投递人 墙头草 发布于 2008-12-06 20:57 评论(97) 有17487人阅读 原文链接 [收藏] « » 今天,我为大家收集精选了30个使用纯CSS ...

  5. css技术和实例

    今天,我为大家收集精选了30个使用纯CSS完成的强大实践的优秀CSS技术和实例,您将在这里发现很多与众不同的技术,比如:图片集.阴影效果.可扩展按钮.菜单等-这些实例都是使用纯CSS和HTML实现的. ...

  6. 30个优秀的CSS技术和实例 By 彬Go 2008-12-04

    在这里可发现很多与众不同的技术,比如:图片集.阴影效果.可扩展按钮.菜单等…这些实例都是使用纯CSS和HTML实现的.单击每个实例的标题可以被转向到该技术实例的相关教程或说明页面(英文),单击每个实例 ...

  7. CSS 尺寸 (Dimension) 实例

    CSS 尺寸 (Dimension) 实例CSS 尺寸属性CSS 尺寸属性允许你控制元素的高度和宽度.同样,还允许你增加行间距. 属性 描述height 设置元素的高度.line-height 设置行 ...

  8. CSS 边框(border)实例

    CSS 边框(border)实例:元素的边框 (border) 是围绕元素内容和内边距的一条或多条线. CSS border 属性允许你规定元素边框的样式.宽度和颜色. CSS 边框属性属性 描述bo ...

  9. CSS 字体(font)实例

    CSS 字体(font)实例CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母).CSS 字体系列在 CSS 中,有两种不同类型的字体系列名称: 通用字体系列 - 拥 ...

随机推荐

  1. Asp.net Mvc身份验证

    1.安装组件 Microsoft.AspNet.Identity.Core,身份认证核心组件 安装Microsoft.AspNet.Identity.EntityFramework,EF实现身份认证 ...

  2. windows server服务器上mysql远程连接失败的坑

    windows server服务器上mysql远程连接失败的坑 背景:趁这阿里云活动,和朋友合伙买了个服务器,最坑的是没想到他买的是windows Server的,反正便宜,将就着用吧,自己装好了wa ...

  3. [MapReduce_7] MapReduce 中的排序

    0. 说明 部分排序 && 全排序 && 采样 && 二次排序 1. 介绍 sort 是根据 Key 进行排序 [部分排序] 在每个分区中,分别进行排序 ...

  4. OSPF单区域配置

    OSPF单区域配置 实验环境:华为模拟器eNSP 现在有这样一个拓扑图: 我想要让R1可以ping通R3,显然目前是不行的: <R1>ping 192.168.2.2 PING 192.1 ...

  5. UUChart的使用

    一.简介 UUChart是一个用于绘制图表的第三方,尤其适合去绘制折线图.自己再做一个医院相关的项目时,需要对一周内的血压进行监控,需要绘制折线图来表示出高压.低压的走向,因此学习了一下. 二.下载地 ...

  6. Alpha冲刺！ Day6 - 砍柴

    Alpha冲刺! Day6 - 砍柴 今日已完成 晨瑶:讨论确定/解决了:网络判断使用广播方式.密集光点排布问题.丢失.db/记录html/多媒体文件的处理方式. 昭锡:Android工具包接口文档编 ...

  7. cglib之Enhancer

    1. 背景 cglib库的Enhancer在Spring AOP中作为一种生成代理的方式被广泛使用.本文针对Enhancer的用法以实际代码为例作一些介绍. 2. Enhancer是啥 Enhance ...

  8. webpack 开发环境与生成环境的 配置

    写在前面 最近学习react,之前做vue项目的时候,一直都是拿来主义,浑浑噩噩,感觉不太好,趁学习react的机会,在顺带学习一下webpack.一般配置文件分两份,为开发环境和生成环境.有此区分, ...

  9. Vue:渲染、指令、事件、组件、Props

    每天学习一点点 编程PDF电子书免费下载: http://www.shitanlife.com/code 如果要我用一句话描述使用 Vue 的经历,我可能会说“它如此合乎常理”或者“它提供给我需要的工 ...

  10. pku1365 Prime Land （数论，合数分解模板）

    题意:给你一个个数对a, b 表示ab这样的每个数相乘的一个数n,求n-1的质数因子并且每个指数因子k所对应的次数 h. 先把合数分解模板乖乖放上: ; ans != ; ++i) { ) { num ...