ディジタル時計
2881 ワード
ディジタル時計
コメントサイト
1.(折り曲げ)入力文字のJavaScript基礎科目-符号化なし
2.(youtube)Webコード入門チュートリアル(https://www.youtube.com/watch?v=_nJl75kn3yY&list=PLkbzizJk4Ae_ZCinIZzwLf4XDh1NvjmyE&index=6)
3.箱を中央に移動する方法(https://www.youtube.com/watch?v=mVYgtzDLZfY)
4. https://deeplify.dev/front-end/markup/align-div-center
サイトの真ん中にデジタル時計を作る小さなプロジェクトです.
講座はInfranのUnicode先生の授業の最初の小さな項目に私の考えを加えて、変形を試みました.
私の考え:ホームページは分かれていないで、直接divを中央に移動しました.
unicode:bodyラベルをWebページ全体に作成し、bodyを基準にdivを中央に移動します.
htmlのレイアウトを探すと、cssを使用するflexまたはgridが見つかります.
しかし、レイアウトがなければdiv boxは真ん中までしか行けないので、以下のように書いてみました.
次の画像は最終結果です.
コメントサイト
1.(折り曲げ)入力文字のJavaScript基礎科目-符号化なし
2.(youtube)Webコード入門チュートリアル(https://www.youtube.com/watch?v=_nJl75kn3yY&list=PLkbzizJk4Ae_ZCinIZzwLf4XDh1NvjmyE&index=6)
3.箱を中央に移動する方法(https://www.youtube.com/watch?v=mVYgtzDLZfY)
4. https://deeplify.dev/front-end/markup/align-div-center
サイトの真ん中にデジタル時計を作る小さなプロジェクトです.
講座はInfranのUnicode先生の授業の最初の小さな項目に私の考えを加えて、変形を試みました.
私の考え:ホームページは分かれていないで、直接divを中央に移動しました.
unicode:bodyラベルをWebページ全体に作成し、bodyを基準にdivを中央に移動します.
htmlのレイアウトを探すと、cssを使用するflexまたはgridが見つかります.
しかし、レイアウトがなければdiv boxは真ん中までしか行けないので、以下のように書いてみました.
body{
background-color: black;
}
.clock{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
text-align: center;
}
.time{
text-align: center;
color: white;
}
とても简単な内容です...理解するのに長い時間がかかったと思います.ほほほ次の画像は最終結果です.
Reference
この問題について(ディジタル時計), 我々は、より多くの情報をここで見つけました https://velog.io/@guentc2/디지털-시계テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol