[CSS] Introduction to CSS Columns

时间:2016-10-02 17:29:01   收藏:0   阅读:303

Learn how to use CSS columns to quickly lay out fluid columns that are responsive, degrade gracefully and don‘t require extra markup.

Notes:

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <section>
    <h class="title">News</div>
    <nav>
          
      <ul>
        <li><a href="#">World</a></li>
        <li><a href="#">U.S.</a></li>
        <li><a href="#">Politics</a></li>
        <li><a href="#">Business</a></li>
        <li><a href="#">Sports</a></li>
        <li><a href="#">Health</a></li>
        <li><a href="#">Tech</a></li>
        <li><a href="#">Science</a></li>
        <li><a href="#">Education</a></li>
        <li><a href="#">Books</a></li>
        <li><a href="#">Food</a></li>
        <li><a href="#">Movies</a></li>
        <li><a href="#">TV</a></li>
        <li><a href="#">Automobiles</a></li>
        <li><a href="#">Real Estate</a></li>
        <li><a href="#">Jobs</a></li>
        <li><a href="#">Art & Design</a></li>
        <li><a href="#">Travel</a></li>
        <li><a href="#">Subscribe</a></li>
        <li><a href="#">Archives</a></li>
      </ul>
    </nav>
  </section>
</body>

</html>
/* Demo only styles */
* {
  box-sizing: border-box;
}

body {
  background: #eee;
  font-family: ‘Karla‘, sans-serif;
  font-size: 18px;
  font-weight: bold;
}

section {
  padding: 0 2rem;
  margin: 0 auto;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding: 0.5rem 0;
}

a {
  padding: 2px 5px;
  border-radius: 3px;
  color: #1A4390;
}

a:hover {
  text-decoration: none;
  background-color: #1A3490;
  color: #FFF;
}

nav{
  columns: 3 150px;
  column-gap: 3rem;
  column-rule: 1px dashed #ccc;
  column-fill: balance;
}

.title{
  column-span: all;
}

 

 

原文:http://www.cnblogs.com/Answer1215/p/5927727.html

评论(0
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣,分享程序人生!