W3School-CSS の配置例_html/css_WEB-ITnose-htmlチュートリアル-php.cn

W3School-CSS の配置例_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:29:04

オリジナル

1243 人が閲覧しました

CSS配置例

CSS例

CSS背景例

CSSテキスト例

CSSフォント例

CSSボーダー例

CSS外縁マージン例

CSSパディング例

CSS リストの例

CSSテーブル例

アウトライン例

CSSディメンション例

CSS分類例

CSS配置例

CSS疑似クラスインスタンス

CSS疑似要素インスタンス

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" width="510px" height="730px" />    </body></html>

ログイン後にコピー

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>

ログイン後にコピー

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>

ログイン後にコピー

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>

ログイン後にコピー

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" />位于段落中的图像。        </p>        <p>            这是一副<img class="bottom" border="1" src="55.jpg" />位于段落中的图像。        </p>    </body></html>

ログイン後にコピー

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" />        <p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p>        <h1>这是二标题</h1>        <img class="y" src="55.jpg" />        <p>默认的 z-index 是 0。Z-index 1 拥有更高的优先级。</p>    </body>    </body></html>

ログイン後にコピー

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" width="150px" height="100px" />        <img class="right" border="1" src="77.jpg" width="150px" height="100px" />        <img class="bottom" border="1" src="77.jpg" width="150px" height="100px" />        <img class="left" border="1" src="77.jpg" width="150px" height="100px" />    </body></html>

ログイン後にコピー

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" width="150px" height="100px" />        <img class="right" border="1" src="77.jpg" width="150px" height="100px" />        <img class="bottom" border="1" src="77.jpg" width="150px" height="100px" />        <img class="left" border="1" src="77.jpg" width="150px" height="100px" />    </body></html>

ログイン後にコピー