Testaccount
/
1.Test


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../babel.min.js"></script>
    <script src="../react.development.js"></script>
    <script src="../react-dom.development.js"></script>
    <style>
        .box{
            color:darkorange
        }

        /* .container{
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            margin:0 auto;
        } */
    </style>
</head>
<body>
    <div id="root"></div>
    <!-- 绑定类名的两种方式：
            1. className="类名"
            2. className={'类名'}
    -->
    <script type="text/babel">
        // let box = <div className="box">今天晚上没有星星</div>
        // let box = <div className={'box'}>今天晚上没有星星</div>
        // 需求： 大盒子居中，小盒子通过flex布局，左右排列
        
        // 动态渲染样式
        // jsx中 style样式是对象格式，不能是字符串
        let newBox = {
            display:'flex',
            justifyContent:'space-between',
            alignItems:'center',
            width: '500px',
            height: '500px',
            border: '1px solid #000',
            margin:'0 auto',
        }
        let left = {
            width: '200px',
            height: '200px',
            // jsx中动态渲染样式时，属性名中的 - 变为驼峰命名法
            textAlign:'center',
            backgroundColor:'pink'
        }
        let box = (
            // <div className="container">
            <div style={newBox}>
                <div style={left}>左侧盒子</div>
                <div style={{
                    width: '200px',
                    height: '200px',
                    textAlign:'center',
                    backgroundColor:'skyblue'
                }}>右侧盒子</div>
            </div>
        )
        let getRoot = document.querySelector('#root')
        ReactDOM.createRoot(getRoot).render(box)
    </script>
</body>
</html>