css3内容生成器
Multi-columns with CSS3 tutorial. Have you ever had the need to create multi-column layout to display any information? What looks like the columns of newspapers. I think that your answer is – yes. And many of you may have implemented it using just ordinary DIV (or other) elements, with the property float: left. More recently – CSS3 gives us his alternative. You do not need to be cut into blocks of text output – multi-column layout is quite possible to do using a single element.
CSS3教程的多栏目。 您是否曾经需要创建多列布局以显示任何信息？ 看起来像报纸的栏目。 我认为您的答案是–是的。 你们中的许多人可能只使用普通的DIV(或其他)元素，并使用float：left属性来实现它。 最近-CSS3给了我们他的选择。 您无需切成文本输出块–使用单个元素完全可以实现多列布局。
In our example we will use the new CSS3 properties: column-count, column-gap and column-rule. It is possible that not all browsers support these CSS3 styles, but I think – most newer browsers already support them. Here we see that the result should look like:
在我们的示例中，我们将使用新CSS3属性： column-count ， column-gap和column-rule。 可能并非所有浏览器都支持这些CSS3样式，但是我认为–大多数较新的浏览器已经支持它们。 在这里，我们看到结果应类似于：
现场演示
[sociallocker]
[社交储物柜]
下载结果
[/sociallocker]
[/ sociallocker]
Ok, download the example files and lets start coding !
好的，下载示例文件并开始编码！
步骤1. HTML (Step 1. HTML)
Here are full html code of our result page. Pay attention – that I have only single DIV element with text.
这是我们结果页的完整html代码。 注意–我只有一个DIV元素带有文本。
index.html (index.html)
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>Multi-columns with CSS3 | Script Tutorials</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="controls">
<input type="button" id="more_cols" value="More columns" />
<input type="button" id="less_cols" value="Less columns" />
<input type="button" id="more_gap" value="More gap" />
<input type="button" id="less_gap" value="Less gap" />
</div>
<div class="container" id="container">
<p>The King sat naked. Like a foolish pauper on the street, he sat leaning
against a cold wall, drawing in his blue, goose-bumped legs. He shivered,
with his eyes closed, he listened, but everything was quiet.</p>
<p>He awoke at midnight from a nightmare and immediatelly understood that
he was finished. Some one weezed and writhed by the door of the bedroom
suite, he heard footsteps, metalic jingling and drunken mummbling of His
Highness, Uncle Buht: "Let me through... Let me.. Break it down, hell with
it..." Wet with icy sweat, he slintly rolled off his bed, ducked into a
secter closet, and loosing himself he ran down the underground passage.
Something sqelched under his bare feet, the startled rats dashed away, but
he did not notice anything, just now, sitting next to a wall he remembered
everything; the darkness, the slippery walls, and the pain from a blow on
the head against the shakled door to the temple, and his own unberable high
yelp.</p>
<p>They shall not enter here, he thought. No one shall enter here. Only if
the King order's so. But the King shall not order... He snickered
hysterically. Oh no, the King will not order! He carefully un screwed up his
eyes and saw his blue, hairless legs with scraped knees. Still alive, he
thought. I will live, because they shall not enter here.</p>
<p>Everything in the temple was blueish from the cold light of the
lanterns -- long glowing tubes that were stretched under the ceiling. In the
center, God stood on an eminence, big, heavy, with sparkling dead eyes. The
King continuously and stupidly stared, until God was suddenly screened by a
shabby lay brother, still a greenhorn. Scraching, with an open mouth he
gazed at the naked King. The King squinted once again. Scum, he thought, a
lousy vermine, catch the mongrel and to the dogs, for them to ravage... He
reasoned that he did not remember the lout well, but he was long gone. So
scrawny, snotty... That's all right, we'll remember. We'll remeber
everything, Your Highness, Uncle Buht. During the father's reighn, I dare
say you sat quietly, drank a bit and kept silent, were afraid to be noticed,
you knew that King Prostyaga did not forget you ignoble treachery...</p>
</div>
<footer>
<h2>Multi-columns with CSS3</h2>
<a href="https://www.script-tutorials.com/how-to-do-multi-columns-with-css3/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>Multi-columns with CSS3 | Script Tutorials</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="controls">
<input type="button" id="more_cols" value="More columns" />
<input type="button" id="less_cols" value="Less columns" />
<input type="button" id="more_gap" value="More gap" />
<input type="button" id="less_gap" value="Less gap" />
</div>
<div class="container" id="container">
<p>The King sat naked. Like a foolish pauper on the street, he sat leaning
against a cold wall, drawing in his blue, goose-bumped legs. He shivered,
with his eyes closed, he listened, but everything was quiet.</p>
<p>He awoke at midnight from a nightmare and immediatelly understood that
he was finished. Some one weezed and writhed by the door of the bedroom
suite, he heard footsteps, metalic jingling and drunken mummbling of His
Highness, Uncle Buht: "Let me through... Let me.. Break it down, hell with
it..." Wet with icy sweat, he slintly rolled off his bed, ducked into a
secter closet, and loosing himself he ran down the underground passage.
Something sqelched under his bare feet, the startled rats dashed away, but
he did not notice anything, just now, sitting next to a wall he remembered
everything; the darkness, the slippery walls, and the pain from a blow on
the head against the shakled door to the temple, and his own unberable high
yelp.</p>
<p>They shall not enter here, he thought. No one shall enter here. Only if
the King order's so. But the King shall not order... He snickered
hysterically. Oh no, the King will not order! He carefully un screwed up his
eyes and saw his blue, hairless legs with scraped knees. Still alive, he
thought. I will live, because they shall not enter here.</p>
<p>Everything in the temple was blueish from the cold light of the
lanterns -- long glowing tubes that were stretched under the ceiling. In the
center, God stood on an eminence, big, heavy, with sparkling dead eyes. The
King continuously and stupidly stared, until God was suddenly screened by a
shabby lay brother, still a greenhorn. Scraching, with an open mouth he
gazed at the naked King. The King squinted once again. Scum, he thought, a
lousy vermine, catch the mongrel and to the dogs, for them to ravage... He
reasoned that he did not remember the lout well, but he was long gone. So
scrawny, snotty... That's all right, we'll remember. We'll remeber
everything, Your Highness, Uncle Buht. During the father's reighn, I dare
say you sat quietly, drank a bit and kept silent, were afraid to be noticed,
you knew that King Prostyaga did not forget you ignoble treachery...</p>
</div>
<footer>
<h2>Multi-columns with CSS3</h2>
<a href="https://www.script-tutorials.com/how-to-do-multi-columns-with-css3/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
</footer>
</body>
</html>
步骤2. CSS (Step 2. CSS)
Now – all CSS styles
现在–所有CSS样式
css / main.css (css/main.css)
*{
margin:0;
padding:0;
}
body {
background-color:#bababa;
color:#fff;
font:14px/1.3 Arial,sans-serif;
}
footer {
background-color:#212121;
bottom:0;
box-shadow: 0 -1px 2px #111111;
display:block;
height:70px;
left:0;
position:fixed;
width:100%;
z-index:100;
}
footer h2{
font-size:22px;
font-weight:normal;
left:50%;
margin-left:-400px;
padding:22px 0;
position:absolute;
width:540px;
}
footer a.stuts,a.stuts:visited{
border:none;
text-decoration:none;
color:#fcfcfc;
font-size:14px;
left:50%;
line-height:31px;
margin:23px 0 0 110px;
position:absolute;
top:0;
}
footer .stuts span {
font-size:22px;
font-weight:bold;
margin-left:5px;
}
/*new styles*/
.container {
background:#C5DFF0;
color:#000;
margin:20px auto;
padding:20px;
position:relative;
width:800px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
box-shadow:1px 1px 5px #111111;
column-count: 3;
column-gap: 3em;
column-rule: 1px dashed black;
-moz-column-count: 3;
-moz-column-gap: 3em;
-moz-column-rule: 1px dashed black;
-webkit-column-count: 3;
-webkit-column-gap: 3em;
-webkit-column-rule: 1px dashed black;
}
.controls {
background:#C5DFF0;
margin:20px auto;
padding:20px;
position:relative;
width:800px;
box-shadow:1px 1px 5px #111111;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.controls input[type=button] {
border: 1px solid #000;
background-color: #666;
box-shadow: 0 1px 0 rgba(150, 150, 150, 0.5);
color: #FFF;
cursor: pointer;
font-size: 14px;
font-weight: bold;
margin-right: 10px;
padding: 8px 12px;
}
.controls input[type=button]:hover {
background-color:#444;
}
.controls input[type=button]:active {
background-color:#000;
}
*{
margin:0;
padding:0;
}
body {
background-color:#bababa;
color:#fff;
font:14px/1.3 Arial,sans-serif;
}
footer {
background-color:#212121;
bottom:0;
box-shadow: 0 -1px 2px #111111;
display:block;
height:70px;
left:0;
position:fixed;
width:100%;
z-index:100;
}
footer h2{
font-size:22px;
font-weight:normal;
left:50%;
margin-left:-400px;
padding:22px 0;
position:absolute;
width:540px;
}
footer a.stuts,a.stuts:visited{
border:none;
text-decoration:none;
color:#fcfcfc;
font-size:14px;
left:50%;
line-height:31px;
margin:23px 0 0 110px;
position:absolute;
top:0;
}
footer .stuts span {
font-size:22px;
font-weight:bold;
margin-left:5px;
}
/*new styles*/
.container {
background:#C5DFF0;
color:#000;
margin:20px auto;
padding:20px;
position:relative;
width:800px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
box-shadow:1px 1px 5px #111111;
column-count: 3;
column-gap: 3em;
column-rule: 1px dashed black;
-moz-column-count: 3;
-moz-column-gap: 3em;
-moz-column-rule: 1px dashed black;
-webkit-column-count: 3;
-webkit-column-gap: 3em;
-webkit-column-rule: 1px dashed black;
}
.controls {
background:#C5DFF0;
margin:20px auto;
padding:20px;
position:relative;
width:800px;
box-shadow:1px 1px 5px #111111;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.controls input[type=button] {
border: 1px solid #000;
background-color: #666;
box-shadow: 0 1px 0 rgba(150, 150, 150, 0.5);
color: #FFF;
cursor: pointer;
font-size: 14px;
font-weight: bold;
margin-right: 10px;
padding: 8px 12px;
}
.controls input[type=button]:hover {
background-color:#444;
}
.controls input[type=button]:active {
background-color:#000;
}
Most imporant styles is styles of ‘.container’ selector. See how I’m using our new styles.
最重要的样式是“ .container”选择器的样式。 看看我如何使用我们的新样式。
步骤3. JavaScript (Step 3. JavaScript)
I added some JS functionality, so you can play with the styles (column-count and column-gap) in real time.
我添加了一些JS功能，因此您可以实时使用样式( column-count和column-gap )。
js / script.js (js/script.js)
$(function(){
var iColumns = 3;
var iGap = 3;
var cont = document.getElementById('container');
$('#less_cols').click(function(e) { // mouse click handler
iColumns--; // decreasing amount of columns
if (iColumns < 1) iColumns = 1;
cont.style.MozColumnCount = iColumns; // apply styles
cont.style.WebkitColumnCount = iColumns;
});
$('#more_cols').click(function(e) {
iColumns++; // increasing amount of columns
if (iColumns > 5) iColumns = 5;
cont.style.MozColumnCount = iColumns; // apply styles
cont.style.WebkitColumnCount = iColumns;
});
$('#less_gap').click(function(e) {
iGap--; // decreasing value of gap
if (iGap < 0) iGap = 0;
cont.style.MozColumnGap = iGap+'em'; // apply styles
cont.style.WebkitColumnGap = iGap+'em';
});
$('#more_gap').click(function(e) {
iGap++; // increasing value of gap
if (iGap > 5) iGap = 5;
cont.style.MozColumnGap = iGap+'em'; // apply styles
cont.style.WebkitColumnGap = iGap+'em';
});
});
$(function(){
var iColumns = 3;
var iGap = 3;
var cont = document.getElementById('container');
$('#less_cols').click(function(e) { // mouse click handler
iColumns--; // decreasing amount of columns
if (iColumns < 1) iColumns = 1;
cont.style.MozColumnCount = iColumns; // apply styles
cont.style.WebkitColumnCount = iColumns;
});
$('#more_cols').click(function(e) {
iColumns++; // increasing amount of columns
if (iColumns > 5) iColumns = 5;
cont.style.MozColumnCount = iColumns; // apply styles
cont.style.WebkitColumnCount = iColumns;
});
$('#less_gap').click(function(e) {
iGap--; // decreasing value of gap
if (iGap < 0) iGap = 0;
cont.style.MozColumnGap = iGap+'em'; // apply styles
cont.style.WebkitColumnGap = iGap+'em';
});
$('#more_gap').click(function(e) {
iGap++; // increasing value of gap
if (iGap > 5) iGap = 5;
cont.style.MozColumnGap = iGap+'em'; // apply styles
cont.style.WebkitColumnGap = iGap+'em';
});
});
现场演示
结论 (Conclusion)
I hope that our nice tips help you. Good luck!
希望我们的好提示对您有所帮助。 祝好运！
翻译自: https://www.script-tutorials.com/how-to-do-multi-columns-with-css3/
css3内容生成器
扫一扫
1723
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
