使用div+css实现表格布局

编程语言 2023-04-07 13:16:02 阅读次数: 0

DIV+CSS是WEB设计标准，它是一种网页的布局方法。与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。提起DIV+CSS组合，还要从XHTML说起。XHTML是一种在HTML（标准通用标记语言的子集）基础上优化和改进的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。

“DIV+CSS”其实是错误的叫法，而标准的叫法应是XHTML+CSS。因为DIV与Table都是XHTML或HTML语言中的一个标记，而CSS只是一种表现形式。也许其提出者本意并没有错，但是跟风者从表现曲解了其意思，认为整个页面就应当是DIV+CSS文件的组合。

css是层叠样式表（Cascading Style Sheets）的缩写，用于定义HTML元素的显示形式，是W3C推出的格式化网页内容的标准技术。网页设计者必须掌握的技术之一。

在HTML文档中加入CSS

样式表可分为嵌入式样式表、外部样式表和内联样式表三种，在同一文档内可以同时使用三种方法。

1.样式定义放在一个单独的文件中，例：新建一个后辍为CSS的样式定义。

元素{ 属性color:值red；} 在head段使用<link>标记，

引用语法：<link rel=”stylesheet” type=”text/css” href=”样式表URL” />

2.嵌入式样式表：

<style>元素段必须出现在head段内，有一个开始和结束标记，并且可以有多个<style>段

语法格式： <style type=”text/css”>

…样式定义…

样式

3.在嵌入式样式表中我们可以使用@import导入一个外部样式表，例：

<style type=”text/css”>

@import url(外部样式表位置)；

…其它嵌入式的样式定义…

</style>

4.内联样式表：

写在开始标记里面，比如你要H1变红色，

<h1 style=”color:red;”>变为红色</h1>

总结： 三种样式表优先使用外部样式表、嵌入式样式表用来调试用的、一般不使用内联样式表。

5.样式规则：

一个样式规则由一个选择器后跟一个声明块组成，声明块是一个大容器,由大括号中间的部分组成,声明块中间的空间会被忽略,,声明块由一个一个的声明组成,声明由属性和值组成,属性和值用冒号隔开,分号结束，每个声明内只能有一个属性，如果属性值中含有空格用双引号括起来例，在一个声明块内可以有多个声明，每个声明用分号隔开。

用于element ui的tabel组件无法实现的特殊表格布局，如下：

 .vue文件：

<template>
  <basic-container>
    <div class="m-order-list-wrap">
        <div class="table_box">
          <div class="m-order-list-table-wrap-outer">
            <div class="m-order-list-table-wrap">
              <!-- 表头 -->
              <div class="m-order-list-header-wrap">
                <div class="m-order-list-header-item">所属渠道</div>
                <div class="m-order-list-header-item">商品名称</div>
                <div
                  class="m-order-list-header-item-width"
                  style="width: 120px"
                >
                  商品金额
                </div>
                <div
                  class="m-order-list-header-item-width"
                  style="width: 120px"
                >
                  商品数量
                </div>
                <div
                  class="m-order-list-header-item-width"
                  style="width: 120px"
                >
                  支付金额
                </div>
                <div
                  class="m-order-list-header-item-width"
                  style="width: 120px"
                >
                  支付方式
                </div>
                <div
                  class="m-order-list-header-item-width"
                  style="width: 120px"
                >
                  订单状态
                </div>
                <div
                  class="m-order-list-header-item-width"
                  style="width: 120px"
                >
                  物流状态
                </div>
                <div
                  class="m-order-list-header-item-width"
                  style="width: 120px"
                >
                  操作
                </div>
              </div>
              <!-- 列表内容 -->
              <div class="m-order-list-content-wrap">
                <div
                  v-for="item in tableData"
                  :key="item.channel_order_no"
                  class="m-order-list-content-item"
                >
                  <div class="m-order-list-content-item-left">
                    <!-- 基础信息 -->
                    <div class="m-order-list-content-item-header">
                      <div class="m-order-list-content-item-header-inner">
                        <span class="m-order-list-desc-label">店铺名称</span>
                        <span class="m-order-list-desc-value-header">{
   
   {
                          item.shop_name
                        }}</span>
                        <div>
                          <div style="margin: 0 0 4px 0">
                            <span class="m-order-list-desc-label"
                              >渠道订单号</span
                            >
                            <span class="m-order-list-desc-value-header">{
   
   {
                              item.channel_order_no
                            }}</span>
                          </div>
                          <div>
                            <span
                              class="m-order-list-desc-label"
                              style="width: 62px; text-align: right"
                              >分销单号</span
                            >
                            <span class="m-order-list-desc-value-header">{
   
   {
                              item.order_no
                            }}</span>
                          </div>
                        </div>

                        <span class="m-order-list-desc-label">下单时间</span>
                        <span class="m-order-list-desc-value-header">{
   
   {
                          item.order_create_at
                        }}</span>
                        <span class="m-order-list-desc-label">手机号</span>
                        <span class="m-order-list-desc-value-header">{
   
   {
                          item.place_order_phone
                        }}</span>
                        <span class="m-order-list-desc-label">买家/收货人</span>
                        <span class="m-order-list-desc-value-header">{
   
   {
                          item.place_order_nickname
                        }}</span>
                      </div>
                    </div>
                    <!-- 列表单元格 -->
                    <div class="m-order-list-content-item-info">
                      <!-- 所属渠道 -->
                      <div class="m-order-list-col">
                        <span class="m-order-list-desc-value-info">{
   
   {
                          item.channel_name
                        }}</span>
                      </div>
                      <!-- 商品名称 -->
                      <div class="m-order-list-col">
                        <span class="m-order-list-desc-value-info">{
   
   {
                          item.product_name
                        }}</span>
                      </div>
                      <!-- 商品金额 -->
                      <div class="m-order-list-col-width" style="width: 120px">
                        <span class="m-order-list-desc-value-info">{
   
   {
                          item.order_amount
                        }}</span>
                      </div>
                      <!-- 商品数量 -->
                      <div class="m-order-list-col-width" style="width: 120px">
                        <span class="m-order-list-desc-value-info">{
   
   {
                          item.product_quantity
                        }}</span>
                      </div>
                      <!-- 支付金额 -->
                      <div class="m-order-list-col-width" style="width: 120px">
                        <span class="m-order-list-desc-value-info">{
   
   {
                          item.pay_amount
                        }}</span>
                      </div>
                      <!-- 支付方式 -->
                      <div class="m-order-list-col-width" style="width: 120px">
                        <span
                          :class="[
                            `m-order-list-desc-value-info m-order-list-pay-type ${getPayTypeStatusClass(
                              item
                            )}`,
                          ]"
                          >{
   
   { item.pay_type_name }}</span
                        >
                      </div>
                      <!-- 订单状态 -->
                      <div class="m-order-list-col-width" style="width: 120px">
                        <span
                          :class="[
                            `m-order-list-desc-value-info m-order-list-status ${getOrderStatusClass(
                              item
                            )}`,
                          ]"
                          >{
   
   { item.order_status_name }}</span
                        >
                      </div>
                      <!-- 物流状态 -->
                      <div class="m-order-list-col-width" style="width: 120px">
                        <span
                          :class="[
                            `m-order-list-desc-value-info m-order-express-type ${getExpressStatusClass(
                              item
                            )}`,
                          ]"
                          >{
   
   { item.logistics_status_name }}</span
                        >
                      </div>
                    </div>
                  </div>

                  <div class="m-order-list-operation" style="width: 120px">
                    <el-button
                      @click="handleEditModalVisible(item)"
                      type="text"
                      size="small"
                      v-if="permission.orderAfterSale"
                      >售后</el-button
                    >
                    <el-button
                      @click="handleJumpToDetail(item)"
                      type="text"
                      size="small"
                      v-if="permission.orderDetail"
                      >详情</el-button
                    >
                  </div>
                </div>
              </div>
              <div v-if="tableData.length === 0">
                <emptyData></emptyData>
              </div>
            </div>
          </div>
        </div>
    </div>
  </basic-container>
</template>

 index.css:

.m-tools-push-group {padding: 10px 10px 10px 0;box-shadow: 0 2px 12px 0 rgba(8, 2, 94, 0.5);margin: 5px 0 20px;border-radius: 10px;}
.m-entity-table .el-col-12{min-width: 490px;max-width: 490px;}
.m-entity-value{display: inline-block; width: 100px; white-space: break-spaces; vertical-align: top;}
.m-order-list-row{display:flex;padding:8px 5px;line-height:20px;}
.m-order-list-row.border1{border-right: 1px solid #EBEEF5;border-bottom: 1px solid #EBEEF5;}
.m-order-list-row.border2{border-right: 1px solid #EBEEF5;}
.m-order-list-row.border3{border-bottom: 1px solid #EBEEF5;}
.m-order-list-row-color{background: rgb(238, 241, 248);}

.m-order-list-search .el-row{margin: 0;}
.m-order-list-search .el-col{margin: 0;}

.m-order-list-desc-label{display:inline-block;font-size:12px;font-weight:400;margin:0 10px 0 0;white-space:nowrap;text-align:left;color:#000}
.m-order-list-desc-label::after{content:':'}

.m-order-list .el-table__row.expanded{display: none;}
.m-order-list .el-table__expanded-cell{padding: 0 0 0 50px!important;}
.m-order-list .el-table_1_column_1:first-child{display: inline-block;width: 1px;}

.m-order-list-table-wrap-outer{overflow-x: auto;}
.m-order-list-table-wrap{border-top: 1px solid #EBEEF5;border-left: 1px solid #EBEEF5;min-width: 1089px;}
.m-order-list-header-wrap{display: flex;padding:0;color: rgba(0,0,0,.85);font-size: 12px;font-weight: 700;background: #fafafa;line-height: 40px;}
.m-order-list-header-item{ flex: 1;min-width: 120px; text-align: center;border-right: 1px solid #EBEEF5;border-bottom: 1px solid #EBEEF5;}
.m-order-list-header-item-width{min-width: 120px; text-align: center;border-right: 1px solid #EBEEF5;border-bottom: 1px solid #EBEEF5;}

.m-order-list-content-item{display: flex; color: #606266;font-size: 12px;}
.m-order-list-content-item:nth-child(even){background: #F5F7FA;}
.m-order-list-content-item:hover{background: #eff6ff;}
.m-order-list-content-item-left{flex: 1;}
.m-order-list-content-item-header{display: flex;padding:15px 10px;border-bottom: 1px solid #EBEEF5;border-right: 1px solid #EBEEF5;}
.m-order-list-content-item-header-inner{display: flex;}
.m-order-list-desc-value-header{display:inline-block;margin: 0 10px 0 0; vertical-align:top;font-size:12px;font-weight:400;word-break:break-all;text-align:justify;color:#333;}
.m-order-list-content-item-info{display: flex;padding:0;}
.m-order-list-col{flex:1;min-width: 120px; display: flex;border-right: 1px solid #EBEEF5;border-bottom: 1px solid #EBEEF5;}
.m-order-list-col-width{display: flex;min-width: 120px; border-right: 1px solid #EBEEF5;border-bottom: 1px solid #EBEEF5;}

.m-order-list-desc-value-info{display:inline-block;padding: 0 2px;vertical-align:top;font-size:12px;font-weight:400;flex:1;line-height: 40px; word-break:break-all;text-align:justify;color:#333;text-align: center;}
.m-order-list-operation{display:flex;align-items: center;justify-content: center; vertical-align:top;font-size:12px;font-weight:400;line-height: 40px; word-break:break-all;text-align:justify;color:#333;text-align: center;border-right: 1px solid #EBEEF5;border-bottom: 1px solid #EBEEF5;}

.m-order-list-pagination{text-align: right;padding: 20px 5px;}

/* .m-order-list-search .el-col-12{min-width: 490px;max-width: 490px;} */

.m-order-list-time-range-item{max-width: 490px!important;}

.m-order-list-pagination .el-pagination.is-background .el-pager li:not(.disabled).active {background-color: #e5e4ed !important;color: #666 !important;}
.m-order-list-pagination .el-pagination.is-background .el-pager li {background-color: #fff;border: 1px solid #dddddd;border-radius: 6px;}

.m-order-list-status{font-weight: bold;color: #409EFF;}
.m-order-list-status.done{color: #67C23A;}
.m-order-list-status.unpaid{color: #6600cc;}
.m-order-list-status.wait_deliver{color: #ff9900;}
.m-order-list-status.refund_all{color: #663399;}
.m-order-list-status.refund_part{color: #cc33cc;}
.m-order-list-status.cancel_time{color: #cc3333;}
.m-order-list-status.cancel_user{color: #996633;}

.m-order-list-pay-type{font-weight: bold;color: #409EFF;}
.m-order-list-pay-type.wechat{color: #67C23A;}
.m-order-list-pay-type.zhifubao{color: #1677ff;}
.m-order-list-pay-type.doudian{color: #ff6600;}
.m-order-list-pay-type.banxuejin{color: #9900ff;}

.m-order-express-type{font-weight: bold;color: #409EFF;}
.m-order-express-type.unsend{color: #666666;}
.m-order-express-type.done{color: #67C23A;}
.m-order-express-type.wechat{color: #67C23A;}
.m-order-express-type.wechat{color: #67C23A;}

猜你喜欢

转载自blog.csdn.net/xutongbao/article/details/128495574
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
周排行
Metasploit文件目录与入侵基本概念
跨域(CORS)请求问题[No 'Access-Control-Allow-Origin' header is present on the requested resource]常见解决方案
CodeIgniter 源码解读之 CodeIgniter.php（二）
SAS入门之（四）改变数据类型
初识元组
[数学建模]数学建模算法和模型（B站视频）（二）
Nginx 服务器源码安装配置流程
C#实现语音视频录制 【基于MCapture + MFile】
开发进度4
下载安装vue的方法网址
每日归档
更多
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022