请选择 进入手机版 | 继续访问电脑版

HTML5星空

CSS基本功九宫格(table)

[复制链接]
发表于 2020-6-28 22:40:11 | 显示全部楼层 |阅读模式

 主要知识点:

1. display属性

      table, table-row, table-cell
2. 类table元素的特性 

      table-layout

      border-collapse
3. 盒模型
     
box-sizing
4. 元素的定位类型
     
position
5. 伪元素和伪类选择器
     
::before, ::after
      :hover


 效果部分:


实际效果图


hover时 效果



 代码部分:

    html::

  1. <div class="table-layout jiu-gong-ge">

  2.  <div class="table-row">

  3.    <div class="table-cell lattice">1</div>

  4.    <div class="table-cell lattice">2</div>

  5.    <div class="table-cell lattice">3</div>

  6.  </div>

  7.  <div class="table-row">

  8.    <div class="table-cell lattice">4</div>

  9.    <div class="table-cell lattice">5</div>

  10.    <div class="table-cell lattice">6</div>

  11.  </div>

  12.  <div class="table-row">

  13.    <div class="table-cell lattice">7</div>

  14.    <div class="table-cell lattice">8</div>

  15.    <div class="table-cell lattice">9</div>

  16.  </div>

  17. </div>

    css::

  1. * {

  2.  margin: 0;

  3.  padding: 0;

  4. }


  5. /* 基础样式 ================================== */

  6. .jiu-gong-ge {

  7.  width: 300px;

  8.  margin: 20px 0 0 20px; /* 设置边距,便于查看 */

  9. }


  10. .jiu-gong-ge .lattice {

  11.  width: 100px;

  12.  height: 100px;

  13.  text-align: center;

  14. }


  15. /* 关键样式 ================================== */

  16. .table-layout {

  17.  display: table;

  18.  table-layout: fixed; /* 单元格的宽度由设定宽度决定,不随内容多少而发生改变 */

  19.  border-collapse: collapse;

  20. }


  21. .table-row {

  22.  display: table-row;

  23. }


  24. .table-cell {

  25.  box-sizing: border-box;

  26.  display: table-cell;

  27.  position: relative;

  28.  border: 1px solid rgba(108, 108, 35, .4);

  29.  vertical-align: middle;

  30. }


  31. /* hover - 文字效果  */

  32. .table-cell:hover {

  33.  color: rgba(247, 70, 26, 0.8);

  34. }


  35. /* hover - 边框效果 */

  36. .table-cell:hover::after {

  37.  content: '';

  38.  position: absolute;

  39.  top: -1px;

  40.  left: -1px;

  41.  width: 99px;

  42.  height: 99px;

  43.  border: 1px solid rgba(247, 70, 26, 0.8);

  44. }


优点:良好的兼容性(如下图)

不足:设置border-collapse之后,display:table的元素会在垂直方向和水平方向多出来一个边框的宽度(待优化)




回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

更多资源及Java+大数据个人原创视频,
可关注本站官方公众号观看:
快讯

     京ICP备14042305号

html5star team © 2012-2013 html5星空 Comsenz Inc.

GMT+8, 2020-7-12 05:05 , Processed in 0.256607 second(s), 47 queries .

快速回复 返回顶部 返回列表