css多欄佈局程式碼例項

antzone發表於2017-04-05
CSS

本章節分享一段程式碼例項，它實現了多欄佈局效果，需要的朋友可以做一下參考。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
}
.col-wrapper {
  padding: 20px;
  background-color: #9F8989;
  -webkit-column-width: 220px; /*多行佈局*/
  -webkit-column-gap: 3rem; /*調節間距*/
  -webkit-column-rule: 2px dotted #ccc; /*美化多列布局*/
}
.col-wrapper h2 {
  -webkit-column-span: all;
  padding-bottom: .5rem;
}
.col-wrapper p {
  padding-bottom: 1rem;
}
.mainnav {
  width: 84%;
  background-color: #efefef;
  margin: 0 auto 1rem auto;
  padding: 1rem;
}
.mainnav ul {
  list-style-type: none;
  display: flex;
  justify-content: space-between;
}
.mainnav ul li {
  border: 1px solid #999;
  text-align: center;
  font-size: 150%;
}
.mainnav ul li a {
  padding: 10px;
}
</style>
</head>
<body>
  <div class="col-wrapper">
    <h2>Extracts from "Our Cats, by Harrison Weir"</h2>
    <p>In our urban and suburban houses what should we do without cats? In our sitting or bedrooms, our libraries, in our kitchens and storerooms, our farms, barns, and rickyards, in our docks, our granaries, our ships, and our wharves, in our corn markets, meat markets, and other places too numerous to mention, how useful they are! In our ships, however, the rats oft set them at defiance; still they are of great service.</p>
    <p>How wonderfully patient is the cat when watching for rats or mice, awaiting their egress from their place of refuge or that which is their home! How well Shakespeare in Pericles, Act iii., describes this keen attention of the cat to its natural pursuit!</p>
    <p>A slight rustle, and the fugitive comes forth; a quick, sharp, resolute motion, and the cat has proved its usefulness. Let any one have a plague of rats and mice, as I once had, and let them be delivered therefrom by cats, as I was, and they will have a lasting and kind regard for them.</p>
    <p>A friend not long since informed me that a cat at Stone's Distillery was seen to catch two rats at one time, a fore foot on each. All the cats kept at this establishment, and there are several, are of the red tabby colour, and therefore most likely all males.</p>
    <p>I am credibly informed of a still more extraordinary feat of a cat in catching mice, that of a red tabby cat which on being taken into a granary at Sevenoaks where there were a number of mice, dashed in among a retreating group, and secured four, one with each paw and two in her mouth.</p>
  </div>
  <nav class="mainnav">
    <ul>
      <li><a href="">Introductory</a></li>
      <li><a href="">The First Cat Show</a></li>
      <li><a href="">Habits</a></li>
      <li><a href="">Trained Cats</a></li>
      <li><a href="">Usefulness of Cats</a></li>
    </ul>
  </nav>
</body>
</html>

相關文章