ホームページ >ウェブフロントエンド >jsチュートリアル >Chatgpt HTML CSS と JS を使用したサインアップ ページのクローン https://www.instagram.com/webstreet_code/
Chatgpt HTML CSS と JS を使用したサインアップ ページのクローン https://www.instagram.com/webstreet_code/
- DDDオリジナル
- 2024-11-10 18:21:02632ブラウズ
インスタグラムでフォローしてください: https://www.instagram.com/webstreet_code/
<!DOCTYPE html>
<html lang="ja">
<メタ文字セット="UTF-8">
<meta name="viewport" content="width=device-width、initial-scale=1.0">
<title>ChatGPT サインアップ</title>
/* 一般的なリセット */
* {
マージン: 0;
パディング: 0;
ボックスのサイズ設定: ボーダーボックス;
フォントファミリー: Arial、サンセリフ;
}
/* コンテナを中央に配置 */
。容器 {
最大幅: 350ピクセル;
マージン: 50px 自動;
テキスト整列: 中央;
カラー: #333;
}
/* ロゴとヘッダー */
.container img {
幅: 80ピクセル;
マージン-ボトム: 80ピクセル;
}
h1 {
フォントサイズ: 30px;
フォントの太さ: 太字;
マージン-ボトム: 20px;
/* カラー: hsl(152, 97%, 30%); */
}
/* 入力とボタン */
.input-container {
整列項目: 中央;
コンテンツの位置揃え: 中央;
マージン-ボトム: 20px;
}
.input-container input[type="text"] {
パディング: 16px;
幅: 100%;
境界線: 1px 実線 #ccc;
境界半径: 5px;
概要: なし。
フォントサイズ: 14px;
}
.input-container ボタン {
背景色: #10a37f;
色: 白;
境界線: なし。
パディング: 15px;
マージントップ: 40px;
境界半径: 5px;
カーソル: ポインタ;
フォントの太さ: 太字;
幅: 100%;
}
.input-container ボタン:hover {
背景色: #064d22;
}
/* 既存のアカウントのログイン */
.ログインリンク {
フォントサイズ: 14px;
マージン: 10px 0;
カラー:#555;
}
.login-link スパン {
色: #10a37f;
カーソル: ポインタ;
テキスト装飾: 下線;
}
/* "OR" による区切り */
.divider {
ディスプレイ: フレックス;
整列項目: 中央;
コンテンツの位置揃え: 中央;
色: #aaa;
マージン: 20px 0;
}
.divider hr {
幅: 30%;
高さ: 1px;
背景色: #ccc;
境界線: なし。
}
/* ソーシャル ログイン オプション */
.logocontainer {
ディスプレイ: フレックス;
フレックス方向: 列;
ギャップ: 10px;
マージン-ボトム: 20px;
整列項目: 中央;
}
.ロゴ {
ディスプレイ: フレックス;
整列項目: 中央; /* 項目を 1 行で垂直方向に中央揃えにします */
justify-content: flex-start; /* アイテムを水平方向に整列させます */
境界線: 1px 実線 #ccc;
パディング: 10px 15px; /* 間隔を広げるためにパディングを追加します */
境界半径: 5px;
カーソル: ポインタ;
幅: 350ピクセル;
遷移: 背景色 0.3 秒;
}.logo img {
幅: 40ピクセル;
高さ: 40ピクセル;
マージン:自動 0px;
右マージン: 10px; /* 画像とテキストの間のスペース */
}
.logo h4 {
フォントサイズ: 14px;
カラー:#555;
マージン: 0; /* 余分な余白を削除します */
テキスト整列: 左; /* テキストが左揃えになるようにします */
}
.logo:ホバー {
背景色: #f1f1f1;
}
/* フッターリンク */
.lastline {
ディスプレイ: フレックス;
コンテンツの位置揃え: 中央;
ギャップ: 10px;
フォントサイズ: 12px;
色: #10a37f;
}
.lastline hr {
幅: 1px;
高さ: 12px;
背景色: #ccc;
境界線: なし。
}
</スタイル>
</head>
<div>
</div>
以上がChatgpt HTML CSS と JS を使用したサインアップ ページのクローン https://www.instagram.com/webstreet_code/の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
css html for auto using pointer JS display margin padding border viewport background transition column flex input chatgpt https
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。