Testaccount
/
1.Test


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
							<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 将jsx转为js -->
        <script src="./babel.min.js"></script>
        <!-- react核心库 -->
        <script src="./react.development.js"></script>
        <!-- react中dom操作库 -->
        <script src="./react-dom.development.js"></script>
        <style>
            /* .box {
                width: 500px;
                height: 500px;
                border: 1px solid #000;
                margin: 0 auto;
            } */
        </style>
    </head>
    <body>
        <div id="root"></div>
        <!-- 
            className:
                className= '类名'
                className = {'类名'}
         -->
        <script type="text/babel">
            // 动态渲染样式
            // jsx中 style样式是对象Object格式 不能是字符串格式
            let newBox = {
                width: '500px',
                height: '500px',
                border: '1px solid #f00',
                margin: '0 auto',
                display: 'flex',
                justifyContent: 'space-between',
                alignItem: 'center'
            }
            let left = {
                width: '200px',
                height: '200px',
                // jsx中动态渲染样式 样式属性若是多单词组成则需要变成驼峰命名法
                backgroundColor: 'purple',
                color: "#fff"
            }
            // let box = <div className={'box'}>我的名字叫图图</div>;
            // 需求：盒子样式： 大盒子居中 小盒子通过弹性盒分别居左居右
            let box = (
                <div style={newBox}>
                    <div style={left}>左侧盒子</div>
                    <div style={{
                        width:'200px',
                        height:'200px',
                        backgroundColor:'#ff0',
                        color:'#f00'
                    }}>右侧盒子</div>
                </div>
            )
            let showPage = document.querySelector("#root");
            ReactDOM.createRoot(showPage).render(box);
        </script>

    </body>
</html>