前言
我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣 关注公众号带你进入前端学习交流群
主界面
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; }
运行结果
