反応ノートのカレンダー スタイル設定の学習

メインインターフェース

import ReactDOM from react-dom/client;
// スタイル シートをインポート
import ./index.css;

// React 要素を作成する
const App =

{/* ログ項目コンテナ /}

{/ 日付コンテナ */}

4月

19

    {/* 日志内容的容器 */}
    <div className="content">
        <h2 className="desc">学习React</h2>
        <div className="time">40分钟</div>
    </div>
</div>

;

// ルート要素を取得
const root = ReactDOM.createRoot(document.getElementById(root));
// 要素をレンダリング
root.render(App);
スタイル ファイル

/基本的なスタイルを設定/
*{ box-sizing: border-box; }

/ body のスタイルを設定/
body{ background-color: #DFDFDF; margin: 0; }

/外側のコンテナ ログのスタイルを設定します/
.logs{ width: 800px; margin: 50px auto; padding: 20px; background-color: #EAE2B7; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0 ,0,.2); }

/アイテム スタイルを設定/
.item{ /フレックス ボックスを開く/表示: flex;マージン: 16px 0;パディング: 6px;背景色: #FCBF49;境界線の半径: 10px;ボックスの影: 0 0 10px rgba(0 , 0,0,.2); }

/日付スタイルを設定/
.date{ width: 90px; background-color: #fff; border-radius: 10px; font-weight: bold; text-align: center; overflow: hidden; }

/月の効果を設定/
.month{ height: 30px; line-height: 30px; font-size: 20px; color: #fff; background-color: #D62828; }

/日付の効果を設定/
.day{ height: 60px; line-height: 60px; font-size: 50px; }

/ログ コンテンツのスタイル設定/
.content{ flex: auto; text-align: center; font-weight: bold; }

/説明内容の設定/
.desc{ font-size: 16px; color: #194B49; }

/学習時間を設定/
.time{ color: #D62828; }