props 使用场景 及 布局提升

一对一
一边写html 一边写css
一小块为单位
html css
css html
整块单位
html css
css html

react/first-react/src/views/Wk/index.jsx

import React, { Component } from 'react';

class View extends Component {

    render(){
        return(
            <div className="wk_con clearfix wrap wt">
                <div className="wk_fl fl">
                    <h3></h3>
                    <div className="lb">
                    </div>
                </div>
                <div className="wk_fr fr">
                    <div className="h3_2">
                        <ol>
                            <li><a href="true">更多</a></li>
                        </ol>
                    </div>
                    <div className="wk_con_fl">
                        <ul className="ul3 clearfix">
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                        </ul>
                    </div>
                    <div className="wk_con_fr">

                    </div>
                </div>
            </div>
        )
    }
}
export default View;

React JSX

Copy

@charset "UTF-8";
.wrap {
    width:1200px;
    margin:0 auto;
}
.wt {
    margin-top:22px;
}
.wk_con{
    .wk_fl {
        width:240px;
        h3 {
            height:40px;
            line-height: 40px;
            font-size:20px;
            font-weight: normal;
            color:#333;
        }
        .lb{
            height:378px;
            background: red;
        }
    }
    .wk_fr {
        width:940px;
        .h3_2{
            height: 40px;
            border-bottom:2px solid #e7e7e7;
            ol {
                // float:left;
                overflow: hidden;
                height:40px;
                li {
                    float:left;
                    height:32px;
                    line-height: 32px;
                    padding-top:8px;
                }
                li:nth-child(1){
                    float:right;
                }
            }
        }
        .wk_con_fl{
            float:left;
            width:620px;
            overflow: hidden;
            ul {
                width:630px;
                margin-top:10px;
                li {
                    float: left;
                    width:200px;
                    margin:10px 10px 0 0;
                    background: green;
                }
            }
            .ul1 {
                li {
                    height:112px;
                }
            }
            .ul2{
                li {
                    height:355px;
                }
            }
            .ul3{
                li {
                    height:173px;
                    &:nth-child(4){
                        width:410px;
                    }
                }
            }
        }
        .wk_con_fr{
            float:right;
            width:285px;
            height:376px;
            background: blue;
        }
    }
}