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

系统管理员 2023-10-04 19:41 17阅读 0赞

主界面

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;  
\}

发表评论取消回复

表情：

评论列表（有 0 条评论，17人围观）

还没有评论，来说两句吧...

相关阅读

相关 React之umi入门学习笔记

背景首次接触react框架，拥有的基础为： <table> <thead> <tr> <th align="left">现有技术储备</th> ...

深碍√TFBOYSˉ_/ 2024年04月18日 23:55/ 0 赞/ 49 阅读

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

主界面 import ReactDOM from react-dom/client; // 引入样式表 import ./index.css; // 创建一个Rea

系统管理员/ 2023年10月04日 19:41/ 0 赞/ 18 阅读

相关 react学习笔记

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K

- 日理万妓/ 2023年10月01日 16:23/ 0 赞/ 3 阅读

相关 Qt学习笔记之样式表

一、概述 Qt的样式表是从Qt4.2开始引入的描述窗口部件外观的机制，类似于HTML的层叠样式表（Cascading Style Sheets，CSS）。样式表在Qt的风

野性酷女/ 2023年07月18日 02:59/ 0 赞/ 23 阅读

相关学习笔记——react的ajax封装使用及设置代理

-------------------- > react实现动态获取数据的重要功能。在react中发送ajax一般使用fetch。并且由于跨域问题，需要设置代理。 1.f

拼搏现实的明天。/ 2022年11月22日 05:30/ 0 赞/ 309 阅读

相关 React学习笔记

认识 React React 是 facebook 开源的一套框架，可总结为以下几个特点：基于 JSX 语法糖实现 JUST THE UI：在多层架构的设

分手后的思念是犯贱/ 2022年08月21日 02:17/ 0 赞/ 211 阅读

相关学习react的实例1--日历

1.https://github.com/wayofthefuture/react-input-moment 这是一个github的地址，他是一个react的时间组件；效

心已赠人/ 2022年06月08日 02:08/ 0 赞/ 172 阅读

相关 react日历组件

一、简单版效果图如下 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG

电玩女神/ 2022年04月05日 08:37/ 0 赞/ 767 阅读

相关 react-tips3: 设置样式设置组件的样式

react 页面样式的设置，和普通的页面样式设置没有太大区别；首先我们创建一个Index组件，目录如下：

怼烎@/ 2022年03月18日 03:40/ 0 赞/ 316 阅读

相关 ssm项目笔记（七）日历设置

日历展示预约信息画图解析： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9

短命女/ 2022年01月06日 00:25/ 0 赞/ 274 阅读