24.详情页面布局

1.我们打开pages目录下的detail进行详情页代码的设计
在detail下新建一个文件style.js用来存放detail页面的css样式
2.在index中，我们使用自定义标签DetailWrapper,Header,Content，并且将这些标签从样式文件中引入

    import React, { Component } from 'react';
import { DetailWrapper,Header,Content} from './style';
class Detail extends Component{
    render() {
        return(
        <DetailWrapper>
                <Header>一树花开</Header>
                <Content>
                    <img src={require('./image/3.jpg')} alt=' ' />
                    <p>花色太过浓郁<br/><br/>我惹了一身的花香<br/><br/>是怪风多情<br/><br/>还是我的途径   </p>
                    <img src={require('./image/4.jpg')} alt=' ' />
                    <p>夏天的蝉<br /><br />吵醒了我的梦
                    <br /><br />我以为冰激凌<br /><br />快化了<br /><br />谁知早就被猫<br /><br />吃了个精光</p>
                </Content>
        </DetailWrapper>
        )
    }
}
export default Detail;

3.在style.js中，我们进行样式编写

import styled from 'styled-components';
export const DetailWrapper = styled.div`
    overflow:hidden;
    width:620px;
    margin:0 auto ;
    padding-bottom:100px;
   
`;
export const Header = styled.div`
    margin:50px 0 20px 0;
    line-height:44px;
    font-size:34px;
    color:#333;
    font-weight:bold;
`;
export const Content = styled.div`
    color:#272727;
    img{
        width:100%;
    };
    p{
        box-sizing:border-box;
        color:rgb(47,47,47);
        font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-size:16px;
        font-weight:400;
        line-height:27.2px;
        margin-bottom:25px;
        margin:0 0 25px;
    };
`;

效果：