1レイアウトフロート

ここに写真の説明を挿入

2垂直中心と水平中心

ここに写真の説明を挿入

3フォーム

ここに写真の説明を挿入

4つのリスト

ここに写真の説明を挿入

5フォーム

5.1テキストボックス

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

ここに写真の説明を挿入

5.2パスワードボックス

<form>
Password: <input type="password" name="pwd">
</form>

ここに写真の説明を挿入

5.3ラジオボタン

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

ここに写真の説明を挿入

5.4チェックボックス

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

ここに写真の説明を挿入

5.5送信ボタン

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

ここに写真の説明を挿入

5.6ドロップダウンリスト

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

ここに写真の説明を挿入

5.7テキストフィールド

<textarea rows="10" cols="30">
我是一个文本框。
</textarea>

6 css

6.1テキスト

ここに写真の説明を挿入

p.small {line-height：90％}行の高さを設定

水平方向の配置
h1 {text-align：center;}
p.date {text-align：right;}
p.main {text-align：justify;}

vertical-align：text-top;垂直方向の配置

{text-decoration：none;}は下線を削除します

p {text-indent：50px;} text indentプロパティは、テキストの最初の行のインデントを指定するために使用されます。

color：red;フォントの色

h1 {font-size：250％}フォントサイズ

ボーダー：5px赤一色;

6.2ディスプレイ

p {display:inline;}行内元素

ここに写真の説明を挿入

span {display：block;}ブロック要素

ここに写真の説明を挿入

表示：なしまたは可視性：非表示

ここに写真の説明を挿入

6.2display：flex

住所

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div style="width:300px;border:1px solid red;display: flex;flex-wrap: wrap;">
            <div style="width: 100px;height: 100px;background-color: black;"></div>
            <div style="width: 100px;height: 100px;background-color: green;"></div>
            <div style="width: 100px;height: 100px;background-color: yellow;"></div>
            <div style="width: 100px;height: 100px;background-color: blue;"></div>
        </div>
    </body>
</html>

<!DOCTYPE html>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <style>
        .father {
     
     
            width: 500px;
            height: 100px;
            background-color: red;
            display: flex;
            flex-flow:row;
        }

        .box1 {
     
     
            flex: 3;
            background: blue;

        }
        .box2{
     
     
            flex: 2;
            background: pink;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>

</html>

6.3位置（配置）

静的HTML要素のデフォルト値、つまり配置なしは、通常のドキュメントフローオブジェクトに従います。要素の相対的な位置は、通常の位置を基準にしています。

固定要素の位置は、ブラウザウィンドウに対する固定位置です。

絶対位置絶対位置の要素の位置は、最も近い位置の親要素を基準にしています。要素に位置の親要素がない場合、その位置は次の値を基準にしています。

ねばねば

ここに写真の説明を挿入