Home-theater-designers
CSSは、スタイルシート言語と呼ばれる独自の言語クラスに属しています。これは主に、Webページのプレゼンテーションを定義するために使用されます。 HTMLではページの構造を指定できますが、スタイル設定に使用されるのはCSSです。そうしないと、かなり魅力のないWebサイトになってしまいます。
CSSに焦点を当てることは、特にユーザーエクスペリエンスの向上に関して、Webサイトの魅力を向上させるためのより良い方法の1つです。このようにして、トラフィックを増やすこともできます。手始めに、スタックフォームを使用できます。
スタックフォームとは何ですか？
スタックフォームを使用すると、ラベルと入力を水平パターンではなく、重ねて配置できる特殊なフォームを作成できます。
これがあなたがそれをする方法です。
HTMLをコーディングする
HTML要素を使用します。 、あなたの情報を処理します。関連するフィールドにラベルを追加し、関連する入力フィールドを割り当てます。この例では、フォームの入力タイプにフルネームとメールアドレスを入力するようユーザーに求めています。 文章 、ドロップダウンメニューはを介して作成されますが IDを選択 彼らが彼らの産業を選ぶのを助けるために。
What Is a Stacked Form?
Here's how you create a stacked form.
Full Name
Email Address
Department
Information Technology
Customer Support
Sales
ただし、このコードを実行すると、フィールドを垂直方向にスタックせずに、当たり障りのないフォームしか生成されません。そして、そこにCSSを追加する必要があります。
古いGmailに戻すにはどうすればよいですか？
CSS部分をコーディングする
次に、別のスタイルシートを作成し、それをHTMLのbodyタグの前に追加します。
次に、HTMLの本文、入力タイプ、コンテナを選択し、CSSを使用してスタイルを設定します。これには、font-family、width、padding、margin、display、borderなどのさまざまなCSSプロパティの実験が含まれ、好みの値を追加します。このように、あなたはあなたの正確な好みに合う積み重ねられた形で終わるでしょう。これが例です。
body {
font-family: Calibri;
}
input[type=text], select {
width: 25%;
padding: 12px 20px;
margin: 8px 10;
display: list-item;
border: 4px double #39A9DB;
border-radius: 8px;
box-sizing: border-box;
}
input[type=submit] {
width: 25%;
background-color: #F8E2E6;
color: #0000FF;
padding: 12px 18px;
margin: 20px 0;
border: none;
border-radius: 6px;
cursor: pointer;
}
div.container {
border-radius: 10px;
background-color: #39A9DB;
padding: 40px;
}
以下の出力を確認してください。
これで、CSSでスタックフォームを作成できます
この記事では、CSSでスタックフォームを作成する方法を学びました。練習すれば、フォームを洗練して、Webサイトをよりユーザーフレンドリーにすることができます。
私のiMessageが機能しないのはなぜですか
プログラミングゲームの名前は「練習」です。展示プロジェクトでCSSスキルを日々磨き、スタイリッシュなWebデザイナーとより効率的なWeb開発者になりましょう。
共有 共有 つぶやき Eメール 10分で学ぶことができる10の簡単なCSSコード例CSSのサポートが必要ですか？これらの基本的なCSSコード例を最初に試してから、独自のWebページに適用してください。
次を読む 関連トピック- プログラミング
- ウェブ開発
- CSS
Usmanは、デジタルプラットフォームでの有機的な成長でいくつかのビジネスを支援してきたコンテンツマーケティング担当者です。彼はプログラミングとライティングの両方が好きです。つまり、テクニカルライティングは彼がとても楽しんでいるものです。仕事をしていないとき、Usmanはテレビ番組を見たり、クリケットをフォローしたり、データ分析について読んだりするのを楽しんでいます。
UsmanGhaniのその他の作品ニュースレターを購読する
ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。
購読するにはここをクリックしてください