今回はCSS3を使ってプログレスバーを作成する方法を紹介します。CSS3を使ってプログレスバーを作成する際の注意点を紹介します。
これは単なる小さなデモであり、CSS3 で書かれた進行状況バーです。
写真に示すように:
![CSS3を使用してプログレスバーを作成する](https://img.php.cn/upload/article/000/061/021/7385d7f0dceba495abec41f2191cde7d-0.png)
具体的なコードは次のとおりです:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
<html>
<head>
<title> new document </title>
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" />
<meta name= "viewport" content= "initial-scale=1" >
<style>
.process-bar
{
width:100px;
display:inline-block;
*zoom:1;
}
.pb-wrapper
{
border:1px solid #cfd0d2;
position:relative;
background:#cfd0d2;
border-radius: 8px;
}
.pb-container
{
height:12px;
position:relative;
left:-1px;
margin-right:-2px;
font:1px/0 arial;
padding:1px;
}
.pb-highlight
{
position:absolute;
left:0;
top:0;
_top:1px;
width:100%;
opacity:0.6;
filter:alpha(opacity=60);
height:6px;
background:white;
font-size:1px;
line-height:0;
z-index:1
}
.pb-text
{
width:100%;
position:absolute;
left:0;
top:0;
text-align:center;
font:10px/12px arial;
color:black;
font:10px/12px arial
}
</style>
</head>
<body>
<p class = "process-bar skin-green" >
<p class = "pb-wrapper" >
<p class = "pb-highlight" ></p>
<p class = "pb-container" >
<p class = "pb-text" >50%</p>
<p class = "pb-value" style= "height: 100%;width: 50%;background: #19d73d;border-radius: 8px;" ></p>
</p>
</p>
</p>
</body>
</html>
|
ログイン後にコピー
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、注目してください。 PHP 中国語 Web サイトの他の関連記事へ!
推奨読書:
CSS margin の特殊な使用スキルの詳細な説明
混同されやすい margin とpadding の属性
以上がCSS3を使用してプログレスバーを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。