ホームページ > 記事 > ウェブフロントエンド > CSS3 を使用して HTML5 フォームを最適化する手順
今日は、CSS3 を使用して HTML5 フォームを最適化する方法を説明します。まず、次の形式でフォームを作成します。
#redemption { width: 100%; font-family: 'ColaborateThinRegular'; font-weight: 400; } #redemption hgroup { argin-bottom: 20px; } #redemption div { width: 100%; margin-bottom: 15px; float: left; } #redemption span#range { float: left; font-size: 3em; width: 100%; color: red; clear: both; text-align: center; } #howYouRateThis,#yearOfCrime { text-align: right; } #redemption legend { font-style: italic; color: #434242; font-size: 0.8em; margin-bottom: 20px; float: left; width: 100%; } #redemption fieldset { border: 1px dotted #cccccc; padding: 2%; margin-bottom: 20px; } #redemption label { width: 40%; float: left; } #redemption input { height: 20px; font-size: 1em; width: 40%; float: right; } #redemption textarea { height: 60px; font-size: 1em; width: 40%; float: right; } #redemption input#submit { text-decoration: none; height: 34px; font: 1.25em /* 36px ÷ 16 */ 'BebasNeueRegular'; background-color: #b01c20; border-radius: 8px; color: white; float: right; margin-bottom: 10px; background: linear-gradient(top, rgb(241,92,96) 0%, rgb(17 100%); margin-top: 10px; box-shadow: 5px 5px 5px hsla(0, 0%, 26.6667%, 0.8); text-shadow: 0px 1px black; border: 1px solid #bfbfbf; .polyfill-important .input-range,.polyfill-important .step-c float: right; } .polyfill-important .step-controls { margin-right: -20px!important; }
唯一注意すべき点は、最後の 2 つのスタイルは、対応するパッチ スクリプトが実行された場合にのみ機能するということです。まず、各フィールドセットの背景を素敵なグラデーションにし、相互間に少しスペースを持たせます。以下は、fieldset の変更された CSS コードです:
#redemption fieldset { border: 1px dotted #cccccc; padding: 2%; margin-bottom: 20px; background: #ffffff; background: linear-gradient(top, #ffffff 77%,#f2f2f2 100%); border-radius: 4px; box-shadow: 2px 2px 5px hsla(0, 0%, 16.6667%, 0.3); }
これらの事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
関連書籍:
以上がCSS3 を使用して HTML5 フォームを最適化する手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。