Testaccount
/
1.Test


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
							<!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{
            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 box = <div className={'box'}>这里展示样式</div>
        // 需求： 盒子样式； 大盒子居中  小盒子通过弹性盒子布局分别在左右两侧
        let newBox = {
            width:'500px',
            height:'500px',
            border:'1px solid #00f',
            margin:'0 auto',
            display:'flex',
            justifyContent:'space-between',
            alignItem:'center'
        }
        let left = {
            width:'100px',
            height:'100px',
            // jsx中动态渲染样式 样式属性若是多单词组成需要将其变成驼峰命名法
            backgroundColor:'#e83c09',
            color:'#0e7fc7'
        }
        let box = (
            <div style={newBox}>
                <div style={left}>左侧盒子</div>
                <div style={{
                    width:'100px',
                    height:'100px',
                    backgroundColor:'blue',
                    color:'#168743'
            
            }}>右侧盒子</div>
            </div>
        )
        const getelement = document.getElementById('root');
        ReactDOM.createRoot(getelement).render(box)
    </script>
</body>

</html>