Studio Francesca
响应式HTML主题
- 请勿使用除 官方版本以外的任何版本 !
- 作者： WowThemes.net
- 联系方式：
感谢您下载我们的免费主题。
正在寻找 更多免费主题和模板？ 点击 此处.
WordPress版本已上线 此处.
HTML结构
网格围绕两个关键元素构建：行和列。行创建最大宽度并包含列；列创建实际结构。为了使布局正常工作，请始终将页面内容放在行和列内。
您需要知道的是，列没有固定宽度。它们可以根据屏幕分辨率或窗口大小而变化。
我们主题的主要结构是：
每个列块的大小取决于它占用的12列中的多少。主内容+侧边栏布局示例：
主内容在此侧边栏在此
我们的文档“columns.html”如果您想查看更多这12列的变体，会很有用。
CSS文件和结构
在此主题中，我使用了三个主要的CSS文件。
- style.css – 主CSS文件（包含重置样式）；
- teal.css - 此主题的默认皮肤。
- responsive.css - 响应式布局的样式表。
为了更改模板的强调色，请替换 teal.css 在我们所有的HTML文档中，从以下位置选择您喜欢的皮肤颜色： stylesheets/skins/.
例如，如果您选择绿色皮肤，请替换：
与style.css 文件包含页面所有特定的样式。该文件使用以下内容进行分段：
JavaScript
此主题导入了几个Javascript文件，在我们的文档中根据其功能分开处理。
foundation.min.jsjquery.easing.1.3.js
elasticslideshow.js
jquery.carouFredSel-6.0.5-packed.js
jquery.cycle.js"
app.js
modernizr.foundation.js
slidepanel.js
scrolltotop.js
hoverIntent.js
superfish.js
responsivemenu.js
formvalidation.js
Elastic Slideshow
这是此主题的主滑块，位于 index.html 文档中。它使用 homepage.css 样式表和Javascript文件： jquery.easing.1.3.js 和 elasticslideshow.js.（如果您在主页以外的地方使用它，请确保已调用它）
此幻灯片的结构：两个列表，一个用于主滑块，一个用于大图下方的缩略图导航。大滑块列表包含图片以及一个带有h2和h3元素的标题。缩略图列表包含绝对元素（第一个类为ei-slider-element的列表项以及由锚点和图片（缩略图）组成的缩略图列表项）。
因此，对于您想添加的每张图片，请遵循此结构：
响应式
设计
- ...
- 幻灯片 1
- ...
将第4行和第16行替换为您自己的图片路径。在我的主题中，我使用了占位符。
Nivo Slider
这是此主题的盒式滑块，位于 index2.html 和 portofoliodetail.html 文档中。
易于管理，您只需遵循结构：
请将第2、3和4行替换为您自己的图片路径。
轮播
在我们的主题中，轮播插件用于主页，用于客户Logo展示，但您当然也可以以任何您喜欢的方式使用它。
Javascript： mk体育专注mk体育app，为用户提供专业可靠的体验。 （如果您在这些页面以外的地方使用它，请确保已调用它）
样式表： homepage.css
要将图片添加到轮播中，请遵循以下结构：
请将第3、4、5、6和7行替换为您自己的图片路径。
客户评价
在我们的主题中，客户评价显示在主页和services.html中。
Javascript： jquery.cycle.js 围绕mk体育入口，mk体育持续打磨更优质的服务。
要添加客户评价或任何您喜欢的其他内容，请遵循以下结构：
内容在此 –作者
另一内容在此 –某人
作品集与图库
默认的 style.css 包含作品集的样式表，而图库有一个额外的样式表 prettyphoto.css.所以，如果您想在主文档（作品集）以外的地方使用这些插件，请确保包含正确的样式表和Javascript。
Javascripts：
jquery.isotope.min.js 用于可过滤作品集jquery.prettyPhoto.js 用于图库。图库链接在悬停时显示（作品集图片）
custom.js 两者都用于
2列作品集结构：（代码后附有说明）
步骤 A.
注意第7、8、9行中的“nature”、“trains”、“castle”。这些是类别。用您自己的替换它们，并在需要时添加更多。
步骤 B.
第17行，在“category”之后，包含您希望此图片显示的类别（或类别）。例如：“six columns category trains nature”。所以，我只包含了两个类别：trains和nature。
步骤 C.
第24行，替换 images/yourimage1.jpg 为您自己的图片路径。
步骤 D.
第30行，替换 portofoliodetail.html 为详细项目文档的路径（链接）。
步骤 E.
第34行，重复第三步，所以替换 images/yourimage1.jpg mk体育深耕Catch every live game, no matter where you are!领域，用心服务每一位用户。
3列作品集结构：（代码后附有说明）
步骤 A.
在Dive into exciting discussions with fellow fans.方面，mk体育提供贴心周到的支持。
步骤 B.
第18行，在“category”之后，包含您希望此图片显示的类别（或类别）。例如：“six columns category trains nature”。所以，我只包含了两个类别：trains和nature。
步骤 C.
第25行，替换 images/yourimage1.jpg mk体育以Get your sports fix with lightning-fast updates and juicy insights.为核心，带来高效便捷的体验。
步骤 D.
第30行，替换 portofoliodetail.html 想了解更多A super slick and stable platform that's a joy to use.相关内容，尽在mk体育。
步骤 E.
mk体育围绕mk sports不断创新，回应用户的真实需求。 images/yourimage1.jpg 精选mk体育官网内容，mk体育与你一同发现更多精彩。
4列作品集结构：（代码后附有说明）
步骤 A.
mk体育专注mk体育app，为用户提供专业可靠的体验。
步骤 B.
围绕mk体育入口，mk体育持续打磨更优质的服务。
步骤 C.
第25行，替换 images/yourimage1.jpg 围绕mk体育入口，mk体育持续打磨更优质的服务。
步骤 D.
第29行，替换 portofoliodetail.html mk体育深耕Catch every live game, no matter where you are!领域，用心服务每一位用户。
步骤 E.
第33行，重复第三步，所以替换 images/yourimage1.jpg 在Dive into exciting discussions with fellow fans.方面，mk体育提供贴心周到的支持。
请注意图片和缩略图的路径位置，在我的主题中我使用了占位符。
联系表单
我在2个不同的页面中使用了相同的联系表单： contact.html 和 services.html. 只需在 contact.php 文件中找到以下行（如果您使用的是Notepad++编辑器，则为第23行），然后用您自己的电子邮件地址替换现有的电子邮件地址。
$to = '';
来源与致谢
我使用了以下图像、图标或其他文件，如列表所示。我对此不拥有任何版权。
- Font Awesome图标
- Foundation框架