小河片定制网站建设:即将到来的或即将到来的建筑页面的设计与规范-极简慕枫

小河片定制网站建设:即将到来的或即将到来的建筑页面的设计与规范

2019-01-15

小河片定制网站建设

首先,我们将在Photoshop中创建一个设计,然后对站点进行编码。您还将学习构建一个伟大的倒计时计时器,并在最后我们为您提供一些伟大的指南,以建立有用的即将到来的网页,当然,举例。

检查目录并滚动到你感兴趣的地方。


目录:

  1. 在AdobePhotoshop中创建一个最小的构建页面
  2. 编写即将到来的或正在构建的页面
  3. 最后倒计时:在即将到来的页面上添加一个倒数计时器
  4. 建立一个有用的即将到来的网页指南

在AdobePhotoshop中创建一个最小的构建页面

决赛即将来临

小河片定制网站建设:即将到来的或即将到来的建筑页面的设计与规范

本教程所需的资源:

  • iconSweets 2
  • 优质像素的无缝网格模式

在这里下载PSD

第一步

小河片定制网站建设:即将到来的或即将到来的建筑页面的设计与规范

创建一个新文档,宽度为1020像素,高度为700。这个大小对于即将到来的/错误和其他类似的页面来说是很好的。使背景为浅灰色,并对其施加一些噪声(过滤器->噪声->添加噪声)。

步骤二

小河片定制网站建设:即将到来的或即将到来的建筑页面的设计与规范

创建一个700×400像素的白色形状。将填充设置为零,并应用任何无缝(透明)模式。

步骤三

小河片定制网站建设:即将到来的或即将到来的建筑页面的设计与规范

使用Helvetica在两个重量(常规和粗体)和两个大小(30和12 pt)放置两个捕捉短语/口号。最好的做法是写下一些信息来描述你即将到来的网站。

第四步

小河片定制网站建设:即将到来的或即将到来的建筑页面的设计与规范

通过使用12 px小写Helvetica和IconSweet 2集中的图标,创建两个水平元素组。每个元素必须由一个图标和一个链接组成。我将为每一行设置三个元素。

第五步

小河片定制网站建设:即将到来的或即将到来的建筑页面的设计与规范

接下来,我们将创建即将到来的一页中最重要的元素之一-倒计时计数器。通过使用圆角矩形工具(U),创建140×140像素的形状。用15%的不透明度涂抹一滴阴影。

第六步

小河片定制网站建设:即将到来的或即将到来的建筑页面的设计与规范

应用一些内阴影。即使这个形状看起来很模糊,当我们完成这个形状时,内阴影也是可见的。

步骤7

小河片定制网站建设:即将到来的或即将到来的建筑页面的设计与规范

添加一个渐变叠加效果与混合模式设置为:软光和55%的不透明度。

[地名] 阶地(英语) 8

小河片定制网站建设:即将到来的或即将到来的建筑页面的设计与规范

通过增加一次笔划完成形状小河片定制网站建设。将填充类型设置为渐变,角度设置为90度。

第九步

即将到来的佩奇-Safari

通过使用联盟哥特式字体92 px,输入一个随机数。这将显示离网站启动还有多少天。对文本和数字应用一些阴影。

第一步0

即将到来的页面-空的字段

重复这些盒子三次,并相应地放置它们。通过使用Elipse工具(U),您可以创建小黑眼圈,作为分隔框。

第一步1

小河片定制网站建设:即将到来的或即将到来的建筑页面的设计与规范

在倒计时小部件下,我们将创建一个输入表单。它将允许访问者输入他们的电子邮件,这样他们就可以在网站发布时收到通知。使用圆角矩形工具创建窗体。将其颜色设置为灰色,并应用一些内部阴影效果。

第一步2

小河片定制网站建设:即将到来的或即将到来的建筑页面的设计与规范

应用渐变叠加效果。应用相同的混合模式,不透明度为20%。

第一步3

即将到来的页眉

通过添加灰色笔画完成表单。

第一步4

HTML-结构

我们必须通过添加一个按钮来完成“订阅”小部件,该按钮将提交表单中的信息。通过使用圆角矩形工具(U),创建一个形状,这将是我们按钮的基础。应用一些内部阴影效果。

第一步5

即将到来的网页链接

我们可以应用一个很好的触摸,我们的按钮,使用一点的Bevel和浮雕。这将使我们的下半部分的按钮更深一点,一个相当不错的效果。将大小设置为2PX,将白色的不透明度设置为零,将灰色的不透明度设置为15%。

第一步6

小河片定制网站建设:即将到来的或即将到来的建筑页面的设计与规范

应用同样的软光梯度叠加效果,我们已经使用了各种元素在这个布局。

第一步7

小河片定制网站建设:即将到来的或即将到来的建筑页面的设计与规范

通过应用笔画效果完成它,一些真正的深灰色的颜色。

第一步8

即将到来-倒数计时器

通过使用Type工具和Helvetica字体,在按钮上输入一些文本。

第一步9

小河片定制网站建设:即将到来的或即将到来的建筑页面的设计与规范

在按钮下,我们将放置一些社交媒体图标。我从IconSweet 2图标组抓起了我的。给了他们一个非常明亮的颜色。为了达到“手写”的效果,我们将使用日刊字体。

要弯曲这条线,你必须创建一个斜线和应用一个弧形的翘曲文本功能。这比你想象的要容易得多,你只需要几秒钟就能达到这个效果。

最终结果(单击更大版本)

小河片定制网站建设:即将到来的或即将到来的建筑页面的设计与规范

编写即将到来的或正在构建的页面

查看演示下载源文件

如您所见,该页面包含许多渐变和阴影。我们将使用CSS 3创建它们。正如您可能知道的,CSS 3提供了许多新的属性,可以让我们在不需要使用图像的情况下创造出很酷的效果。

对于倒计时器,我们将使用jQuery和tutorialzine.com中的jQuery倒计时插件。当然,我们会定制它一点,以配合我们的设计。

在本教程中,我们还将使用一些新的HTML 5标记(并使它们在InternetExplorer 7和8上工作)和一些有趣的属性,如订阅表单中的“占位符”和“必需的”。

当电子邮件输入字段为空时,“占位符”属性允许我们在电子邮件输入字段中显示文本,而“必需”属性允许我们根据需要定义电子邮件输入字段,因此用户不能在不输入电子邮件的情况下提交表单。我们还将为这两个属性、旧浏览器和不支持jQuery的浏览器提供jQuery回退。

所以,说够了,我们开始吧。

1.档案结构

让我们创建一个新的文件夹,并将其命名为“即将到来的页面”。在这个文件夹中,我们将有以下文件和子文件夹:

  • html-我们的主要HTML文件;
  • css– the stylesheets’ folder,
    • style.css-我们的主要样式表文件,
    • reset.css-css重置(http://meyerweb.com/eric/tools/css/reset/),)
    • ie.css-InternetExplorer 7和8的样式表文件;
  • js– the folder for our JavaScript files,
    • jquery.Countdown.js-用于倒计时的jQuery插件,
    • js-我们的自定义JavaScript文件,用于初始化定时器、其他动画,以及在不支持的浏览器上为“占位符”和“必需”HTML 5属性提供回退,
    • custom.js-一个JavaScript库,用于检测浏览器是否支持“占位符”和“必需”属性;
  • 图像-图像的文件夹;
  • 字体-字体的文件夹,将包含字体,我们将使用的计时器。

2.页面结构

下面是我们页面index.html文件的主要HTML结构:







	

	Minimal Coming Soon Page

	
	
	
	

	

	
	

	
	
	

	
	
	






正如您所看到的,HTML代码非常简单,并解释了自己。在“head”标记中,我们导入了所需的所有样式表和JavaScript文件。

您可以注意到我们为InternetExplorer 7和8使用文件“ie.css”的条件注释。在这个文件中,我们将为IE7-8添加几行代码,如下所示。我们还导入JavaScript文件“html5.js”,以使IE 7和8理解新的HTML 5标记、“头”和“页脚”。

我们页面的正文也很简单。它包含标题,我们将在其中放置标题和页面的描述;以及“主”div,我们将放置链接,倒计时,订阅表单和页脚。

让我们给页面的身体造型。我们将主要在页面上使用Arial字体(除了计时器),以及重复的背景模式(在源文件中可以找到):

body {
	background: url(../images/body-pattern.jpg) top left repeat;
	font-family: Arial, Helvetica, sans-serif;
	padding-bottom: 40px;
}

3.标头

如前所述,我们页面的标题将包含标题和描述。以下是HTML代码:

We are working our butts off to finish this website

Our developer, Michael, is doing his best to finish this website before the counter, but we can’t help him.

它的风格如下:

/* ---- Header ---- */

header {
	width: 720px;
	margin: 80px auto 0 auto;
}

header h1 {
	font-size: 30px;
	font-weight: bold;
	color: #272727;
	text-shadow: 0 1px 0 #fff;
}

header p {
	margin: 20px 0 0 3px;
	font-size: 14px;
	color: #272727;
}

我们的页面现在看起来如下:

文件结构

4.主区

页面的主区域包含在上面的HTML代码中的“main”div中。此区域将包含链接、计时器、订阅表单、页脚和社交媒体箭头。

以下是主要区域的风格:

/* ---- Main Area ---- */

#main {
	position: relative;
	width: 700px;
	margin: 50px auto 0 auto;
	padding: 20px 0 0 25px;
	background: url(../images/main-content-pattern.jpg) top left repeat;
}

它有一个700像素的宽度,它的中心对齐,并有一个重复的网格模式作为背景。它也有一个相对的位置。我们需要这条线来给社交媒体箭头一个绝对的位置,如下所示。

5.链接

下面可以看到链接的HTML:


和CSS:

/* ---- Links ---- */

#links {
	width: 700px;
	font-size: 12px;
	font-weight: bold;
	color: #aaa;
	line-height: 18px;
	overflow: hidden;
}

#links a {
	position: relative;
	color: #aaa;
	text-decoration: none;
}

#links a:hover {
	color: #aaa;
	text-decoration: none;
}

.home, .support, .browser, .books, .download, .ups {
	float: left;
	width: 180px;
	margin-left: 42px;
	padding-left: 25px;
}

.home { background: url(../images/home.png) left center no-repeat; margin-left: 0; }
.support { background: url(../images/support.png) left center no-repeat; }
.browser { background: url(../images/browser.png) left center no-repeat; clear: right; }

.books, .download, .ups { margin-top: 10px; }

.books { background: url(../images/books.png) left center no-repeat; margin-left: 0; }
.download { background: url(../images/download.png) left center no-repeat; }
.ups { background: url(../images/ups.png) left center no-repeat; clear: right; }

链接区域的宽度为700像素,每个链接都有自己的图标。然后,我们玩了一点边距和填充,使他们匹配PSD的设计。我们还为链接使用了一个相对位置,因此稍后我们可以使用jQuery向它们添加一个简单的动画。

页面应该如下所示:

小河片定制网站建设:即将到来的或即将到来的建筑页面的设计与规范

6.倒计时器

对于倒计时器,我们将使用tutorialzine.com中的jQuery倒计时插件。我们的计时器将包含在“计数器”div中。以下是HTML代码:

“计数器”div将为空,因为计时器的所有HTML代码都将由jQuery插件生成。下面是插件将生成的HTML代码:

0 0 DAYS
:
0 0 HRS
:
0 0 MNTS
:
0 0 SECS

根据我们在初始化计数器时设置的时间,插件将在四个框(“天”、“小时”、“分钟”、“秒”)上显示正确的数字,并为计时器动画化。

注意:我不会在这里详细解释插件。MartinAngelov,这个插件的创建者,在解释它的工作原理方面做得很好。你可以在这里查一下教程。

现在,让我们对这个计数器的样式,使它符合我们的PSD设计:

/* ---- Counter ---- */

#counter {
	width: 700px;
	height: 145px;
	margin: 55px auto 0 auto;
	font-family: 'LeagueGothicRegular', Arial, Helvetica, sans-serif;
	font-size: 92px;
	color: #272727;
	text-shadow: 0 1px 0 #fff;
	overflow: hidden;
}

.countDays, .countHours, .countMinutes, .countSeconds {
	float: left;
	width: 102px;
	height: 138px;
	padding-left: 36px;
	background: #e7e7e7;
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.1)), to(rgba(0,0,0,.07)));
	background-image: -webkit-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07));
	background-image: -moz-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07));
	background-image: -ms-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07));
	background-image: -o-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07));
	background-image: linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07));
	border: 1px solid #ccc;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-moz-box-shadow:
		0 2px 3px 0 rgba(255,255,255,.2) inset,
		0 2px 2px 0 rgba(0,0,0,.1);
	-webkit-box-shadow:
		0 2px 3px 0 rgba(255,255,255,.2) inset,
		0 2px 2px 0 rgba(0,0,0,.1);
	box-shadow:
		0 2px 3px 0 rgba(255,255,255,.2) inset,
		0 2px 2px 0 rgba(0,0,0,.1);
}

.points {
	float: left;
	width: 40px;
	margin: 0;
	font-family: Georgia, serif;
	font-size: 44px;
	font-weight: bold;
	text-align: center;
	line-height: 138px;
	text-shadow: none;
}

.position {
	position: relative;
	float: left;
	width: 35px;
	height: 92px;
	margin: 8px 0 0 0;
}

.digit {
	position: absolute;
	top: 0;
	left: 0;
}

.boxName {
	float: left;
	width: 80px;
	margin: -5px 0 0 7px;
	font-size: 36px;
	color: #a6a6a6;
	text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

.Hours { margin-left: 5px; }
.Seconds { margin-left: 2px; }

在这里,我们已经使用了“联盟哥特式”字体,您将在源文件中找到。如果你想在你的设计上使用这个字体,你可以在这里下载它。

如您所见,我们只使用CSS 3属性来创建阴影和渐变。这些新的特性使我们可以创造复杂的设计,而不需要切片图像。这样,我们的页面非常轻量级,我们可以节省很多时间。

这里使用的CSS 3属性是:“边框半径”、“框影”、“线性梯度”和“文本阴影”。通过读取这些属性的名称,您可以很容易地理解它们所做的事情。

我们还使用了非常有趣和方便的“RGBA”属性,因为它允许我们为各种CSS属性分配透明的颜色。

现在,我们通过将这些行添加到“script.js”文件(在“js”文件夹中)来初始化倒计时器:

$(document).ready(function(){

	/* ---- Countdown timer ---- */

	$('#counter').countdown({
		timestamp : (new Date()).getTime() + 51*24*60*60*1000
	});

});

柜台将显示从现在到51天的剩余时间。我们的页面如下所示:

即将到来的网页-订阅表格

7.订阅表格

对于订阅表单,我们将使用两个新的HTML 5属性,如前所述。这些新属性是“占位符”和“必需的”。下面是我们表单的HTML代码:

我们有一个文本输入字段,用于收集用户的电子邮件和提交按钮。文本字段是必需的,所以在提交表单之前,用户必须填写电子邮件地址。当它是空的,它显示文本“输入您的电子邮件地址在这里…”。。

让我们把我们的形式:

/* ---- Subscription Form ---- */

form {
	position: relative;
	margin: 40px auto 0 auto;
}

.email {
	width: 498px;
	height: 35px;
	padding: 0 15px;
	background: #f1f1f1;
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.02)), to(rgba(0,0,0,.02)));
	background-image: -webkit-linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02));
	background-image: -moz-linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02));
	background-image: -ms-linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02));
	background-image: -o-linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02));
	background-image: linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02));
	border: 1px solid #cbcbcb;
	-moz-box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset;
	-webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset;
	box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #b3b2b2;
	font-style: italic;
}

.email:focus {
	outline: 0;
	border: 1px solid #c0c0c0;
	-moz-box-shadow: 0 2px 3px 0 rgba(0,0,0,.2) inset;
	-webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,.2) inset;
	box-shadow: 0 2px 3px 0 rgba(0,0,0,.2) inset;
}

.submit {
	width: 140px;
	height: 37px;
	margin: 0 0 0 5px;
	padding: 0;
	background: #888;
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.1)), to(rgba(0,0,0,.1)));
	background-image: -webkit-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1));
	background-image: -moz-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1));
	background-image: -ms-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1));
	background-image: -o-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1));
	background-image: linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1));
	border: 1px solid #636363;
	-moz-box-shadow:
		0 1px 2px 0 rgba(253,252,252,.35) inset,
		0 -1px 2px 0 rgba(0,0,0,.15) inset;
	-webkit-box-shadow:
		0 1px 2px 0 rgba(253,252,252,.35) inset,
		0 -1px 2px 0 rgba(0,0,0,.15) inset;
	box-shadow:
		0 1px 2px 0 rgba(253,252,252,.35) inset,
		0 -1px 2px 0 rgba(0,0,0,.15) inset;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 1px 0 rgba(0,0,0,.35);
	line-height: 13px;
	cursor: pointer;
}

.submit:hover {
	background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(255,255,255,.1)), to(rgba(0,0,0,.1)));
	background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1));
	background-image: -moz-linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1));
	background-image: -ms-linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1));
	background-image: -o-linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1));
	background-image: linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1));
	-moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,.15) inset;
	-webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.15) inset;
	box-shadow: 0 1px 2px 0 rgba(0,0,0,.15) inset;
}

.submit:active {
	-moz-box-shadow:
		0 1px 2px 0 rgba(0,0,0,.15) inset,
		0 3px 13px 3px rgba(0,0,0,.3) inset;
	-webkit-box-shadow:
		0 1px 2px 0 rgba(0,0,0,.15) inset,
		0 3px 13px 3px rgba(0,0,0,.3) inset;
	box-shadow:
		0 1px 2px 0 rgba(0,0,0,.15) inset,
		0 3px 13px 3px rgba(0,0,0,.3) inset;
	color: #ddd;
}

我们已经使用css伪类:悬停、:焦点和:Active来更改输入字段的样式,并在用户输入电子邮件、在按钮上盘旋或单击时提交按钮。

我们还使用了同样的CSS 3属性,用于倒计时定时器,“边界半径”,“框影”,“线性梯度”和“文本阴影”。

页面应该如下所示:

小河片定制网站建设:即将到来的或即将到来的建筑页面的设计与规范

如果用户单击Submit按钮,而文本字段为空,则表单的外观如下:

即将到来页脚

我们根据需要定义了文本输入字段,这样浏览器就不允许在用户空字段的情况下提交表单。

这两个新的HTML 5属性(“占位符”和“必需的”)非常有用,可以节省大量时间,但它们不受InternetExplorer 7和8等旧浏览器的支持。

为此,我们将使用现代化的Javascript库,它将让我们知道浏览器是否支持这两个属性。

当我们使用Safari浏览器时,这里出现了另一个问题。Safari不支持“必需”属性,但当检查该特性是否受支持时,现代派则返回“true”。

因此,我们必须检查浏览器是否不支持新属性,以及浏览器是否是Safari。如果是这样的话,我们必须提供一个jQuery回退,用于显示占位符文本和检测文本输入字段是否为空,如果为空,则显示警告弹出。

在我们的页面的“head”部分中包含了现代派(文件“现代化”.custom.js)之后,我们需要将这些行添加到“script.js”文件中:

/* ---- Using Modernizr to check if the "required" and "placeholder" attributes are supported ---- */

if (!Modernizr.input.placeholder) {
	$('.email').val('Input your e-mail address here...');
	$('.email').focus(function() {
		if($(this).val() == 'Input your e-mail address here...') {
			$(this).val('');
		}
	});
}

// for detecting if the browser is Safari
var browser = navigator.userAgent.toLowerCase();

if(!Modernizr.input.required || (browser.indexOf("safari") != -1 && browser.indexOf("chrome") == -1)) {
	$('form').submit(function() {
		$('.popup').remove();
		if(!$('.email').val() || $('.email').val() == 'Input your e-mail address here...') {
			$('form').append('

Please fill out this field.

');
			$('.email').focus();
			return false;
		}
	});
	$('.email').keydown(function() {
		$('.popup').remove();
	});
	$('.email').blur(function() {
		$('.popup').remove();
	});
}

您可以注意到,我们添加了一个新段落,其中包含了“小河片定制网站建设请填写此字段”。我们给它分配了“弹出”类。

下面是用于设置弹出窗口并使其出现在文本输入字段下面的CSS代码:

.popup {
	position: absolute;
	top: 45px;
	left: 0;
	width: 140px;
	padding: 10px;
	background: #e7e7e7;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
	-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #888;
}

现在,如果我们打开Safari上的页面,然后单击Submit按钮,而没有在输入字段中输入任何文本,表单将如下所示:

终积

8.脚

在我们即将到来的页面的页脚部分,我们将添加一些图标,将链接到我们的社交媒体帐户。

和CSS:

/* ---- Footer ---- */

footer {
	width: 700px;
	margin: 0 auto;
	padding: 35px 0 25px 0;
	overflow: hidden;
}

footer ul {
	float: right;
	width: 125px;
	height: 22px;
}

footer ul li {
	float: left;
}

footer a {
	position: relative;
	display: block;
	margin-left: 10px;
}

.digg {
	width: 10px;
	height: 16px;
	background: url(../images/digg.png) center center no-repeat;
}

.twitter {
	width: 21px;
	height: 16px;
	background: url(../images/twitter.png) center center no-repeat;
}

.vimeo {
	width: 16px;
	height: 16px;
	background: url(../images/vimeo.png) center center no-repeat;
}

.skype {
	width: 16px;
	height: 16px;
	background: url(../images/skype.png) center center no-repeat;
}

我们还将添加一个美丽的箭头,以给予一个专业的外观页面。为此,我们只需要一个空的div:


我们会把它写成这样:

.social-media-arrow {
	position: absolute;
	top: 125px;
	right: -95px;
	width: 108px;
	height: 256px;
	background: url(../images/social-media-arrow.png) top left no-repeat;
}

页面应该如下所示:

With-css

9.一些jQuery动画

现在我们将动画的链接和社会图标,以便当用户盘旋在他们之上,他们将缓慢移动。为此,我们需要在“script.js”文件中添加几行代码:

/* ---- Animations ---- */

$('#links a').hover(
	function(){ $(this).animate({ left: 3 }, 'fast'); },
	function(){ $(this).animate({ left: 0 }, 'fast'); }
);

$('footer a').hover(
	function(){ $(this).animate({ top: 3 }, 'fast'); },
	function(){ $(this).animate({ top: 0 }, 'fast'); }
);

10.与InternetExplorer 7-8的兼容性

由于InternetExplorer 7和8不支持新的CSS 3属性,所以在这些浏览器上看不到渐变和阴影,但是页面仍然是可用的。此外,由于我们创建的jQuery回退,订阅表单将正常工作。

为了结束本教程,我们只需将这三行添加到“ie.css”文件中:

.email {
	line-height: 35px;
}

这是因为在IE7和8上,输入字段中的文本在中间不对齐(垂直)。

Conclusion

我们终于成功了!我们创建了我们即将到来的网页,我们准备在我们的网站上使用它。我们使用了一些新的CSS 3属性和一些新的HTML 5标记和属性,它们为我们节省了大量时间,使我们的页面变得快速和轻量级。

那么,你觉得这个教程怎么样?你学到新东西了吗?另外,你对这些新的属性有什么看法?你会用它们吗?或者你想等到不同的浏览器更好地支持它们?

在下一节中,我们将集中讨论倒计时。我们已经有一个漂亮的即将到来的页面。下一个教程是上述教程的另一个版本。我们真的想给你一些很好的选择。

最后倒计时:在即将到来的页面上添加一个倒数计时器

一个还没有准备好推出的网站需要一个“即将到来”的页面来通知访问者,它将在特定的时间框架内很快启动。随着现代Web的发展演变,这个页面不仅仅是一个简单的文本页面或正在构建的图像。

设计“即将到来”页面增加了访问者的期望水平,从而使他们对即将在网站上发布的内容感到兴奋。除了设计之外,您还可以通过在页面上插入一个“NotificMe”文本框和一个“订阅按钮”来收集感兴趣用户的信息。

在今天的教程中,我们将使用基思·伍德的jQuery倒计时插件创建一个即将到来的页面,该页面上有一个倒计时器。

完成本教程所需的资源:

  • OpenSAN(Google字体)
  • 蒙特塞拉特(谷歌字体)
  • Reset.css
  • jQuery库
  • jQuery倒计时插件
  • 任何背景图像
  • 时间和耐心

File Structure

我们的文件结构将由四个文件夹和一个html文件组成:

  • index.html – this will serve as our main file all of our design will be utilize on this file
  • js folder – for our JavaScript/jQuery
  • img folder – for our images
  • css folder – for our styling (css)

我们要做什么

[演示源代码=“https:/1stwebsigner.com/demos/comingsoon2.zip”demos=“https:/1stwebsigner.com/demos/comingon/”]

新手入门

在开始之前,我们将首先添加必要的库和指向Head部分的链接。这将包括我们的CSS和JavaScript库。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name=
    "viewport">

    <title>Coming Soon with Counter</title>
    <link href=
    'http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,600,300,700,800'
    rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel=
    'stylesheet' type='text/css'>
    <link href="css/reset.css" media="screen" rel="stylesheet">
    <link href="css/style.css" media="screen" rel="stylesheet">
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
</head>

HTML

对于我们的标记,我们将把所有的东西包装到一个类容器中,它将包含我们所有的元素。这将包括标头和节元素,这些元素将保存我们的基本标记及其各自的ID和类。我们还将包括一个简单的页脚元素,它将包含我们的版权文本。

<body>
    <div class="container">
        <header>
            <h1>Our website is Coming Soon</h1>
        </header>

        <section>
            <h2>WE APOLOGIZE FOR INCONVENIENCE</h2>

            <p class="details">YOU NEED TO WAIT...</p>

            <div id="counter"></div>

            <p class="details">SEND ME DETAILS ABOUT IT</p>

            <div id="subscribe">
                <form action="" id="subscribe-form" method="post" name=
                "newsletter-form">
                    <p class="form-field"><input id="subcribe_email" name=
                    "subscribe_email" placeholder="Your email" type="email"
                    value=""></p>

                    <p class="form-submit"><input id="subscribe_submit" name=
                    "subscribe_submit" type="submit" value="Notify Me"></p>
                </form>
            </div>
        </section>

        <footer>
            <a href="https://1stwebdesigner.com/" target="_blank">Copyright
            - 1stwebdesigner.com - 2014</a>
        </footer>
    </div>

注意,我们在“通知我”表单之前使用了ID计数器。这将容纳我们的计数器,并将被jQuery代码使用。我们稍后还将在style.css文件中对其进行样式设置。

此时,您将得到与下面的图像相同的输出。

CSS

对于CSS文件,我们将首先在主体、H1、H2和容器类等基本元素上添加样式。容器类将具有百分比形式的宽度,以创建响应效果。注意CSS 3 Transform属性是在h1标记,标题标记上使用的。这将使我们的标题标签旋转360度在x轴的位置。要了解这方面的更多信息,您可以检查此资源。

body {
    color: #dadada;
    line-height: 1.75;
    width: 100%;
    background: url(../img/background.jpg)center;
    font-family: 'Open Sans';
}

h1,h2{
    color: #fff;
    line-height: 1.16667;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 2px 2px 2px rgba(150,150,150,1);
}

h1 {
    font-size: 43px;
    font-family: Montserrat;
    font-weight: 700;
    border: 2px dashed #fff;
    margin-top: 50px;
    padding: 10px;
    cursor: pointer;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all .8s ease;
}

h1:hover {
    -webkit-transform: rotateX(360deg);
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -o-transform: rotateX(360deg);
    transform: rotateX(360deg);
}

h2 {
    font-size: 30px;
    font-weight: 300;
    margin-top: 30px;
}

.container {
    width: 58%;
    margin: 40px auto 0;
}

.details {
    margin-top: 30px;
    color: #fff;
    text-align: center;
    text-shadow: 2px 2px 2px rgba(150,150,150,1);
}

接下来,让我们给表单添加一个基本的样式。这将在文本框和按钮上添加基本样式。

button,input,textarea {
    font-size: 16px;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    vertical-align: baseline;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

textarea {
    overflow: auto;
    vertical-align: top;
}

input,textarea {
    background: #6e6e6e;
    background: rgba(169,169,169,0.3);
    border: 1px solid #f4f4f4;
    color: #fff;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 12px;
    text-transform: uppercase;
}

input:focus,textarea:focus {
    outline: 0;
}

button:hover,button:focus,input[type=submit]:focus,input[type=submit]:hover {
    background: #ff8721;
    color: #fff;
    outline: 0;
}

button,input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer;
}

button,input[type=submit] {
    background: #ffab00;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}

.form-field {
    position: relative;
}

我们的下一个目标将是文本框的占位符。供应商前缀将用于针对特定浏览器样式。

::-webkit-input-placeholder {
	color: #fff;
}

::-moz-placeholder {
	color: #fff;
	opacity: 1;
}

::-ms-input-placeholder {
	color: #fff;
	opacity: 1;
}

.placeholder {
	color: #ff;
}

在设计了占位符之后,让我们现在移动到我们的计数器。如果您还记得,计数器ID用于指定计数器在标记上的位置。

现在,要设置计数器的样式,您将使用jQuery倒计时插件倒计时_节和倒计时_AUNT的默认类。Count_区段将保存计数器的标签(例如,天、小时、分钟、秒),而倒计时_AUNT将保存计数器的数字值。若要划分每个区段,请选择一个边框,边框宽为1px,颜色为白色。

#counter {
    margin-top: 28px;
}

.countdown_section {
    color: #dadada;
    display: inline-block;
    font-size: 12px;
    text-align: center;
    width: 25%;
    letter-spacing: 1px;
    border-left: 1px dashed #dadada;
    border-color: rgba(218,218,218,0.8);
    padding: 42px 12px 28px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-shadow: 2px 2px 2px rgba(150,150,150,1);
    text-transform: uppercase;
}

.countdown_section:first-child {
    border-left: 0;
}

.countdown_amount {
    color: #fff;
    display: block;
    font-family: 'Open Sans';
    font-size: 60px;
    font-weight: 700;
    letter-spacing: normal;
    line-height: 1;
}

接下来,让我们向“NotificmeForm”部分添加进一步的样式。为此区段添加最大宽度为610 px,并将位置设置为“相对”。将提交按钮对齐到文本框的右侧,并给予其绝对位置。

#subscribe {
    max-width: 610px;
    position: relative;
	margin: 20px auto 0;
}

#subscribe-form .form-field {
    margin-right: 180px;
}

#subcribe_email {
    border-right: 0;
}

#subscribe-form .form-submit {
    height: 50px;
    position: absolute;
    right: 0;
    top: 0;
    width: 180px;
}

#subcribe_email,#subscribe_submit {
    width: 100%;
    display: block;
    height: 55px;
}

最后,添加一些基本样式到我们的页脚元素。

footer {
    font-size: 13px;
    text-align: center;
    margin-top: 25px;
    text-transform: uppercase;
    text-shadow: 2px 2px 2px rgba(150,150,150,1);
}

footer a {
    color: #fff;
}

若要使整个站点响应,请添加媒体查询以在不同的视图端口上设置特定元素的样式。如果您想了解媒体查询是如何工作的,可以在这里检查。

@media only screen and (max-width: 720px) {

	footer{margin-bottom: 40px; }
}

@media only screen and (max-width: 680px) {

	.countdown_amount {
		font-size: 48px;
	}
}

@media only screen and (max-width: 540px) {
	.one-half {
		width: 100%;
	}

	.countdown_section {
		padding: 28px 6px 20px;
	}

	#subcribe_email{border: 1px solid #fff;}

	#subscribe-form .form-submit {
		margin: 0 auto;
		right: auto;
		position: static;
	}

	#subscribe-form .form-field {
		margin: 0 0 14px;
	}
}

@media only screen and (max-width: 480px) {
	h1 {
		font-size: 30px;
	}

	 h2{font-size: 25px;}

	.countdown_section {
	border: none;
		padding: 20px 20px;
		font-size: 13px;
		text-align: center;
	}
	.countdown_amount {
		font-size: 40px;
		padding: 0 0 10px 0;

	}

	#counter{width: 30%;  margin:0 auto;}
}

@media only screen and (max-width: 360px) {
     h2{font-size: 22px;}

	.countdown_section {
		padding: 21px 26px 21px 15px;
	}
	.countdown_amount {
		font-size: 36px;
	}
}

如果您要检查浏览器上的输出。您将得到类似的结果,如下图。

jQuery

注意,计数器尚未显示在页面上。要使其出现小河片定制网站建设,请在结束正文标记之前添加jQuery代码。首先,通过指定脚本的链接来加载jQuery倒计时插件。

<script type="text/javascript" src="js/jquery.countdown.min.js"></script>

接下来,添加下面的代码来显示我们的计数器。在jQuery倒计时插件的脚本链接下复制下面的代码。在下面的代码中,使用了一个要保存和实例化新日期的变量Launchdate。

您可以根据您希望设置的日期更改发射日期(根据YYYY、M-1、D日历格式)。只要注意月份从0到11之间,就像一个数组设置,然后减去它到1。

在这个例子中,该网站的发布日期将是2014年6月7日。最后,使用ID计数器调用启动日期变量。

  $(document).ready(function() {
        var launchdate = new Date(2014, 6 - 1, 7);
        $('#counter').countdown({
            until: launchdate
        });
    })(jQuery);

Conclusion

祝贺你!你刚刚用计数器创建了一个神奇的“即将到来”页面。当访问者在即将到来的页面登陆时,他们通常不会再回来查看页面,特别是如果没有足够的站点或发布日期的信息的话。

增加一个计数器会让他们小河片定制网站建设知道他们可以现场检查网站的日期。一个即将到来的网页,如果创建正确,将循环访问者,让他们订阅新闻更新,并将继续回来。

希望你喜欢这个教程,下次再见。

如果您完成了这两个教程,您现在对如何构建即将到来的页面有了相当扎实的知识。然而,在下一节中,有一些关于如何构建有用的指南。

联系电话 400-6065-301

微信咨询 寒总监