怎么用CSSFrasbox创建一个CSS比较表

这篇文章主要介绍“怎么用CSS Frasbox创建一个CSS比较表”,在日常操作中,相信很多人在怎么用CSS Frasbox创建一个CSS比较表问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么用CSS Frasbox创建一个CSS比较表”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

创新互联公司凭借在网站建设、网站推广领域领先的技术能力和多年的行业经验,为客户提供超值的营销型网站建设服务,我们始终认为:好的营销型网站就是好的业务员。我们已成功为企业单位、个人等客户提供了网站建设、成都做网站服务,以良好的商业信誉,完善的服务及深厚的技术力量处于同行领先地位。

比较表是由多个相互堆叠的ULs组成的。我将使用CSS Flex框使它们都相等的宽度,并以相同的速率扩展和收缩,因此它们的行为与表中的行类似。

One

Two

Three

Four

Five

Six

Seven

Eight

Nine

Ten

Eleven

Twelve

Thirteen

Fourteen

Fifteen

Sixteen

Seventeen

Eighteen

Nineteen

Twenty

Twenty-one

Twenty-two

Twenty-three

Twenty-four

Twenty-five

Twenty-six

Twenty-seven

Twenty-eight

Twenty-nine

Thirty

Thirty-one

Thirty-two

Thirty-three

Thirty-four

Thirty-five

Thirty-six

Thirty-seven

Thirty-eight

Thirty-nine

Forty

Forty-one

Forty-two

Forty-three

Forty-four

Forty-five

Forty-six

Forty-seven

Forty-eight

Forty-nine

Fifty

Fifty-one

"comparisontable">

    

    "row" >

            

  • "legend">Office Chairs
  •         

  • "Eurotech-chair.jpg"/>
    Eurotech
  •         

  • "Hbada-chair.jpg"/>
    Hbada
  •         

  • "Zenith-chair.jpg"/>
    Zenith
  •         

  • "amazonbasics-chair.jpg"/>
    Amazonbasics
  •     

    

    

    "row" >

            

  • "legend">Weight
  •         

  • 25kg
  •         

  • 13kg
  •         

  • 17kg
  •         

  • 28kg
  •     

    

    

    "row" >

            

  • "legend">Cost
  •         

  • $$
  •         

  • $
  •         

  • $$
  •         

  • $
  •     

    

    

    "row" >

            

  • "legend">Delivery
  •         

  • Domestic
  •         

  • International
  •         

  • International
  •         

  • Domestic
  •     

    

    

    "row" >

            

  • "legend">Verdict
  •         

  • Best ChairforBack Pain
  •         

  • Best budget chair
  •         

  • All MeshforCooling
  •         

  • Only ChairwithTop Grain Leather
  •     

    

    

每个UL中的第一个Li元素是特征/图例。为了轻松地将它们与其他的包装不同,我把那些Li元素作为一个“传奇”的CSS类。

CSS:

现在是有趣的部分-将标记转换为比较表。使用CSS FrasBox,转换UL元素相对容易,因此它们在布局、弯曲和拉伸方面是水平的,因此它们的行为更像表单元。

我已经删除了一些不必要的线,所以你可以把重点放在下面的重要位置:

One

Two

Three

Four

Five

Six

Seven

Eight

Nine

Ten

Eleven

Twelve

Thirteen

Fourteen

Fifteen

Sixteen

Seventeen

Eighteen

Nineteen

Twenty

Twenty-one

Twenty-two

Twenty-three

Twenty-four

Twenty-five

Twenty-six

Twenty-seven

Twenty-eight

Twenty-nine

Thirty

Thirty-one

Thirty-two

Thirty-three

Thirty-four

Thirty-five

Thirty-six

Thirty-seven

Thirty-eight

Thirty-nine

Forty

Forty-one

Forty-two

Forty-three

Forty-four

Forty-five

Forty-six

Forty-seven

Forty-eight

div.comparisontable{

    显示:flex;

    FLEX-Direction:Column;/* turn children ul elements into stacked rows */

}

div.comparisontable ul.row{

    列表样式:无;

    显示:flex;/* turn children li elements into flex children */

    Flex:1;

    flex-wrap: wrap;

}

div.comparisontable ul.row li{

    背景:#c9f4ca;

    Flex:1;

    PADDING:10PX;

    Border-bottom:1px solid gray;

}

/* the legend column (first li within each row) */

div.comparisontable ul.row li.legend{

    背景:#6640d8;

    color: white;

    边界:无;

    宽度:200px;

    border-bottom: 1px solid white;

}

/* very first row */

div.comparisontable ul.row:first-of-type li{

    Text-align:Center;

}

/* very last row */

div.comparisontable ul.row:last-of-type li{

    Text-align:Center;

    边界底部:无;

    P.O.Box-Shadow:0 6PX 6PX RGBA(0.0,0.23);

}

/* first and last cell within legend column */

div.comparisontable ul.row:first-of-type li.legend.legend,

div.comparisontable ul.row:last-of-type li.legend{

    背景:透明;

    盒影:无;

}

“特征列表”或“传奇”列是每行的第一个Li元素。它具有明确的宽度为200 px,不像其他的Li元素是Flex宽度(Flex:1)。

比较表的制作

现在,比较表没有响应。也就是说,即使屏幕尺寸变得非常小,每行中的“列”仍然并排。

在CSS Flex框中,通过将Flex方向属性从“行”设置为“列”,可以轻松地将Flex子元素的显示顺序从默认的“并排”行为改为“在下一个上叠加”。

现在在我的比较表中,UL元素本身是堆叠的,尽管孩子的Li元素像表中的单元格一样并排出现。当屏幕足够小的时候,我会把它们改成堆叠。

One

Two

Three

Four

Five

Six

Seven

Eight

Nine

Ten

Eleven

Twelve

Thirteen

Fourteen

Fifteen

Sixteen

Seventeen

Eighteen

Nineteen

Twenty

Twenty-one

Twenty-two

Twenty-three

Twenty-four

Twenty-five

Twenty-six

Twenty-seven

@media screen and (max-width:650px){

div.comparisontable ul.row{

    FLEX-Direction:Column;

}

div.comparisontable img{

    width: auto;

    高度:自动;

}

div.comparisontable ul.row li{

    margin-right: 0;

    width: auto;

    flex: auto;

}

/* first and last cell within legend column */

div.comparisontable ul.row:first-of-type li.legend.legend,

div.comparisontable ul.row:last-of-type li.legend{

    显示:无;

}

div.comparisontable ul.row li.legend{

    width: auto;

}

}

现在,当我调整窗口大小时,比较表崩溃,每个“单元格”出现在自己的行上:

到此,关于“怎么用CSS Frasbox创建一个CSS比较表”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


文章题目:怎么用CSSFrasbox创建一个CSS比较表
转载来于:http://pwwzsj.com/article/jjspio.html