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

主界面

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

// 创建一个React元素
const App =

{/* 日志项容器 /}

{/ 日期的容器 */}

四月

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的样式/
.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;
}