react笔记之学习之使用组件完成练习

日期部分data.js

import React from 'react';
import './MyDate.css';
 
const MyDate = () => {
    return (
        <div className="date">
            <div className="month">
                四月
            </div>
            <div className="day">
                19
            </div>
        </div>
    );
};
 
export default MyDate;

日期样式data.css

/*设置日期的样式*/
.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;
}

主体部分index.js

import React from 'react';
import MyDate from "./MyDate/MyDate";
import './LogItem.css'
 
const LogItem = () => {
    return (
        <div className="item">
            <MyDate/>
            {/* 日志内容的容器 */}
            <div className="content">
                <h2 className="desc">学习React</h2>
                <div className="time">40分钟</div>
            </div>
        </div>
    );
};
 
export default LogItem;

主体样式

/*设置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);
}
/*设置日志内容的样式*/
.content{
    flex: auto;
    text-align: center;
    font-weight: bold;
}
 
/*设置描述内容*/
.desc{
    font-size: 16px;
    color: #194B49;
}
 
/*设置学习时间*/
.time{
    color: #D62828;
}
 

运行结果