結果:実装コードhtml<div id="価格表" class="クリア"> <div class="plan"> <h3>エンタープライズ<span>$59</span></h3> <a class="signup" href="">サインアップ</a> <ul> <li><b>10GB</b> ディスク容量</li> <li><b>100GB</b> 月間帯域幅</li> <li><b>20</b> 個のメール アカウント</li> <li><b>無制限</b>のサブドメイン</li> </ul> </div> <div class="plan" id="最も人気"> <h3>プロフェッショナル<span>$29</span></h3> <a class="signup" href="">サインアップ</a> <ul> <li><b>5GB</b> のディスク容量</li> <li><b>50GB</b> 月間帯域幅</li> <li><b>10</b> 個のメール アカウント</li> <li><b>無制限</b>のサブドメイン</li> </ul> </div> <div class="plan"> <h3>スタンダード<span>$17</span></h3> <a class="signup" href="">サインアップ</a> <ul> <li><b>3GB</b> ディスク容量</li> <li><b>25GB</b> 月間帯域幅</li> <li><b>5</b> 個のメール アカウント</li> <li><b>無制限</b>のサブドメイン</li> </ul> </div> <div class="plan"> <h3>基本<span>$9</span></h3> <a class="signup" href="">サインアップ</a> <ul> <li><b>1GB</b> のディスク容量</li> <li><b>10GB</b> 月間帯域幅</li> <li><b>2</b> 個のメール アカウント</li> <li><b>無制限</b>のサブドメイン</li> </ul> </div> </div> CSS3体{ 背景: #303030; } #価格表 { マージン: 100px 自動; テキスト配置: 中央; width: 892px; /* 計算された合計幅 = 222 x 3 + 226 */ } #価格表.plan { フォント: 12px 'Lucida Sans'、'trebuchet MS'、Arial、Helvetica; テキストシャドウ: 0 1px rgba(255,255,255,.8); 背景: #fff; 境界線: 1px 実線 #ddd; 色: #333; パディング: 20px; width: 180px; /* プランの幅 = 180 + 20 + 20 + 1 + 1 = 222px */ フロート: 左; 位置: 相対的; } #価格表 #最も人気 { zインデックス: 2; 上: -13px; 境界線の幅: 3px; パディング: 30px 20px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 境界線の半径: 5px; -moz-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15); -webkit-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15); ボックスの影: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15); } #価格表.plan:n番目の子(1) { 境界線の半径: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; 境界線の半径: 5px 0 0 5px; } #価格表.plan:n番目の子(4) { 境界線の半径を 0 5px 5px 0 に設定します。 -webkit-border-radius: 0 5px 5px 0; 境界線の半径: 0 5px 5px 0; } /* ---------------- */ #価格表 h3 { フォントサイズ: 20px; フォントの太さ: 標準; パディング: 20px; マージン: -20px -20px 50px -20px; 背景色: #eee; 背景画像: -moz-linear-gradient(#fff,#eee); 背景画像: -webkit-gradient(linear, 左上, 左下, から(#fff), から(#eee)); 背景画像: -webkit-linear-gradient(#fff, #eee); 背景画像: -o-linear-gradient(#fff, #eee); 背景画像: -ms-linear-gradient(#fff, #eee); 背景画像: 線形グラデーション(#fff, #eee); } #価格表 #人気 h3 { 背景色: #ddd; 背景画像: -moz-linear-gradient(#eee,#ddd); 背景画像: -webkit-gradient(linear, 左上, 左下, から(#eee), から(#ddd)); 背景画像: -webkit-linear-gradient(#eee, #ddd); 背景画像: -o-linear-gradient(#eee, #ddd); 背景画像: -ms-linear-gradient(#eee, #ddd); 背景画像: 線形グラデーション(#eee, #ddd); 上マージン: -30px; パディング上部: 30px; 境界線の半径を 5px 5px 0 0 に設定します。 -webkit-border-radius: 5px 5px 0 0; 境界線の半径: 5px 5px 0 0; } #価格表.plan:nth-child(1) h3 { 境界線の半径: 5px 0 0 0; -webkit-border-radius: 5px 0 0 0; 境界線の半径: 5px 0 0 0; } #価格表.plan:nth-child(4) h3 { 境界線の半径: 0 5px 0 0; -webkit-border-radius: 0 5px 0 0; 境界線の半径: 0 5px 0 0; } #価格表 h3 span { 表示: ブロック; フォント: 太字 25px/100px Georgia、Serif; 色: #777; 背景: #fff; 境界線: 5px 実線 #fff; 高さ: 100px; 幅: 100ピクセル; マージン: 10px 自動 -65px; -moz-border-radius: 100px; -webkit-border-radius: 100px; 境界線の半径: 100px; -moz-box-shadow: 0 5px 20px #ddd インセット、0 3px 0 #999 インセット; -webkit-box-shadow: 0 5px 20px #ddd インセット、0 3px 0 #999 インセット; box-shadow: 0 5px 20px #ddd インセット、0 3px 0 #999 インセット; } /* ---------------- */ #価格表 ul { マージン: 20px 0 0 0; パディング: 0; リストスタイル: なし; } #価格表 li { 上境界線: 1px 実線 #ddd; パディング: 10px 0; } /* ---------------- */ #価格表.サインアップ{ 位置: 相対的; パディング: 8px 20px; マージン: 20px 0 0 0; 色: #fff; フォント: 太字 14px Arial、Helvetica; テキスト変換:大文字; テキスト装飾: なし; 表示: インラインブロック; 背景色: #72ce3f; 背景画像: -moz-linear-gradient(#72ce3f, #62bc30); 背景画像: -webkit-gradient(linear、左上、左下、#72ce3f から #62bc30 まで)); 背景画像: -webkit-linear-gradient(#72ce3f, #62bc30); 背景画像: -o-linear-gradient(#72ce3f, #62bc30); 背景画像: -ms-linear-gradient(#72ce3f, #62bc30); 背景画像: 線形グラデーション(#72ce3f, #62bc30); -moz-border-radius: 3px; -webkit-border-radius: 3px; 境界線の半径: 3px; テキストシャドウ: 0 1px 0 rgba(0,0,0,.3); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7); ボックスの影: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7); } #価格表.signup:hover { 背景色: #62bc30; 背景画像: -moz-linear-gradient(#62bc30, #72ce3f); 背景画像: -webkit-gradient(linear、左上、左下、#62bc30 から #72ce3f まで)); 背景画像: -webkit-linear-gradient(#62bc30, #72ce3f); 背景画像: -o-linear-gradient(#62bc30, #72ce3f); 背景画像: -ms-linear-gradient(#62bc30, #72ce3f); 背景画像: 線形グラデーション(#62bc30, #72ce3f); } #pricing-table .signup:active、#pricing-table .signup:focus { 背景: #62bc30; 上: 2px; -moz-box-shadow: 0 0 3px rgba(0, 0, 0, .7) インセット; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .7) インセット; ボックスシャドウ: 0 0 3px rgba(0, 0, 0, .7) インセット; } /* ---------------- */ .clear:before、.clear:after { コンテンツ:""; 表示:テーブル } .clear:after { クリア:両方 } 。クリア { ズーム:1 } 上記はCSS3で実装された価格表の詳細です。CSS3の価格表の詳細については、123WORDPRESS.COMの他の関連記事にも注目してください。 |
>>: .html、.htm、.shtml、.shtm の違いと関連性について簡単に説明します。
Enctype : ブラウザがデータをサーバーに送り返すときに使用するエンコーディングのタイプを指定...
このデータベース クエリ ステートメントは、インターネット上の 50 個のデータベース クエリ練習問...
動的な列を実現するための Angularjs ループ オブジェクト プロパティ利点: オブジェクトを...
序文Linux システムはシステム サービス crond によって制御されます。 Linux システ...
目次MySQL マスター スレーブ データベースが同期されない問題を解決する 2 つの方法1. 非同...
この記事では、例を使用して、MySQL で複数テーブルの関連統計を実装する方法について説明します。ご...
HTMLに触れた当初はレイアウトにいつもテーブルを使っていましたが、とても面倒で見た目も悪かったの...
使用例コードをコピーコードは次のとおりです。 <!DOCTYPE html> <!...
例:本日、前回のオフィスコラボレーションプラットフォーム実験の続きをしていたところ、仮想マシンは以前...
最新の Ubuntu Server バージョンを使用している場合、ようこそメッセージに、Ubuntu...
行内では、明るい境界線の色を個別に定義できます。基本的な構文<TR ボーダーカラーライト=co...
導入近年、TypeScript を求める声がますます高まり、TypeScript はフロントエンドに...
目次A. SpringbootプロジェクトのDockerデプロイメント1. Springbootプロ...
vmware vSphere 6.5 は vSphere ソフトウェアのクラシック バージョンであ...
nginx 設定ファイルのパスを表示する nginx -t 経由nginx -t コマンドの本来の機...