0

嘿伙计们，我仍在为朋友设计相同的网页模型设计，我正在努力弄清楚一些事情，以便我知道未来。

首先，背景图像的位置不正确（我知道如果我将其从固定位置更改，但我想要那种滚动效果）。代码是：

.jumbotron {
background:url("http://i.imgur.com/5zm8SAo.jpg") no-repeat center center fixed;
background-size: cover;
height: 500px;
}

如果我弄乱了背景尺寸，那么尺寸不适合网站。

  1. 我将一种字体从我的计算机（我还没有设置服务器）作为 OTF 文件上传到公共字体生成器网站，当我昨晚处理它时，我让它在我的计算机上运行，​​但现在从我的办公电脑，字体默认显示。有解决方法吗？还是我需要服务器？

  2. 我想在底部的图片上添加一些翻转效果，一般放大一点，淡出并添加文字，类似于revingchamp网站（滚动到底部，没有足够的代表发布两个链接？！？）所以这个代码工作：

       <div class="col-md-4">
       <div class = "grow">  
            <div class="thumbnail">
                <img src="#" />
              </div>
            </div>
        </div>
.grow {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
 }
 .grow:hover, .grow:focus, .grow:active {
 -webkit-transform: scale(1.1);
 transform: scale(1.1);
 }

另外，由于我使用的是引导框架，当我尝试通过调用类缩略图来放大缩略图时，没有任何改变我如何使图像更大但仍然在它们所在的行中？

  1. 最后一件事是关于如何使网站的格式适应浏览器窗口、移动设备等的一般问题，以便字体不在页面上运行或顶部的徽标错位？这可能与我一直在通过 codeacademy 学习的 javascript 有关（但到目前为止，它是所有这些游戏和随机功能，而不是网站功能）。如果使窗口变小，导航菜单文本将运行到 .jumbotron div 上。

谢谢大家，我知道很多，但希望有人可以帮助我解决其中之一！

**这里是 JSFiddle** http://jsfiddle.net/thedonmon/KZ7d8/5/

4

1 回答 1

0

是的，如果您要从不同的机器访问 OTF 文件，则需要在服务器上。您应该将它们加载到服务器上，以便每个人都可以看到它们，而不仅仅是在您的本地计算机上。除非它们取自 Google-fonts，否则您可以使用它们的 API .. https://www.google.com/fonts

至于图像部分，我为您创建了一个小提琴：http: //jsfiddle.net/sburke0708/KZ7d8/18/我认为您正在寻找的是-webkit-transform:属性。确保添加其他前缀以包含其他浏览器。

您要检查媒体查询的最后一部分。这些会根据您的需求重新调整您的内容的大小。查看https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries媒体查询通常在 CSS 的末尾进行，以调整特定元素的大小以避免此问题。

于 2014-06-24T17:31:44.403 回答