努力的小朱同学
努力的小朱同学

CSS 之 table 表格布局

一、简介

​ 除了使用HTML的

元素外，我们还可以通过display: table/inline-table; 设置元素内部的布局类型为表格布局。并结合table-cell、table-row等相关CSS属性值可以实现HTML中
系列元素的效果，具有表头、表尾、行、单元格等概念，让元素以表格的形式进行布局。

​ 该属性只是实现了

的布局效果，对于浏览器本身来说两者并不等同。如果使用该属性则不符合标签语义化，也不利于SEO，但优点在于代码相对于
的嵌套简洁很多，并且
只能在表格内容完全加载后才显示，该属性利用的是普通元素，是逐行进行解析显示的，无需等待全部内容加载完成。

浏览器兼容性：

CSS 之 table 表格布局_第1张图片

二、系列属性

1、table系列display属性值
  • table：设置元素为块级表格元素，类似于HTML的
。
  • inline-table：设置元素为行内块表格元素，类似于HTML的
    • 。
  • table-row：设置元素为表格的行，类似于HTML的
    • 。
  • table-cell：设置元素为表格的单元格，类似于HTML的
    • 。
  • table-footer-group：设置元素为表格的表尾行，类似于HTML的
    • 。
  • table-row-group：设置元素为表格的主体内容，类似于HTML的
    • 。
  • table-column：设置元素为表格的列，类似于HTML的
    • 。
  • table-column-group：设置元素为表格的列组，类似于HTML的
    • 。
  • table-caption：设置元素为表格的标题，类似于HTML的
    • 、。
  • table-header-group：设置元素为表格的表头行，类似于HTML的
    •  。
    所有案例都以下面dom结构为基础：
    <div class="table">
	<div class="row row1">
		<div class="cell cell1">张三div>
		<div class="cell cell2">李四div>
		<div class="cell cell3">王五div>
	div>
	<div class="row row2">
		<div class="cell cell1">张三三div>
		<div class="cell cell2">李四四div>
		<div class="cell cell3">王五五div>
	div>
div>
    2、display: table;

    ​ 该属性用于创建一个块级的表格元素，类似于HTML的

    ，可以正常使用padding、margin属性，如果未给元素设置宽高，则元素的宽高将取决于内容的宽高。

    ​ 单独为某个元素设置该属性是无效的，需要与table-row、table-cell等属性结合使用，才能实现表格布局效果。

    .table {
   display: table;
   padding: 50px;
   margin: 40px;
   background: pink;
}
    页面效果：

    CSS 之 table 表格布局_第2张图片

    3、display: inline-table;

    ​ 该属性用于创建一个行内块的表格元素，类似于HTML的

    ，但是可与其他行内、行内块元素位于一行，如果未给元素设置宽高，则元素的宽高将取决于内容的宽高。

    ​ 单独为某个元素设置该属性是无效的（行内块的特性是有效的），至少需要与table-row、table-cell属性结合使用，才能实现表格布局效果。

    <style>
.table {
   display: inline-table;
   padding: 50px;
   margin: 40px;
   background: pink;
}
style>

<div class="table">
  ...
div>
<div style="display: inline-block;background: #ccc;">
  这是table下面的一个行内块元素
div>
    页面效果：

    CSS 之 table 表格布局_第3张图片

    4、display: table-row;

    ​ 该属性用于设置元素为表格布局的行，类似于HTML的

    ，内部包裹设置display: table-cell;的元素，并必须位于设置display: table/inline-table;的元素内部。

    ​ 设置该属性的元素，设置padding和margin是无效的，不会影响内容布局。同时元素设置border属性也是无效的。

    ​ 单独为某个元素设置该属性是无任何效果的，至少需要与table/inline-table、table-cell属性结合使用，才能实现表格布局效果。

    5、display: table-cell;

    ​ 该属性用于设置元素为表格的单元格，类似于HTML的

    ，内部可以包含多个设置display: table-row;的元素和其他普通元素。

    ​ display: table-footer-group;属性用于设置元素为表格的表尾行，类似于HTML的

    ，内部可以包含多个设置display: table-row;的元素和其他普通元素。

    ​ display: table-header-group;属性用于设置元素为表格的主体内容组，类似于HTML的

    ，内部可以包含多个设置display: table-row;的元素和其他普通元素。

    ​ 设置这些属性的元素，设置float、margin、padding和width是无效的，并且元素的width自适应于内容的宽度。如果设置元素的height大于元素内容的高度，则实际高度为设置的height，反之设置元素的height小于元素内容的高度，则实际高度为内容的高度。

    ​ 个人感觉这三个属性，更多是为了方便元素分组，增加代码可读性，实际意义不大。

    <style>
.table {
	display: table;
	background: pink;
}
.row {
	display: table-row;
}
.cell {
	display: table-cell;
	border: 1px solid #cccccc;
}
.header-group {
	display: table-header-group;
	width: 200px;
	height: 10px;
	margin-left: 50px;
	padding: 10px;
}
.body-group {
	display: table-row-group;
	width: 200px;
	height: 100px;
	margin-left: 50px;
	padding: 10px;
}
.footer-group {
	display: table-footer-group;
	width: 200px;
	height: 10px;
	margin-left: 50px;
	padding: 10px;
}
style>


<div class="table">
    <div class="header-group">
      <div class="row row1">
        <div class="cell cell1">header张三div>
        <div class="cell cell2">header李四div>
        <div class="cell cell3">header王五div>
      div>
      <div class="row row1">
        <div class="cell cell1">header张三div>
        <div class="cell cell2">header李四div>
        <div class="cell cell3">header王五div>
      div>
      <span>111111span>
    div>
    <div class="body-group">
      <div class="row row2">
        <div class="cell cell1">body张三三div>
        <div class="cell cell2">body李四四div>
        <div class="cell cell3">body王五五div>
      div>
      <span>222222span>
    div>
    <div class="footer-group">
      <div class="row row2">
        <div class="cell cell1">footer张三三三div>
        <div class="cell cell2">footer李四四四div>
        <div class="cell cell3">footer王五五五div>
      div>
      <span>333333span>
    div>
div>
    页面效果：

    CSS 之 table 表格布局_第5张图片

    9、display: table-column;
    10、display: table-column-group;

    ​ display: table-column;属性用于设置元素为表格的列，类似于HTML的

    ，属于一个抽象的概念，并不需要写在具体的单元格上，而是写到一个单独的元素上，按照先后顺序对应表格中单元格组成的列，必须位于设置display: table-column-group;的元素内部。

    ​ display: table-column-group;属性用于设置元素为表格的列组，类似于HTML的

    ，内部包含多个设置display: table-column;的元素，表示一组列。

    ​ 设置这俩属性的元素，设置float、margin、padding和height是无效的，width和background等属性有效，因此通常用来实现对某些列的单元格进行特殊样式操作。

    <style>
.table {
	display: table;
	background: pink;
}
.row {
	display: table-row;
}
.cell {
	display: table-cell;
	border: 1px solid #cccccc;
}
.column {
	display: table-column;
	width: 100px;
	height: 50px;
	margin-left: 50px;
	padding: 10px;
}
.column:nth-child(2) {
	background: yellow;
}
.column-group {
	display: table-column-group;
	width: 100px;
	height: 50px;
	margin-left: 50px;
	padding: 10px;
}
style>

<div class="table">
    <div class="column-group">
      
      <div class="column">div>
      <div class="column">div>
      <div class="column">div>
    div>
    <div class="row row1">
      <div class="cell">张三div>
      <div class="cell cell2">李四div>
      <div class="cell cell3">王五div>
    div>
    <div class="row row2">
      <div class="cell cell1">张三三div>
      <div class="cell cell2">李四四div>
      <div class="cell cell3">王五五五div>
    div>
div>
    页面效果：

    CSS 之 table 表格布局_第6张图片

    11、display: table-caption;

    ​ 该属性用于设置元素为表格的标题模块，类似于HTML的

    、，被设置display: table-row;的元素包裹，成为一个单元格，且位于设置display: table/inline-table;的元素内部。

    ​ 设置该属性的元素，设置padding和border有效的，但设置margin无效。

    ​ 单独为某个元素设置该属性是无任何效果的，至少需要与table/inline-table、table-row属性结合使用，才能实现表格布局效果。

    .table {
	display: table;
	padding: 50px;
	margin: 40px;
	background: pink;
}
.row {
	display: table-row;
	padding: 5px;
	margin: 5px;
	border: 1px solid red;
}
.cell {
	display: table-cell;
	padding: 10px;
	margin: 10px;
	border: 1px solid #cccccc;
}
    页面效果：

    CSS 之 table 表格布局_第4张图片

    6、display: table-header-group;
    7、display: table-footer-group;
    8、display: table-row-group;

    ​ display: table-header-group;属性用于设置元素为表格的表头行，类似于HTML的

     ，同时可以结合caption-side属性实现标题模块相对于表格区域的定位。

    <style>
.table {
	display: table;
	background: pink;
}
.row {
	display: table-row;
}
.cell {
	display: table-cell;
	border: 1px solid #cccccc;
}
.caption {
	display: table-caption;
	caption-side: bottom; /* 默认为top */
	margin: 10px;
	padding: 10px;
}
style>

  <div class="table">
    <div class="caption">
      这是表格的标题模块
    div>
    <div class="row row1">
      ...
    div>
    <div class="row row2">
      ...
    div>
div>
    页面效果：

    CSS 之 table 表格布局_第7张图片

    三、相关属性

    1、caption-side

    ​ 该属性用于设置表格的标题模块（设置display: table-caption;的元素）相对于表格的位置，该属性的属性值有两种：

    • top（默认值）：标题模块位于表格上方。
    • bottom：标题模块位于表格的下方。
    • 更多内容可查看：caption-side。
    2、border-collapse

    ​ 该属性用于设置表格内单元格的相邻边框是分开还是合并，属性值有两种：

    • separate(默认值)：设置相邻单元格的相邻边框不进行合并，相邻单元格都有自己的边框，因此表格中间的边框宽度将是表格最外侧边框宽度的两倍。而且只有此时可以通过border-spacing属性设置两个边框之间的距离。
    • collapse：设置相邻单元格的相邻边框进行合并，且合并后的边框宽度为单个边框的宽度，两个单元格共用一个边框。
    • 更多内容请查看：border-collapse。
    <style>
.table {
	display: table;
	background: pink;
	border-collapse: collapse;
}
.table2 {
	margin-top: 30px;
	border-collapse: separate;
}
.table3 {
	margin-top: 30px;
	border-collapse: separate;
	border-spacing: 5px; /* 设置相邻边框之间的间隔 */
}
.row {
	display: table-row;
}
.cell {
	display: table-cell;
	border: 1px solid #cccccc;
}
style>

  <div class="table">
    <div class="row row1">
      <div class="cell cell1">张三div>
      <div class="cell cell2">李四div>
      <div class="cell cell3">王五div>
    div>
    <div class="row row2">
      <div class="cell cell1">张三三div>
      <div class="cell cell2">李四四div>
      <div class="cell cell3">王五五五div>
    div>
  div>
  <div class="table table2">
    <div class="row row1">
      <div class="cell cell1">张三div>
      <div class="cell cell2">李四div>
      <div class="cell cell3">王五div>
    div>
    <div class="row row2">
      <div class="cell cell1">张三三div>
      <div class="cell cell2">李四四div>
      <div class="cell cell3">王五五五div>
    div>
  div>
  <div class="table table3">
    <div class="row row1">
      <div class="cell cell1">张三div>
      <div class="cell cell2">李四div>
      <div class="cell cell3">王五div>
    div>
    <div class="row row2">
      <div class="cell cell1">张三三div>
      <div class="cell cell2">李四四div>
      <div class="cell cell3">王五五五div>
    div>
  div>
    页面效果：

    CSS 之 table 表格布局_第8张图片

    4、table-layout

    ​ 该属性用于设置表格的布局算法，也就是如何分配单元格的宽度和调整表格的大小。属性值有两个：

    • auto(默认值)：表格及其单元格的宽度会根据内容自动调整大小。
    • fixed：表格和列的宽度是由 table 和 col 元素的宽度或第一行中单元格的宽度来设置的，默认一行中的单元格平分本行的宽度，如果有的单元格设置了宽度，则其余单元格平分宽度。下面行中的单元格的内容不会影响单元的宽度，但如果内容过多就很可能会溢出，因此可以结合overflow: hidden;等属性对内容进行截取。
    • 更多内容可查看：table-layout。
    <style>
    .table {
      display: table;
      margin-bottom: 30px;
      background: pink;
      table-layout: fixed;
      width: 400px;
    }

    .row {
      display: table-row;
    }

    .cell {
      display: table-cell;
      /* width: 10px; */
      border: 1px solid #cccccc;
    }


    .table2 .cell1 {
      width: 30px;
    }
style>

<div class="table">
    <div class="row row1">
      <div class="cell cell1">张三div>
      <div class="cell cell2">李四div>
      <div class="cell cell3">王五div>
    div>
    <div class="row row2">
      <div class="cell cell1">张三三div>
      <div class="cell cell2">李四四div>
      <div class="cell cell3">王五五五div>
    div>
div>
<div class="table table2">
    <div class="row row1">
      <div class="cell cell1">张三div>
      <div class="cell cell2">李四div>
      <div class="cell cell3">王五div>
    div>
    <div class="row row2">
      <div class="cell cell1">张三三div>
      <div class="cell cell2">李四四div>
      <div class="cell cell3">王五五五div>
    div>
div>
    页面效果：

    CSS 之 table 表格布局_第9张图片

    5、vertical-align

    ​ 该属性用于设置表格的单元格元素（display: table-cell;）的垂直对齐方式，也可用于设置页面中行内元素（inline）、行内块元素（inline-block）的垂直对齐方式。该属性的属性值有：

    • top(默认值)：设置单元格的内容与该行的顶部对齐。
    • bottom：设置单元格内容与该行的底部对齐。
    • middle：设置单元格内容在该行内垂直居中。
    • baseline、sub、super、text-top、text-bottom等其他属性。
    • 更多内容请查看：vertical-align。
    <style>
.table {
	display: table;
	margin-bottom: 30px;
	background: pink;
}
.row {
	display: table-row;
}
.cell {
	display: table-cell;
	height: 200px;
	border: 1px solid #cccccc;
  vertical-align: middle; /* 设置内容在行内垂直居中对齐 */
}
style>

<div class="table">
    <div class="row row1">
      <div class="cell cell1">张三div>
      <div class="cell cell2">李四div>
      <div class="cell cell3">王五div>
    div>
    <div class="row row2">
      <div class="cell cell1">张三三div>
      <div class="cell cell2">李四四div>
      <div class="cell cell3">王五五五div>
    div>
div>
    页面效果：

    CSS 之 table 表格布局_第10张图片

    四、参考资料

    table的MDN文档

    你可能感兴趣的:(HTML+CSS,css,前端)

    • Long类型前后端数据不一致 igotyback 前端
      响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
    • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
      ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
    • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
      加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
    • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
      ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
    • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
      Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
    • webpack图片等资源的处理 dmengmeng
      需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
    • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
      这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
    • 博客网站制作教程 2401_85194651 javamaven
      首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
    • 最简单将静态网页挂载到服务器上(不用nginx) 全能全知者 服务器nginx运维前端html笔记
      最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
    • 补充元象二面 Redstone Monstrosity 前端面试
      1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
    • 微信小程序开发注意事项 jun778895 微信小程序小程序
      微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
    • 字节二面 Redstone Monstrosity 前端面试
      1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
    • 前端代码上传文件 余生逆风飞翔 前端javascript开发语言
      点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
    • 《HTML 与 CSS—— 响应式设计》 陈在天box htmlcss前端
      一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
    • uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
      第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
    • html+css网页设计 旅游网站首页1个页面 html+css+js网页设计 htmlcss旅游
      html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
    • css设置当字数超过限制后以省略号（...）显示 周bro css前端vuecss3html经验分享
      1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin
    • 360前端星计划-动画可以这么玩 马小蜗
      动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
    • Vue + Express实现一个表单提交 九旬大爷的梦
      最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
    • css2中的透明 琪33
      .out{width:400px;height:400px;background-color:blue;margin:100pxauto;border:1pxsolid#000;opacity:0.6;}.in{width:200px;height:200px;background-color:red;margin:100pxauto;}
    • Nginx从入门到实践(三) 听你讲故事啊
      动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
    • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
      Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
    • 前端知识点 ZhangTao_zata 前端javascriptcss
      下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
    • 第三十一节:Vue路由:前端路由vs后端路由的了解 曹老师
      1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访
    • 华雁智科前端面试题 因为奋斗超太帅啦 前端笔试面试问题整理javascript开发语言ecmascript
      1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l
    • 如何建设数据中台（五）——数据汇集—打破企业数据孤岛 weixin_47088026 学习记录和总结中台数据中台程序人生经验分享
      数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi
    • 分布式锁和spring事务管理 暴躁的鱼 锁及事务分布式springjava
      最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据
    • Python精选200Tips：121-125 AnFany Python200+Tipspython开发语言
      Spendyourtimeonself-improvement121Requests-简化的HTTP请求处理发送GET请求发送POST请求发送PUT请求发送DELETE请求会话管理处理超时文件上传122BeautifulSoup-网页解析和抓取解析HTML和XML文档查找单个标签查找多个标签使用CSS选择器查找标签提取文本修改文档内容删除标签处理XML文档123Scrapy-强大的网络爬虫框架示例
    • 前端CSS面试常见题 剑亦未配妥 前端面试前端css面试
      边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
    • 爬虫技术抓取网站数据 Bearjumpingcandy 爬虫
      爬虫技术是一种自动化获取网站数据的技术，它可以模拟人类浏览器的行为，访问网页并提取所需的信息。以下是爬虫技术抓取网站数据的一般步骤：发起HTTP请求：爬虫首先会发送HTTP请求到目标网站，获取网页的内容。解析HTML：获取到网页内容后，爬虫会使用HTML解析器解析HTML代码，提取出需要的数据。数据提取：通过使用XPath、CSS选择器或正则表达式等工具，爬虫可以从HTML中提取出所需的数据，如文
    • 集合框架 天子之骄 java数据结构集合框架
         集合框架 集合框架可以理解为一个容器，该容器主要指映射(map)、集合(set)、数组(array)和列表(list)等抽象数据结构。 从本质上来说，Java集合框架的主要组成是用来操作对象的接口。不同接口描述不同的数据类型。   简单介绍：   Collection接口是最基本的接口，它定义了List和Set，List又定义了LinkLi
    • Table Driven（表驱动）方法实例 bijian1013 javaenumTable Driven表驱动
      实例一： /** * 驾驶人年龄段 * 保险行业，会对驾驶人的年龄做年龄段的区分判断 * 驾驶人年龄段：01-[18,25);02-[25,30);03-[30-35);04-[35,40);05-[40,45);06-[45,50);07-[50-55);08-[55,+∞) */ public class AgePeriodTest { //if...el
    • Jquery 总结 cuishikuan javajqueryAjaxWebjquery方法
      1.$.trim方法用于移除字符串头部和尾部多余的空格。如：$.trim('   Hello   ') // Hello2.$.contains方法返回一个布尔值，表示某个DOM元素（第二个参数）是否为另一个DOM元素（第一个参数）的下级元素。如：$.contains(document.documentElement, document.body); 3.$
    • 面向对象概念的提出 麦田的设计者 java面向对象面向过程
              面向对象中，一切都是由对象展开的，组织代码，封装数据。   在台湾面向对象被翻译为了面向物件编程，这充分说明了，这种编程强调实体。       下面就结合编程语言的发展史，聊一聊面向过程和面向对象。      c语言由贝尔实
    • linux网口绑定 被触发 linux
      刚在一台IBM Xserver服务器上装了RedHat Linux Enterprise AS 4，为了提高网络的可靠性配置双网卡绑定。 一、环境描述 我的RedHat Linux Enterprise AS 4安装双口的Intel千兆网卡，通过ifconfig -a命令看到eth0和eth1两张网卡。 二、双网卡绑定步骤： 2.1 修改/etc/sysconfig/network
    • XML基础语法 肆无忌惮_ xml
      一、什么是XML？ XML全称是Extensible Markup Language，可扩展标记语言。很类似HTML。XML的目的是传输数据而非显示数据。XML的标签没有被预定义，你需要自行定义标签。XML被设计为具有自我描述性。是W3C的推荐标准。   二、为什么学习XML？ 用来解决程序间数据传输的格式问题 做配置文件 充当小型数据库   三、XML与HTM
    • 为网页添加自己喜欢的字体 知了ing 字体 秒表 css
      @font-face { font-family: miaobiao;//定义字体名字 font-style: normal; font-weight: 400; src: url('font/DS-DIGI-e.eot');//字体文件 } 使用： <label style="font-size:18px;font-famil
    • redis范围查询应用-查找IP所在城市 矮蛋蛋 redis
      原文地址： http://www.tuicool.com/articles/BrURbqV 需求 根据IP找到对应的城市 原来的解决方案 oracle表（ip_country）： 查询IP对应的城市： 1.把a.b.c.d这样格式的IP转为一个数字，例如为把210.21.224.34转为3524648994 2. select city from ip_
    • 输入两个整数， 计算百分比 alleni123 java
      public static String getPercent(int x, int total){ double result=(x*1.0)/(total*1.0); System.out.println(result); DecimalFormat df1=new DecimalFormat("0.0000%");
    • 百合——————>怎么学习计算机语言 百合不是茶 java 移动开发
          对于一个从没有接触过计算机语言的人来说，一上来就学面向对象，就算是心里上面接受的了，灵魂我觉得也应该是跟不上的，学不好是很正常的现象，计算机语言老师讲的再多，你在课堂上面跟着老师听的再多，我觉得你应该还是学不会的，最主要的原因是你根本没有想过该怎么来学习计算机编程语言，记得大一的时候金山网络公司在湖大招聘我们学校一个才来大学几天的被金山网络录取，一个刚到大学的就能够去和
    • linux下tomcat开机自启动 bijian1013 tomcat
      方法一： 修改Tomcat/bin/startup.sh 为: export JAVA_HOME=/home/java1.6.0_27 export CLASSPATH=$CLASSPATH:$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar:. export PATH=$JAVA_HOME/bin:$PATH export CATALINA_H
    • spring aop实例 bijian1013 javaspringAOP
      1.AdviceMethods.java package com.bijian.study.spring.aop.schema; public class AdviceMethods { public void preGreeting() { System.out.println("--how are you!--"); } } 2.beans.x
    • [Gson八]GsonBuilder序列化和反序列化选项enableComplexMapKeySerialization bit1129 serialization
      enableComplexMapKeySerialization配置项的含义  Gson在序列化Map时，默认情况下，是调用Key的toString方法得到它的JSON字符串的Key，对于简单类型和字符串类型，这没有问题，但是对于复杂数据对象，如果对象没有覆写toString方法，那么默认的toString方法将得到这个对象的Hash地址。   GsonBuilder用于
    • 【Spark九十一】Spark Streaming整合Kafka一些值得关注的问题 bit1129 Stream
      包括Spark Streaming在内的实时计算数据可靠性指的是三种级别： 1. At most once，数据最多只能接受一次，有可能接收不到 2. At least once, 数据至少接受一次，有可能重复接收 3. Exactly once  数据保证被处理并且只被处理一次，   具体的多读几遍http://spark.apache.org/docs/lates
    • shell脚本批量检测端口是否被占用脚本 ronin47
      #!/bin/bash cat ports |while read line do#nc -z -w 10 $line nc -z -w 2 $line 58422>/dev/null2>&1if[ $?-eq 0]then echo $line:ok else echo $line:fail fi done 这里的ports 既可以是文件
    • java-2.设计包含min函数的栈 bylijinnan java
      具体思路参见：http://zhedahht.blog.163.com/blog/static/25411174200712895228171/ import java.util.ArrayList; import java.util.List; public class MinStack { //maybe we can use origin array rathe
    • Netty源码学习-ChannelHandler bylijinnan javanetty
      一般来说，“有状态”的ChannelHandler不应该是“共享”的，“无状态”的ChannelHandler则可“共享” 例如ObjectEncoder是“共享”的, 但 ObjectDecoder 不是 因为每一次调用decode方法时，可能数据未接收完全（incomplete）， 它与上一次decode时接收到的数据“累计”起来才有可能是完整的数据，是“有状态”的 p
    • java生成随机数 cngolon java
      方法一： /** * 生成随机数 * @author [email protected] * @return */ public synchronized static String getChargeSequenceNum(String pre){ StringBuffer sequenceNum = new StringBuffer(); Date dateTime = new D
    • POI读写海量数据 ctrain 海量数据
      import java.io.FileOutputStream; import java.io.OutputStream; import org.apache.poi.xssf.streaming.SXSSFRow; import org.apache.poi.xssf.streaming.SXSSFSheet; import org.apache.poi.xssf.streaming
    • mysql 日期格式化date_format详细使用 daizj mysqldate_format日期格式转换日期格式化
      日期转换函数的详细使用说明  DATE_FORMAT(date,format) Formats the date value according to the format string. The following specifiers may be used in the format string. The&n
    • 一个程序员分享8年的开发经验 dcj3sjt126com 程序员
        在中国有很多人都认为IT行为是吃青春饭的，如果过了30岁就很难有机会再发展下去!其实现实并不是这样子的，在下从事.NET及JAVA方面的开发的也有8年的时间了，在这里在下想凭借自己的亲身经历，与大家一起探讨一下。 明确入行的目的 很多人干IT这一行都冲着“收入高”这一点的，因为只要学会一点HTML, DIV+CSS，要做一个页面开发人员并不是一件难事，而且做一个页面开发人员更容
    • android欢迎界面淡入淡出效果 dcj3sjt126com android
      很多Android应用一开始都会有一个欢迎界面，淡入淡出效果也是用得非常多的，下面来实现一下。 主要代码如下： package com.myaibang.activity; import android.app.Activity;import android.content.Intent;import android.os.Bundle;import android.os.CountDown
    • linux 复习笔记之常见压缩命令 eksliang tar解压linux系统常见压缩命令linux压缩命令tar压缩
      转载请出自出处:http://eksliang.iteye.com/blog/2109693 linux中常见压缩文件的拓展名 *.gz gzip程序压缩的文件 *.bz2 bzip程序压缩的文件 *.tar tar程序打包的数据，没有经过压缩 *.tar.gz tar程序打包后，并经过gzip程序压缩 *.tar.bz2 tar程序打包后，并经过bzip程序压缩 *.zi
    • Android 应用程序发送shell命令 gqdy365 android
      项目中需要直接在APP中通过发送shell指令来控制lcd灯，其实按理说应该是方案公司在调好lcd灯驱动之后直接通过service送接口上来给APP，APP调用就可以控制了，这是正规流程，但我们项目的方案商用的mtk方案，方案公司又没人会改，只调好了驱动，让应用程序自己实现灯的控制，这不蛋疼嘛！！！！ 发就发吧！ 一、关于shell指令： 我们知道，shell指令是Linux里面带的
    • java 无损读取文本文件 hw1287789687 读取文件无损读取读取文本文件charset
      java 如何无损读取文本文件呢？ 以下是有损的 @Deprecated public static String getFullContent(File file, String charset) { BufferedReader reader = null; if (!file.exists()) { System.out.println("getFull
    • Firebase 相关文章索引 justjavac firebase
      Awesome Firebase 最近谷歌收购Firebase的新闻又将Firebase拉入了人们的视野，于是我做了这个 github 项目。 Firebase 是一个数据同步的云服务，不同于 Dropbox 的「文件」，Firebase 同步的是「数据」，服务对象是网站开发者，帮助他们开发具有「实时」（Real-Time）特性的应用。 开发者只需引用一个 API 库文件就可以使用标准 RE
    • C++学习重点 lx.asymmetric C++笔记
      1.c++面向对象的三个特性：封装性，继承性以及多态性。   2.标识符的命名规则：由字母和下划线开头，同时由字母、数字或下划线组成；不能与系统关键字重名。   3.c++语言常量包括整型常量、浮点型常量、布尔常量、字符型常量和字符串性常量。   4.运算符按其功能开以分为六类：算术运算符、位运算符、关系运算符、逻辑运算符、赋值运算符和条件运算符。 &n
    • java bean和xml相互转换 q821424508 javabeanxmlxml和bean转换java bean和xml转换
      这几天在做微信公众号 做的过程中想找个java bean转xml的工具，找了几个用着不知道是配置不好还是怎么回事，都会有一些问题， 然后脑子一热谢了一个javabean和xml的转换的工具里，自己用着还行，虽然有一些约束吧 ， 还是贴出来记录一下      顺便你提一下下，这个转换工具支持属性为集合、数组和非基本属性的对象。   packag
    • C 语言初级 位运算 1140566087 位运算c
      第十章 位运算   1、位运算对象只能是整形或字符型数据，在VC6.0中int型数据占4个字节   2、位运算符： 运算符 作用 ~ 按位求反 << 左移 >> 右移 & 按位与 ^ 按位异或 | 按位或 他们的优先级从高到低；   3、位运算符的运算功能： a、按位取反： ~01001101 = 101
    • 14点睛Spring4.1-脚本编程 wiselyman spring4
      14.1 Scripting脚本编程 脚本语言和java这类静态的语言的主要区别是:脚本语言无需编译,源码直接可运行; 如果我们经常需要修改的某些代码,每一次我们至少要进行编译,打包,重新部署的操作,步骤相当麻烦; 如果我们的应用不允许重启,这在现实的情况中也是很常见的; 在spring中使用脚本编程给上述的应用场景提供了解决方案,即动态加载bean; spring支持脚本