CSS 实现 选项卡消息框 和 固定列表消息盒子

选项卡消息框

源码



    
        
        position案例
        
    
    
        

The first tab

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.

The second tab

This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.

The third tab

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!

  1. dui neque eleifend lorem, a auctor libero turpis at sem.
  2. Aliquam ut porttitor urna.
  3. Nulla facilisi

效果:

CSS 实现 选项卡消息框 和 固定列表消息盒子_第1张图片

固定消息列表

源码



    
        
        position案例
        
    
    
        

Fake content

This is fake content. Your main web page contents would probably go here.

This is fake content. Your main web page contents would probably go here.

This is fake content. Your main web page contents would probably go here.

This is fake content. Your main web page contents would probably go here.

This is fake content. Your main web page contents would probably go here.

This is fake content. Your main web page contents would probably go here.

This is fake content. Your main web page contents would probably go here.

This is fake content. Your main web page contents would probably go here.

The first tab

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.

The second tab

This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.

The third tab

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!

  1. dui neque eleifend lorem, a auctor libero turpis at sem.
  2. Aliquam ut porttitor urna.
  3. Nulla facilisi

效果

CSS 实现 选项卡消息框 和 固定列表消息盒子_第2张图片

你可能感兴趣的:(CSS,前端基础,CSS选项卡,CSS,CSS消息列表,CSS基础,CSS入门)