码云 P03：博客首页主体的两栏布局
AI 概述
对公用头部的微调编写首页的左右两列布局其他页面的大结构复制
我们的博客主体分为左右两栏布局，左边是主要展示的是文章列表，右边是个人信息和一些广告的东西。并且也是在不同的终端中有不同的表现。本文我们先制作出两栏布局。
对公用头部的微调
上篇完成了公用头部的编写，但是发现公用头部还是不...
目录
我们的博客主体分为左右两栏布局，左边是主要展示的是文章列表，右边是个人信息和一些广告的东西。并且也是在不同的终端中有不同的表现。本文我们先制作出两栏布局。
对公用头部的微调
上篇完成了公用头部的编写，但是发现公用头部还是不那么的好看，特别是在 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}
编写首页的左右两列布局
可以看到博客是分为左右两列布局的，而且也是适配各终端的，有了上篇文章的经验，我们得知，可以用Row和Col组件来完成。
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.js和detailed.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 编写就是在不断的制作组件。
以上关于P03：博客首页主体的两栏布局的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。
微信
支付宝声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » P03：博客首页主体的两栏布局
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » P03：博客首页主体的两栏布局
