(資料圖)

前言

我是歌謠 我有個兄弟 巔峰的時候排名c站總榜19 叫前端小歌謠 曾經我花了三年的時間創作了他 現在我要用五年的時間超越他 今天又是接近兄弟的一天人生難免坎坷 大不了從頭再來 歌謠的意志是永恒的 放棄很容易 但是堅持一定很酷 微信公眾號前端小歌謠 關注公眾號帶你進入前端學習交流群

主界面

import ReactDOM from "react-dom/client";// 引入樣式表import "./index.css";// 創建一個React元素const App = 
    {/* 日志項容器 */}    
        {/* 日期的容器 */}        
            
                四月            
            
                19            
        
        {/* 日志內容的容器 */}        
            
學習React
            
40分鐘
        
    
;// 獲取根元素const root = ReactDOM.createRoot(document.getElementById("root"));// 渲染元素root.render(App);

樣式文件

/*設置基本樣式*/*{    box-sizing: border-box;}/*設置body的樣式*/body{    background-color: #DFDFDF;    margin: 0;}/*設置外層容器logs的樣式*/.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的樣式*/.item{    /*開啟彈性盒*/    display: flex;    margin: 16px 0;    padding: 6px;    background-color: #FCBF49;    border-radius: 10px;    box-shadow: 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;}

運行結果