Interface utilisateur CSS3
Interface utilisateur CSS3
Dans CSS3, de nouvelles fonctionnalités d'interface utilisateur ont été ajoutées pour ajuster la taille des éléments, la taille de la boîte et la bordure extérieure.
Dans ce chapitre, vous découvrirez les propriétés suivantes de l'interface utilisateur :
resizebox-sizingoutline-offset
Redimensionnement CSS3
En CSS3, l'attribut resize précise si un élément doit être redimensionné par l'utilisateur.
Cet élément div est redimensionné par l'utilisateur. (Dans Firefox 4+, Chrome et Safari)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
border:2px solid;
padding:10px 40px;
width:300px;
resize:both;
overflow:auto;
}
</style>
</head>
<body>
<p><b>注意:</b> Firefox, Safari,和 Chrome 兼容 resize 属性.</p>
<div>调整属性指定一个元素是否由用户可调整大小的。.</div>
</body>
</html>CSS3 Box Sizing
propriété box-sizing Vous permet de définir exactement ce qui est approprié pour une zone.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div.container
{
width:30em;
border:1em solid;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
border:1em solid red;
float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="box">这个div占据了左边的一半。.</div>
<div class="box">这个div占据了右边的一半。</div>
</div>
</body>
</html>Modification du contour CSS3 (outline-offset)
La propriété outline-offset décale le contour et dessine le contour au-delà du bord de la bordure.
Les contours diffèrent des bordures de deux manières :
Les contours ne prennent pas de place Les contours peuvent être non rectangulaires
Ce div a un contour à 15 pixels à l'extérieur de la bordure.
Le code CSS est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
margin:20px;
width:150px;
padding:10px;
height:70px;
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 不兼容 outline-offset属性.</p>
<div>这个 div有一个轮廓边界15 px边境外的边缘。</div>
</body>
</html>Nouvelles fonctionnalités de l'interface utilisateur
Attributs 🎜>l'apparence vous permet de faire ressembler un élément à un élément d'interface utilisateur standard 3
le dimensionnement de la boîte vous permet de l'adapter La zone définit certains éléments d'une manière ou d'une autre 3
l'icône fournit les créateurs ont la possibilité de définir l'élément sur des objets équivalents à l'icône. 3
nav-down Spécifie où naviguer à l'aide de la touche de navigation fléchée vers le bas 3
nav-index Spécifie l'ordre des onglets pour un élément Spécifiez où utiliser les touches de navigation fléchées vers la gauche pour naviguer . Spécifiez où Naviguer à l'aide de la touche de navigation flèche vers le haut size Spécifie si un élément est redimensionné par l'utilisateur >
section suivante