开发一个页面，左边一侧是全齿高，跳跃齿数，齿数，摇台角，摇台摆角，滚比，根锥角，垂直轮位，偏心角，螺旋进给参数，刀盘转速，节圆直径，滚刀数目，滚切方向，刀盘旋转和其相对应的读取输入框，中间是床鞍进给时间，滚切时间，床鞍退出时间，分度时间，切削次数，床鞍到位时间，床鞍大退位置，让刀距离，X加速度，Y加速度，Z加速度，起始齿序，工作模式，加工类型，旋向和其相对应的输入框，左边部分和中间部分每列的行一一对其，最右边一侧是工件号，工件名，其位置和中间的三行输入框一致大小，水平轮位，安装剧，芯轴长度和其对应的输入框其位置和中间Y加速度地方相对其，最右下角是绝对坐标在右小角的中间标题，下面是XYZ三行和读取数值现实或者是输入框，该页面代码该如何写，页面布局美观好看和机床加工页面类似

首先，我们需要确定所使用的前端框架，可以选择React、Vue、Angular等。以React为例，可以使用Ant Design作为UI库。

接下来，我们可以将该页面分为三个部分：左侧、中间、右侧。使用Flex布局可以使得每个部分占据相应的宽度，同时每个部分内部采用表格布局。

对于左侧部分，可以使用Ant Design的表格组件，并将每列的标题和输入框都作为一个单独的表格单元格，以实现每列的行一一对其。同时，可以设置表格的固定宽度和滚动条，以保证表格宽度不随内容长度变化而改变。

对于中间部分，可以使用Ant Design的卡片组件，并在卡片内使用表格布局。同样的，每列的标题和输入框都作为一个单独的表格单元格，以实现每列的行一一对其。

对于右侧部分，可以使用Ant Design的表单组件，并将每个表单项作为一个单独的表格单元格。同时，可以设置表单项的宽度和排列方式，以保证和左侧和中间部分的对其方式一致。

最后，在CSS样式上，可以使用统一的颜色和字体，并使用合适的margin和padding，以实现页面美观和类似机床加工页面的效果。

以下是示例代码：

import { Table, Card, Form, Input } from 'antd';

const leftColumns = [
  {
    title: '全齿高',
    dataIndex: '全齿高',
    render: (text, record) => (
      <Input defaultValue={text} />
    )
  },
  // 其他列
];

const leftData = [
  {
    key: '1',
    全齿高: '10',
    // 其他数据
  },
  // 其他行
];

const middleColumns = [
  {
    title: '床鞍进给时间',
    dataIndex: '床鞍进给时间',
    render: (text, record) => (
      <Input defaultValue={text} />
    )
  },
  // 其他列
];

const middleData = [
  {
    key: '1',
    床鞍进给时间: '0.5',
    // 其他数据
  },
  // 其他行
];

const rightItems = [
  {
    label: '工件号',
    name: '工件号',
    initialValue: '001'
  },
  // 其他表单项
];

const layout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 18,
  },
};

const MachinePage = () => {
  return (
    <div style={{ padding: '24px' }}>
      <div style={{ display: 'flex' }}>
        <Table
          columns={leftColumns}
          dataSource={leftData}
          scroll={{ x: 1200 }}
          style={{ width: '50%' }}
        />
        <Card title="加工参数" style={{ width: '50%', marginLeft: '24px' }}>
          <Table columns={middleColumns} dataSource={middleData} pagination={false} />
        </Card>
      </div>
      <div style={{ display: 'flex', marginTop: '24px' }}>
        <Form
          layout="horizontal"
          initialValues={{
            工件号: '001',
            // 其他表单项的默认值
          }}
          style={{ width: '50%' }}
        >
          {rightItems.map(item => (
            <Form.Item
              key={item.name}
              label={item.label}
              name={item.name}
              initialValue={item.initialValue}
            >
              <Input />
            </Form.Item>
          ))}
        </Form>
        <div style={{ width: '50%', marginLeft: '24px' }}>
          <div>绝对坐标</div>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <div>X:</div>
            <Input style={{ width: '80%' }} />
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <div>Y:</div>
            <Input style={{ width: '80%' }} />
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <div>Z:</div>
            <Input style={{ width: '80%' }} />
          </div>
        </div>
      </div>
    </div>
  );
};

export default MachinePage;