css渐变斑马条纹_创建斑马条纹表

css渐变斑马条纹

Scenario: you are the developer of a website for a band called The Tramps, who have embarked on a cross-Canada tour. To support this you have made a tour page on the site with a table of concert dates, with buttons to buy tickets for each venue. The HTML for the table is:

场景：您是一个名为The Tramps乐队的网站的开发人员，该乐队已开始跨加拿大巡演。为了支持这一点，您在网站上创建了一个游览页面，其中包含演唱会日期表，并带有用于购买每个场地门票的按钮。该表HTML是：


	The Tramps Tour Dates - Subject To Change
	
		Date
		 Location
		 Time
	

		November 22
		 The Flying Barstool, NB
		 7.00 pm
	

		November 28
		 The Rusty Schooner, NS
		 9.00 pm
	

		December 24
		 The Empty Jug, NS
		 8.00 pm
	

		December 25
		 Lobstercatch Xmas Party
		 8.00 pm

The Tramps Tour Dates - Subject To Change
Date	Location	Time
November 22	The Flying Barstool, NB	7.00 pm
November 28	The Rusty Schooner, NS	9.00 pm
December 24	The Empty Jug, NS	8.00 pm
December 25	Lobstercatch Xmas Party	8.00 pm

This is an entirely appropriate use of a table: the concert dates are truly tabular data, with relevant, related information in each row. As we add more tour dates, we realize that the table is becoming more difficult to read. Let’s add some basic CSS to customize the appearance of the table:

这完全是一个表格的用法：演唱会日期是真正的表格数据，每行中都有相关的相关信息。随着我们增加更多的旅行日期，我们意识到表格变得越来越难以阅读。让我们添加一些基本CSS来定制表的外观：

table {
	border-collapse: collapse;
	font-family: Calluna Sans, Arial, sans-serif;
}
caption {
	font-size: larger;
	margin-bottom: 1em;
}
th { 
	background: #000; 
	color: white;
} 
td { padding: 1em; }

… but as we add still more dates, the table becomes harder and harder to read. We need a way to clearly distinguish between rows: a typical solution is to give every other row a different background color. With basic CSS we could create a class to accomplish this, as the style is used repeatedly on the page, but is not applicable to every use of the element:

…但是随着我们添加更多的日期，表格变得越来越难阅读。我们需要一种清晰地区分行的方法：一种典型的解决方案是为其他行赋予不同的背景色。使用基本的CSS，我们可以创建一个class来实现此目的，因为样式在页面上反复使用，但不适用于元素的每次使用：

tr.highlight {
	background-color: #cc9;
}

We would then modify our HTML to match the affected rows to the CSS:

然后，我们将修改HTML以将受影响的行与CSS匹配：


	The Tramps Tour Dates - Subject To Change
	
		Date
		 Location
		 Time
	

		November 22
		 The Flying Barstool, NB
		 7.00 pm
	

		November 28
		 The Rusty Schooner, NS
		 9.00 pm
	

		December 24
		 The Empty Jug, NS
		 8.00 pm
	

		December 25
		 Lobstercatch Xmas Party
		 8.00 pm

The Tramps Tour Dates - Subject To Change
Date	Location	Time
November 22	The Flying Barstool, NB	7.00 pm
November 28	The Rusty Schooner, NS	9.00 pm
December 24	The Empty Jug, NS	8.00 pm
December 25	Lobstercatch Xmas Party	8.00 pm

While there is nothing wrong with this approach - it works perfectly well if you know all of the dates and venues in advance, and nothing changes – the reality is that The Tramps are a new screamo metal band. The tour van breaks down, gigs are cancelled, the lead singer loses his voice for several days, new gigs are found on the road and added to the tour schedule, etc. In response, you are asked to constantly alter, add, and remove table rows. This disorders the table, forcing you to move and re-apply classes every time a change is made. Your attempt to make the tour schedule more legible will increase your workload exponentially.

尽管这种方法没有什么问题-如果您提前知道所有日期和地点，并且效果没有变化，则效果很好-事实是，The Tramps是一支崭新的尖叫金属乐队。游览车发生故障，演出被取消，主唱连续几天失去发言权，在路上发现新的演出并被添加到巡回行程中，等等。作为回应，要求您不断更改，添加和删除表行。这会使表混乱，迫使您每次进行更改时都要移动并重新申请课程。您尝试使旅行计划更加清晰明了将使您的工作量成倍增加。

Traditionally, this is where JavaScript or some other language has to be brought in, as basic CSS cannot handle iteration. In “traditional” CSS, elements on a web page could only have styles applied if they were in certain contexts or states, or if they had a class or id applied. There was nothing in CSS that allowed a statement like “make every fifth paragraph look this way.”

传统上，这是必须引入JavaScript或其他语言的地方，因为基本CSS无法处理迭代。在“传统” CSS中，网页上的元素只有在特定的上下文或状态下，或者在应用了class或id情况下，才可以应用样式。 CSS中没有任何东西允许这样的声明：“使每五个段落看起来都这样。”

One of the first pieces of JavaScript I ever wrote was to accomplish exactly this result. It was more than two dozen lines of code written to achieve a single effect. You can now accomplish the same appearance in a single line of CSS, while reducing markup at the same time.

我写过的第一批JavaScript之一就是要完全实现这一结果。为了达到单一效果，编写了超过两行代码。现在，您可以在一行CSS中完成相同的外观，同时减少标记。

After removing the classes from the markup (reverting to the table code we had at the start of this lesson), replace the tr.highlight declaration in the style sheet with this:

从标记中删除类之后(恢复到本课开始时使用的表代码)，将样式表中的tr.highlight声明替换为：

tr:nth-child(odd) {
	background-color: #cc9;
}

n is the first mathematical expression you learned as a child: it is the set of natural counting numbers (1, 2, 3, 4… ), incrementing to infinity. The term “child” comes from the concept of the Document Object Model: the fact that in a well-written, valid, HTML document, every element is a descendant of the html element. The and elements are the two immediate “children” of the tag, just as table rows are children of the

tag. (They are not, however, the only children of

. The

css渐变斑马条纹_创建斑马条纹表

画龙点睛 (Finishing Touches)

更多资源 (Further Resources)

你可能感兴趣的:(java,css,html,python,javascript,ViewUI)