P03:博客首页主体的两栏布局

我们的博客主体分为左右两栏布局,左边是主要展示的是文章列表,右边是个人信息和一些广告的东西。并且也是在不同的终端中有不同的表现。本文我们先制作出两栏布局。

对公用头部的微调

上篇完成了公用头部的编写,但是发现公用头部还是不那么的好看,特别是在2K屏下,显得太小气了。所以先对公用头部的CSS进行调整。打开header.css文件,改成下面,代码的样式。

.header{
    background-color: #fff;
    padding: .4rem;
    overflow: hidden;
    height: 3.2rem;
    border-bottom:1px solid #eee;
}
.header-logo{
    color:#1e90ff;
    font-size: 1.4rem;
    text-align: left;
}
.header-txt{
    font-size: 0.6rem;
    color: #999;
    display: inline-block;
    padding-left: 0.3rem;
}
.ant-meu{
    line-height: 2.8rem;
}
.ant-menu-item{
    font-size:1rem !important;
    padding-left:1rem;
    padding-right:1rem;
}

对屏幕的适配我们也作一下对应的调整,把适配参数配置成如下参数:

logo部分

xs={24} sm={24} md={10} lg={15} xl={12}

Menu部分

xs={0} sm={0} md={14} lg={8} xl={6}

编写首页的左右两列布局

可以看到博客是分为左右两列布局的,而且也是适配各终端的,有了上篇文章的经验,我们得知,可以用RowCol组件来完成。

index.js

import React from 'react'
import Head from 'next/head'
import {Row, Col} from 'antd'
import Header from '../components/Header'

export default function Home() {
  return (
    <div>
      <Head>
        <title>Home</title>
      </Head>
      <Header />
      <Row className="comm-main" type="flex" justify="center">
        <Col className="comm-left" xs={24} sm={24} md={16} lg={18} xl={14}  >
          左侧
        </Col>

        <Col className="comm-right" xs={0} sm={0} md={7} lg={5} xl={4}>
          右侧
        </Col>
      </Row>
    </div>
  )
}

CSS样式写在公用的comm.css里,代码如下:

.comm-left{
  background-color: #FFF;
  padding:.3rem;
  border-radius: .3rem;
  border-bottom:1px solid #eee;
}
.comm-right{
  background-color: #FFF;
  margin-left: .5rem;
  padding:.3rem;
  border-radius: .3rem;
  border-bottom:1px solid #eee;

}
.comm-main{
  margin-top: .5rem;
}

其他页面的大结构复制

因为博客的列表页、详细页都采用了这种页面的总体形式,所以我们在Pages目录新建list.jsdetailed.js文件,然后把index.js代码复制到里边,并进行简单的修改。

list.js

import React from 'react'
import Head from 'next/head'
import {Row, Col} from 'antd'
import Header from '../components/Header'
const List = () => (
  <>
    <Head>
      <title>List</title>
    </Head>
    <Header />
    <Row className="comm-main" type="flex" justify="center">
      <Col className="comm-left" xs={24} sm={24} md={16} lg={18} xl={14}  >
        左侧
      </Col>

      <Col className="comm-right" xs={0} sm={0} md={7} lg={5} xl={4}>
        右侧
      </Col>
    </Row>
 </>
)

export default List

detailed.js

import React from 'react'
import Head from 'next/head'
import {Row, Col} from 'antd'
import Header from '../components/Header'
const Detailed = () => (
  <>
    <Head>
      <title>Detailed</title>
    </Head>
    <Header />
    <Row className="comm-main" type="flex" justify="center">
      <Col className="comm-left" xs={24} sm={24} md={16} lg={18} xl={14}  >
        左侧
      </Col>

      <Col className="comm-right" xs={0} sm={0} md={7} lg={5} xl={4}>
        右侧
      </Col>
    </Row>
 </>
)

export default Detailed

以上代码就是完成了博客的整体结构,并且是统一的。效果如下

博客首页主体的两栏布局

下节我们继续把通用的博客底部做出来,当然也封装成一个组件,其实React编写就是在不断的制作组件。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P03:博客首页主体的两栏布局

发表评论

提供最优质的资源集合

立即查看 了解详情