react笔记之学习日历样式的设置

主界面

import ReactDOM from 'react-dom/client';
// 引入样式表
import './index.css';

// 创建一个React元素
const App = <div className="logs">
    {/* 日志项容器 */}
    <div className="item">
        {/* 日期的容器 */}
        <div className="date">
            <div className="month">
                四月
            </div>
            <div className="day">
                19
            </div>
        </div>

        {/* 日志内容的容器 */}
        <div className="content">
            <h2 className="desc">学习React</h2>
            <div className="time">40分钟</div>
        </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的样式*/
.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;
}

运行结果