石家庄公司网站建设：如何构建功能齐全的CSS 3内容滑翔机

内容滑块是一个伟大的方式，使一个网站更动态。石家庄公司网站建设他们添加了天赋，如果使用正确，可能是购买和后退按钮之间的区别。通常，它们是用jQuery或其他Javascript库构建的。然而，随着CSS 3的出现，我将向您展示如何只使用CSS来构建CSS。

结果不会是最有语义的东西，但它将是完全功能的。

一些简单的HTML开始

<div id="content-slider">
		<div id="content">
			
			<div id="content-inner-1">
			<div id="content-inner-2">
			<div id="content-inner-3">
			<div id="content-inner-4">
			<div id="content-inner-5">
			<div id="content-inner-6">
			
			<div id="content-inner">
				<div class="page" id="page1">
					
					<div class="page-info" id="info1">
						<h2>Page 1<h2>
						<div class="page-text">Lorem ipsum dolor sit amet, consectur whatever blah.<div>
					<div>
				<div>
				<div class="page" id="page2">
					
					<div class="page-info" id="info2">
						<h2>Page 2<h2>
						<div class="page-text">Lorem ipsum dolor sit amet, consectur whatever blah.<div>
					<div>
				<div>
				<div class="page" id="page3">
					
					<div class="page-info" id="info3">
						<h2>Page 3<h2>
						<div class="page-text">Lorem ipsum dolor sit amet, consectur whatever blah.<div>
					<div>
				<div>
				<div class="page" id="page4">
					
					<div class="page-info" id="info4">
						<h2>Page 4<h2>
						<div class="page-text">Lorem ipsum dolor sit amet, consectur whatever blah.<div>
					<div>
				<div>
				<div class="page" id="page5">
					
					<div class="page-info" id="info5">
						<h2>Page 5<h2>
						<div class="page-text">Lorem ipsum dolor sit amet, consectur whatever blah.<div>
					<div>
				<div>
				<div class="page" id="page6">
					
					<div class="page-info" id="info6">
						<h2>Page 6<h2>
						<div class="page-text">Lorem ipsum dolor sit amet, consectur whatever blah.<div>
					<div>
				<div>
			<div>		
		
		<div>
		<div>
		<div>
		<div>
		<div>
		<div>
		
		<div>
		
		<ul id="nav">
			<li class="button" id="button1"><a href="#content-inner-1"><a><li>
			<li class="button" id="button2"><a href="#content-inner-2"><a><li>
			<li class="button" id="button3"><a href="#content-inner-3"><a><li>
			<li class="button" id="button4"><a href="#content-inner-4"><a><li>
			<li class="button" id="button5"><a href="#content-inner-5"><a><li>
			<li class="button" id="button6"><a href="#content-inner-6"><a><li>
		<ul>
	<div>

当然，这看起来很吓人。非常可怕。记住，这不是地球上最语义的东西。现在让我解释一下。

我们有一个“content-slider“DIV，它保存所有的内容。我们只是“margin: 0 auto“别想了。

然后，我们有两个部分：“content“DIV和”nav“呃。内容div是保存我们所有页面的内容，“nav”ul允许我们访问不同的页面。

现在，在“content”div内部，您将注意到6个嵌套div：“content-inner-1“通过”content-inner-6“这6个div将使所有的魔术工作，我将确切地解释如何稍后。

魔法CSS

#content-slider {
font-family: arial;
width: 640px;
margin: 0 auto;
margin-top: 100px;
}

#content {
overflow: hidden;
width: 640px;
height: 480px;
-webkit-box-shadow: 0px 0px 50px 10px #c9c9c9;
-moz-box-shadow: 0px 0px 50px 10px #c9c9c9;
box-shadow: 0px 0px 50px 10px #c9c9c9;
}

#content-inner {
width:10000px;
height: 480px;
}

.page {
width: 640px;
height: 480px;
float: left;
}

就像我说的，我们对“content-slider“div是它的中心，并将它从页面顶部移动到100 px。

“content“div造型非常重要。我们将其“溢出”设置为“隐藏”-这将确保幻灯片在选定之前是不可见的。

现在，“content-inner“div保存了所有的页面。这就是为什么它的宽度为10，000 px。通常，javascript会给它适当的宽度，但是在本例中，我们没有使用Javascript。

页面有一个宽度和一个高度，它们被向左浮动以并排。

现在，我们石家庄公司网站建设有一些通用的造型。我们会把“page-info，以及“nav“.

.page-info {
height: 90px;
background-color: rgba(99, 99, 99, 0.6);
position: relative;
margin-top: 0px;
bottom: 103px;
color: #dedede;
padding-left: 20px;
padding-top: 10px;
}

.page-info h2 {
font-size: 21px;
margin-bottom: 10px;
margin-top: 0px;
color: #fafafa;
}

.page-text {
font-size: 15px;
}

正如你所看到的，它只是一些简单的样式，使页面信息半透明，并使文本清晰。

接下来，我们将添加一些漂亮的CSS 3样式到按钮。

.button {
float: left;
background: #bababa;
width: 16px;
height: 16px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
margin-left: 5px;
margin-right: 5px;
}

.button:hover {
-webkit-box-shadow: inset 0px 0px 2px 2px #d4d4d4;
-moz-box-shadow: inset 0px 0px 2px 2px #d4d4d4;
box-shadow: inset 0px 0px 2px 2px #d4d4d4;
}

.button:active {
-webkit-box-shadow: inset 0px 0px 2px 2px #7a7a7a;
-moz-box-shadow: inset 0px 0px 2px 2px #7a7a7a;
box-shadow: inset 0px 0px 2px 2px #7a7a7a;
}

.button a {
display: block;
width: 16px;
height: 16px;
}

我们做了按钮圈，并给他们嵌入的阴影，以添加一些眼睛糖果。

最后，我们将加入神奇的配料。然而，在此之前，我将解释这一切是如何工作的。

使用CSS 3:target pseudo-selector，我们可以对url中的元素进行样式化。例如：

#example {
visibility: hidden;
}

#example:target {
visibility: visible;
}

现在，如果我们在像“http://www.example.com/index.html”这样的url#例，上面的“目标”样式将被应用。在这种情况下，“示例”div将是可见的。

使用这个概念，我们可以模仿javascript单击函数。如果用户点击在指向“http://www.example.com/index.html#example”的链接上，样式将应用于“示例”。

在这种情况下，我们将使用“：Target”来使内容滑块工作。当用户点击导航中的六个按钮中的任何一个时，“内容-内部”将滑到适当的位置，就像javascript版本一样。

下面是代码：

#content-inner-1:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: 0px;
}

#content-inner-2:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: -640px;
}

#content-inner-3:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: -1280px;
}

#content-inner-4:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: -1920px;
}

#content-inner-5:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: -2560px;
}

#content-inner-6:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: -3200px;
}

结语

我们有6“content-inner-[number]“div，每个div对应于一个页面。6页是6页。

“内容-内部”div是每个“content-inner-[number]“DIV，所以当其中的任何6个”content-inner-[number]“DVS是:targeted，我们可以用“content-inner“按此分配。

由于每一页的宽度为640 px，我们只需设置content-inner“除以640的倍数。

制造这些“:target“样式工作，我们必须有指向他们的链接。因此，“nav“在书页下面。

为了真正动画片“content-inner“，我们给它通常的CSS 3动画属性，当然有供应商前缀。

好吧，有了它：一个功能齐全的，尽管不是语义的内容滑块。