(资料图)

前言

我是歌谣 我有个兄弟 巅峰的时候排名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;}

运行结果