Maison > interface Web > tutoriel HTML > W3School-CSS 定位 (Positioning) 实例_html/css_WEB-ITnose

W3School-CSS 定位 (Positioning) 实例_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:29:04
original
1247 Les gens l'ont consulté

CSS 定位 (Positioning) 实例

CSS 实例

  • CSS 背景实例
  • CSS 文本实例
  • CSS 字体(font)实例
  • CSS 边框(border)实例
  • CSS 外边距 (margin) 实例
  • CSS 内边距 (padding) 实例
  • CSS 列表实例
  • CSS 表格实例
  • 轮廓(Outline)实例
  • CSS 尺寸 (Dimension) 实例
  • CSS 分类 (Classification) 实例
  • CSS 定位 (Positioning) 实例
  • CSS 伪类 (Pseudo-classes)实例
  • CSS 伪元素 (Pseudo-elements)实例
  • 01设置元素的形状

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>01设置元素的形状</title>        <style type="text/css">            img {                position:absolute;                clip: rect(0px 100px 300px 0px);            }        </style>    </head>    <body>        <img  src="cc.jpg"    style="max-width:90%" height="730px" / alt="W3School-CSS 定位 (Positioning) 实例_html/css_WEB-ITnose" >    </body></html>
    Copier après la connexion

    02如何使用滚动条来显示元素内溢出的内容

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>02如何使用滚动条来显示元素内溢出的内容</title>        <style type="text/css">            div {                width: 250px;                height: 80px;                background-color: #cc9966;                overflow: scroll;            }        </style>    </head>    <body>        <p>如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为。</p>        <div>            这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。        </div>    </body></html>
    Copier après la connexion

    03如何隐藏溢出元素中溢出的内容

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>03如何隐藏溢出元素中溢出的内容</title>        <style type="text/css">            div {                width: 250px;                height: 80px;                background-color: #cc9966;                overflow: hidden;            }        </style>    </head>    <body>        <p>如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为。</p>        <div>            这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。        </div>    </body></html>
    Copier après la connexion

    04如何设置浏览器来自动地处理溢出

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>04如何设置浏览器来自动地处理溢出</title>        <style type="text/css">            div {                width: 250px;                height: 80px;                background-color: #cc9966;                overflow: auto;            }        </style>    </head>    <body>        <p>如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为。</p>        <div>            这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。        </div>    </body></html>
    Copier après la connexion

    05垂直排列图象

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>05垂直排列图象</title>        <style type="text/css">            img.top {                vertical-align: text-top;            }                        img.bottom {                vertical-align: text-bottom;            }        </style>    </head>    <body>        <p>            这是一副<img  class="top" border="1" src="55.jpg" / alt="W3School-CSS 定位 (Positioning) 实例_html/css_WEB-ITnose" >位于段落中的图像。        </p>        <p>            这是一副<img  class="bottom" border="1" src="55.jpg" / alt="W3School-CSS 定位 (Positioning) 实例_html/css_WEB-ITnose" >位于段落中的图像。        </p>    </body></html>
    Copier après la connexion

    06Z-index

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>06Z-index</title>        <style type="text/css">            img.x {                position: absolute;                top: 30px;                left: 0px;                z-index: -1;            }                        img.y {                position: absolute;                top: 150px;                left: 50px;                z-index: 1;            }        </style>    </head>    <body>        <h1>这是一标题</h1>        <img  class="x" src="55.jpg" / alt="W3School-CSS 定位 (Positioning) 实例_html/css_WEB-ITnose" >        <p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p>        <h1>这是二标题</h1>        <img  class="y" src="55.jpg" / alt="W3School-CSS 定位 (Positioning) 实例_html/css_WEB-ITnose" >        <p>默认的 z-index 是 0。Z-index 1 拥有更高的优先级。</p>    </body>    </body></html>
    Copier après la connexion

    07使用固定值设置图像的上右下左边缘

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>07使用固定值设置图像的上右下左边缘</title>        <style type="text/css">            img.top {                position: absolute;                top: 0px;            }                        img.right {                position: absolute;                right: 0px;            }                        img.bottom {                position: absolute;                bottom: 0px;            }                        img.left {                position: absolute;                left: 100px;            }        </style>    </head>    <body>        <p>一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。</p>               <img  class="top" border="1" src="77.jpg"    style="max-width:90%" height="100px" / alt="W3School-CSS 定位 (Positioning) 实例_html/css_WEB-ITnose" >        <img  class="right" border="1" src="77.jpg"    style="max-width:90%" height="100px" / alt="W3School-CSS 定位 (Positioning) 实例_html/css_WEB-ITnose" >        <img  class="bottom" border="1" src="77.jpg"    style="max-width:90%" height="100px" / alt="W3School-CSS 定位 (Positioning) 实例_html/css_WEB-ITnose" >        <img  class="left" border="1" src="77.jpg"    style="max-width:90%" height="100px" / alt="W3School-CSS 定位 (Positioning) 实例_html/css_WEB-ITnose" >    </body></html>
    Copier après la connexion

    08使用百分比设置图像的上右下左边缘

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>08使用百分比设置图像的上右下左边缘</title>        <style type="text/css">            img.top {                position: absolute;                top: 5%;            }                        img.right {                position: absolute;                right: 5%;            }                        img.bottom {                position: absolute;                bottom: 5%;            }                        img.left {                position: absolute;                left: 20%;            }        </style>    </head>    <body>        <h1>这是标题</h1>        <img  class="top" border="1" src="77.jpg"    style="max-width:90%" height="100px" / alt="W3School-CSS 定位 (Positioning) 实例_html/css_WEB-ITnose" >        <img  class="right" border="1" src="77.jpg"    style="max-width:90%" height="100px" / alt="W3School-CSS 定位 (Positioning) 实例_html/css_WEB-ITnose" >        <img  class="bottom" border="1" src="77.jpg"    style="max-width:90%" height="100px" / alt="W3School-CSS 定位 (Positioning) 实例_html/css_WEB-ITnose" >        <img  class="left" border="1" src="77.jpg"    style="max-width:90%" height="100px" / alt="W3School-CSS 定位 (Positioning) 实例_html/css_WEB-ITnose" >    </body></html>
    Copier après la connexion

    CSS 定位 (Positioning)总结

    Étiquettes associées:
    source:php.cn
    Déclaration de ce site Web
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
    Tutoriels populaires
    Plus>
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal