微信小程序圣诞帽_构建圣诞快乐Web应用程序界面

daique1908

墨衍会员 · AI 创作全网分发码龄10年

关注

翻译最新推荐文章于 2026-07-08 08:46:15 发布 2.2k 阅读 AI 写同款· GEO 优化 ›

微信小程序圣诞帽

今天，我们将构建“ 圣诞快乐” Web应用程序界面； Tomas Laurinavicius的早期教程中的Photoshop布局。

这将是一个分为两部分的教程。我们将使用一些基本的响应技术和逐步增强的元素，所有这些都通过使用SASS变得更加容易。本教程不会介绍如何使应用程序在Twitter上起作用，但它将为进一步开发奠定基础。

您可以通过我们的电视广播系列Mastering Sass或访问sass-lang.com来找到有关SASS的更多信息。我在Mac上，因此我将使用出色的CodeKit处理观看和编译我的SASS样式表。 CodeKit有很多替代品，例如Koala和Scout 。它们全都提供了几乎足够的相同功能，并且当您不想摆弄命令行时，它们被证明是无价的。

因此，事不宜迟，我们是否应该开始构建页面？

切片PSD

我们的第一步是在PSD中创建所需的任何切片并将其导出到图像。

对于此特定设计，我们只需要四个图像，它们全部包含在顶部。

我们有大背景图像，顶部的圣诞树，白色的圣诞树和底部的绿色圣诞树。使用Photoshop中的“切片”工具，我们可以在要导出的每个元素周围绘制一个框。为了单独获取背景图像，我们必须在保存Web之前隐藏其上方的图层，以避免这些元素成为图像的一部分。通过按住ALT / Option并单击该图层旁边的可见性图标，我们可以快速隐藏除所需图层之外的所有图层。在Photoshop中的一组图层上执行此操作将仅显示该组的内容，并且不会影响已经隐藏的图层。

切片后，可以使用Photoshop的“另存为Web”对话框将图像导出到安全的地方。查看快速提示：使用Photoshop Actions加快工作流程，以了解有关在Photoshop中切片的更多信息。

下一步是整理文件和文件夹。

目录结构和基本HTML

为了开始在网页上工作，我们需要一些文件和文件夹。我们在这里只需要一个基本设置，因此下面的结构应该涵盖它。

现在，我们需要将之前导出的图像复制到images文件夹中，并创建一个style.scss文件来保存所有SASS声明。

请记住：当使用诸如CodeKit之类的配套应用程序时，请检查已编译CSS文件的输出路径，以确保它会出现在正确的位置。

Sass项目文件

当使用Sass以及实际上是纯CSS时，您可以将样式表分成较小的块，并将它们全部包含在一个文件中。例如，您可以使用_variables.scss “ partial”来保存所有变量声明，并可以使用_functions.scss “ partial”来保存您可能创建的任何混合。这个世界真的是您的牡蛎，但是对于这个项目，它很简单，只有一个Sass文件，所以这就是我们要做的。

我还喜欢包含Modernizr.js的副本，因此我们可以根据需要检测不同的浏览器功能。这里使用的构建包括大量CSS3和HTML5功能。

我们还需要包括在推文中可以看到的六个用户头像。这些可以在uifaces.com上以其原始形式找到，这是当我们想要在设计中使用真实面Kong时的绝佳资源。请下载您需要的六个用户头像，然后将它们弹出到images目录中的faces目录中。

最后添加的文件是normalize.css 。这是目前可用的最佳CSS重置之一，它将使我们在所有浏览器中都有良好的基础。下载最新版本并将其添加到css目录。

接下来，我们将打开index.html并添加所需的基本HTML标记。以下内容应该可以使我们顺利入门。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0">

    <title></title>
</head>
<body>
    <div class="wrap">
        <header>

        </header>
        <section class="main group">
            
            <div class="content">


            </div> <!-- content -->

        </section>
        <footer>
            
        </footer>
    </div>
</body>
</html>

这里重要的是Viewport元标记，它告诉移动浏览器使用正确的初始比例1.0，即有效的100％。请务必阅读快速提示：不要忘记视口meta标签上的下拉菜单。

设置基本的SASS样式

我认为，关于Sass的最好的事情之一就是变量。 我们将在Sass样式表中使用许多变量来保存诸如字体系列，字体大小和颜色之类的信息。检查以下内容以查看要设置的内容。

$black: #000;
$white: #FFF;
$grey: #e9e9e9;
$darkgrey: #727272;
$red: #cf2f32;
$green: #42a747;

$padding: 10px;
$margin: 10px;
$main-width: 1000px;

$font-size: 14px;
$font-family: 'Open Sans', sans-serif;
$title-font: 'Josefin Slab', serif;

顶部列出了设计中使用的颜色。这些可以轻松地从Photoshop中进行颜色选择。我总是包含$white和$black变量，以便在需要时轻松创建和控制灰色阴影。我们还提供一些标准的填充和边距量，主要内容区域的宽度以及一些字体信息。您可能在这里注意到我们使用的是“ Josefin Slab”，而不是“ Klinic Slab”。 Josefin Slab是Klinic的替代字体，可通过Google字体在网络上使用。这意味着我们可以使用简单的@import语句轻松地将其包含在此处。使用的其他字体“ Open Sans”也是如此。

接下来的四行处理我决定的各种响应性断点。我们将在此处采用移动优先方法，因此我们的断点反映了这一点。实际使用的像素值比其他任何方法都要经过反复试验，但我已经完成了艰苦的工作，因此您不必这样做！

$break-four: 1050px;
$break-three: 760px;
$break-two: 520px;
$break-one: 360px;

最后，除了Google字体导入外，我们还有另一个@import导入我们先前下载的normalize.css文件。

@import url("http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,600,700,300");
@import url("http://fonts.googleapis.com/css?family=Josefin+Slab:300,400,600,700");
@import url('normalize.css');

自定义重置样式

下一步是添加一些我们自己的重置样式。

* {
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: $font-family;
    font-size: $font-size;
    overflow-y: scroll;
    overflow-x: hidden;
}

可以肯定的是，我喜欢将所有内容的位置设置为relative ，因此，当我们使用绝对定位的元素时，我们知道它们基于其父元素。然后，如果需要，我们可以为每个元素重置此值。

我们还应该将所有元素的box-sizing属性设置为border-box. 当使用响应元素时，这特别有用，因为任何基于百分比的宽度都将包括任何填充集。这意味着您可以将两个元素以50％的宽度并排浮动，并在两个填充都知道不会破坏布局的情况下对其进行调整。这是一个非常有用CSS属性！

接下来，我们只需要为body.设置一些默认值即可body. 除了我们第一次使用Sass变量之外，这里没有什么太令人兴奋的了！好的，所以，如果一切都正确设置，保存style.scss文件将生成我们需要链接的实际样式表。

勾起来！

回到我们的index.html文件中，我们应该将链接添加到CSS和Modernizr。给这个应用一个标题可能也很好...

<title>2013 Was Awesome | Merry Xmas & a Happy New Year!</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/modernizr.js"></script>

完成后，我们可以保存我们的index.html文件并在浏览器中查看。如果看到空白的白色屏幕，请不要担心，这就是目前的样子。下一步是用一些HTML标记充实它。

编码标题

首先，让我们对标题进行编码。为此，我们将使用HTML5元素header 。在index.html内找到header并添加标题背景图片...

<body>
 <div class="wrap">
  <header>
   <img src="images/xmas-bg.jpg" alt="Merry Christmas!" class="header-image">
  </header>
  <section class="main group">
   <div class="content">

   </div> <!-- content -->
  </section>
  <footer>
  </footer>
 </div>
</body>

我们在此处将背景图片添加为img元素，因此我们可以在调整浏览器大小时轻松缩放它。 CSS背景图片（使用background-size ）可以做到这一点，但是该方法对我来说从来没有可靠地跨浏览器使用，并且由于浏览器必须始终重新绘制所有内容，因此这种方法可能会比较麻烦。给图像一个类名，以便我们可以在Sass文件中引用它。

Innards

接下来，我们将编写标题的内部部分。这将保留圣诞树，文本和Twitter连接按钮。

<div class="header-inner">

 <div class="titles">
  <div class="xmas-tree-top">
   <img src="images/xmas-tree.png" alt="Merry Christmas!">
  </div>
  <p class="title">
   2013 Was Awesome. <span>Time to say <em>'Thank You'</em></span>
  </p>
  <p class="title-small">
   and wish your friends a
  </p>
  <h1>
   <span>Merry Christmas!</span>
  </h1>
 </div>
 
 <a href="#" class="connect">Connect with Twitter</a>
 
 <img src="images/xmas-tree-green.png" alt="Merry Christmas!" class="xmas-tree-bottom">

</div>

这里有很多事情。我们有...

用一类header-inner包装div
所有title元素的包装
顶级圣诞树
主标题带副标题
副标题
圣诞快乐消息
Twitter连接按钮
最后，底部的圣诞树

哇！这样列出来使它在一个小区域中看起来像很多东西。但是，这就是我们的标头编码完成！如果您保存文件并在浏览器中查看它，它将类似于以下内容。

真好！它看起来并不多，所以我们的下一个任务是制定一些Sass规则，并使标头与设计完全相同。切换到样式表以开始。

标头样式

第一组要添加的样式如下所示：

header {
    width: 100%;
    height: 390px;
    color: $white;
    background: $grey;

    @media screen and (min-width: $break-four) {
        height: 799px;
    }
}

header .header-image {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: auto;
    max-height: 799px;
    min-height: 400px;
}

.header-inner {
    width: 90%;
    margin: 0 auto;

    @media screen and (min-width: $break-four) {
        width: 60%;
    }
}

.titles {
    padding-top: 40px;
}

在这里，我们的header具有一些默认样式。我们还必须在这里使用响应式Sass的第一部分，因为我们需要确保高度随着浏览器的变宽而增加。我认为Sass确实很有意思，因为它使我们能够使用直接嵌套在要处理的元素下的媒体查询。这大大加快了添加响应式声明所花费的时间。您会注意到我们还使用了第四个断点变量，该变量指定了桌面大小尺寸，并告诉浏览器在窗口的最小宽度等于$break-four的值时更改高度。

在这里，我们需要使标题图像绝对位于左上方。然后，我们应确保该图像随着浏览器的增长和缩小，因此将宽度设置为100％可以解决该问题。接下来的三个属性确定应如何处理高度。 auto高度可让图像在宽度变化时保留其宽高比。我们不希望它扩大到超过其实际高度，因此max-height属性可以确保这一点。同样， min-height属性将阻止图像变得小于400px。

我们的header-inner div负责保存所有标题和圣诞树图像。这意味着它必须始终在窗口中居中。我们这里的基本样式是90％的宽度，将非常适合手机和平板电脑。媒体查询告诉浏览器在桌面大小下使用60％的宽度。

因此，让我们在浏览器中看看...

左边是台式机，右边是移动机。它们看起来都很相似，但是当您更改浏览器大小时， inner-header肯定会更改宽度。大！我们继续吧。上面代码的最后一步是向.titles div添加一些填充。这将使它从窗口顶部稍微向下碰撞。

哦，圣诞树

我们的下一个挑战是顶级圣诞树。我们将使用:before和:after伪元素创建六边形形状。您可以在使用单个HTML元素构建图标中阅读有关伪元素的信息。

.header-inner .titles .xmas-tree-top {
    position: absolute;
    background: $white;
    left: 50%;
    margin-left: -37.5px;
    top: 30px;
    padding: $padding/2 $padding*2;
    width: 75px;


    @media screen and (min-width: $break-four) {
        margin-left: -58px;
        top: 80px;
        padding: $padding $padding*3.5;
        width: auto;
    }

    &:before {
        content: "";
        position: absolute;
        left: 0px;
        border: 38px solid transparent;
        border-bottom: 20px solid $white;
        top: -58px;


        @media screen and (min-width: $break-four) {
            border: 63px solid transparent;
            border-bottom: 30px solid $white;
            top: -93px;
        }
    }

    &:after {
        content: "";
        border: 38px solid transparent;
        border-top: 20px solid $white;
        position: absolute;
        bottom: -58px;
        left: 0px;

        @media screen and (min-width: $break-four) {
            border: 63px solid transparent;
            border-top: 30px solid $white;
            bottom: -93px;
        }
    }

    img {
        display: block;
        width: 100%;
        max-width: 56px;
        height: auto;
    }

}

这看起来很复杂，但实际上非常简单。 Sass在这里有很多用法，其中很多变量都可以使用。 xmas-tree-top元素本身绝对始终处于中心位置。这是通过...实现的

left: 50%;
margin-left:-37.5px;
width: 75px;

margin-left为元素宽度的一半，因此它将元素向后拉以精确居中。我们还将再次使用简单的媒体查询来获取桌面尺寸，以调整padding和top position 。

接下来的两个部分是有趣的部分！首先是:before元素。我们要使用此元素创建的是一个三角形，它位于圣诞树框的顶部。我们将利用“ 快速提示：绘制和使用CSS三角形”中介绍的技术。简单来说，我们只需要创建一个边框，该边框的宽度就是我们所需的宽度。现在，老实说，这需要经过反复试验才能正确，除非您要创建等边三角形，否则只要您使用此技术，它就可能会使用。代码中的值将创建我们需要稍微压扁的三角形。 top位置是通过将两个边界值相加而得出的，这就是我们的pseudo element的实际高度。

:after元素遵循几乎相同的模式来创建底部三角形。唯一的区别是border-top而不是border-bottom 。最后，我们必须为圣诞树图像指定一些样式。我们必须确保它是父元素的100％，直到其实际宽度。在这种情况下为56px。高度将根据当前宽度自动设置。

！花费了很多。保存所有文件，并在浏览器中查看工作成果...

优秀的。圣诞树框看起来很棒，并且可以随浏览器上下缩放。现在让我们来照顾那些标题...

那些标题

.title, .title-small, h1 {
    text-align: center;
    font-size: 36px;
    margin: 0;
    font-family: $title-font;
    font-weight: 300;
    letter-spacing: -0.03em;
}

.title {
    margin-top: 60px;
    font-size: 200%;

    span {
        display: block;
    }

    @media screen and (min-width: $break-four) {
        margin-top: 200px;
        font-size: 300%;
    }

}

.titles {

    .title-small {
        margin: $margin*2 auto 0;
        width: 100%;
        font-size: 155%;

        &:before, &:after {
            content: url(../images/xmas-tree-white.png);
            position: absolute;
            top: 2px;
        }

        &:before {
            left: 0px;
        }

        &:after {
            right: 0px;
        }

        @media screen and (min-width: $break-one) {
            font-size: 200%;
            width: 12em;
        }

    }

}

.titles h1 {
    text-transform: uppercase;
    font-size: 222%;
    border-bottom: 2px solid $white;
    width: 9em;
    margin: 20px auto 0;

    span {
        display: block;
        margin-bottom: 3px;
        border-bottom: 2px solid $white;
    }

    @media screen and (min-width: $break-two) {
        font-size: 300%;
    }

}

这里没有太多的事情发生。对.title的媒体查询可确保在桌面窗口大小时，字体大小更大并且与顶部的间距更大。我们再次使用:before和:after伪元素在较小的标题上显示两个白色的圣诞树。

要注意的另一件事是width: 12em的使用width: 12em在我们的媒体查询中， .title-small用于.title-small以及h1 。这意味着宽度是基于该元素的字体大小，而不是基于百分比值的父元素宽度。有关更多信息，请阅读从Ems中取出“ Erm ..” 。

让我们再次保存我们的Sass文件，并查看浏览器中的内容...

这看起来开始好多了！标题都很好地缩放，并在需要时移动位置。标头完成之前，我们还有两个要样式化的元素。向上和向上！

连接

.header-inner .connect {
    display: block;
    width: 195px;
    height: 50px;
    line-height: 45px;
    text-align: center;
    border-radius: 30px;
    border: 2px solid #c52f30;
    color: $red;
    margin: 30px auto 0;
    text-decoration: none;
    -webkit-transition: background 0.4s ease, color 0.4s ease;
    -moz-transition: background 0.4s ease, color 0.4s ease;
    -o-transition: background 0.4s ease, color 0.4s ease;
    -ms-transition: background 0.4s ease, color 0.4s ease;
    transition: background 0.4s ease, color 0.4s ease;

    &:hover {
        background: $red;
        color: $white;
        -webkit-transition: background 0.4s ease, color 0.4s ease;
        -moz-transition: background 0.4s ease, color 0.4s ease;
        -o-transition: background 0.4s ease, color 0.4s ease;
        -ms-transition: background 0.4s ease, color 0.4s ease;
        transition: background 0.4s ease, color 0.4s ease;
    }

}

.xmas-tree-bottom {
    display: none;
    margin: 30px auto 0;

    @media screen and (min-width: $break-four) {
        display: block;
    }
}

您将在这里注意到的第一件事是CSS3 Transitions的使用。当我们将鼠标悬停在Twitter连接按钮上时，这将使我们褪色。您必须在正常和悬停状态下都指定过渡，以使其淡入和淡出。该按钮的其他样式非常简单，我们不需要任何媒体查询，因为它足够小，可以在所有浏览器大小中保持不变。

去年圣诞节（树）

最后但并非最不重要的是底部的圣诞树。很简单，将其放在屏幕中央，并仅以基于桌面的尺寸显示它。我只是选择将树保留为移动大小还是将其隐藏。在不同的位置玩耍后，我认为它不会在小屏幕上增加用户体验，因此最好将其隐藏。

这样就包了我们的标题！保存所有文件，让我们看看现在的位置...

嗯，这更像它！当您看到辛勤工作的回报时，这真是一种很棒的感觉，不是吗？我们的标题看起来很棒，并且一切正常。下一节将开始主要内容的工作。

主要内容

好的，构建主要内容的第一步是tweet框HTML。它有点像这样：

<div class="message-box">
   <p class="date-time">22:13 - 28 November 2013</p>
     <div class="message group">
         <img src="images/faces/jl.jpg" alt="Placeholder" class="message-image">
         <div class="message-content">
           <h3>Jonny Livingston</h3>
           <p>@jonnylvng</p>
           <div>
              Happy Thanksgiving! I'm so thankful for all of you guys. Thank you for the love and support you give me.
           </div>
        </div>
    </div>
</div>

这段代码应该放在div.content并且如您所见，它由几部分组成。我们在.message div之外有.date-time段落。该元素保存图像和消息内容本身。 .message-content div在不同HTML元素中包含信息的三个部分，这意味着我们不需要类来单独设置它们的样式。如果保存文件并在浏览器中查看，则会看到：

主要内容样式

我们绝对需要一些样式来使它看起来应有的样子。让我们现在看看那些。

.main {
    background: $grey;

    .content {
        width: 100%;
        margin: 0 auto;

        @media screen and (min-width: $break-four) {
            width: $main-width;
        }

        .message-box {
            width: 100%;
            padding: $padding*3 $padding*1.5;

            @media screen and (min-width: $break-four) {
               float: left;
               width: 50%;
            }
        }

    }

}

首先，我们的main部分和content div需要一些基本样式。只需将变量的main背景设为灰色，然后将content的宽度设置为100％。您会看到这里的margin样式用于将元素居中，仅当宽度不是100％时才起作用，但是我喜欢在此处包括它，因此我们的任何响应断点都将继承它。

对于只有100％宽度和一些填充的移动设备和平板电脑布局， message-box本身也非常简单。我们的媒体查询都将基于桌面大小，将content设置为$main-width变量，并将message-box为向左浮动并覆盖content div的50％，而不是100％。就像我们在设计中看到的那样，这将使盒子彼此并排放置。如果我们保存并看一下，我们应该看到：

它肯定会成形并以正确的窗口大小更改，所以很好！

实用工具

在Sass文件末尾添加一种重要的实用程序样式，如下所示：

//Utilities
.group:after {
  content: "";
  display: table;
  clear: both;
}

这样可以确保具有此类名称的任何元素（如果它们是浮动的）都将包含其子元素。有关为何有效的更多信息，请参见Nicolas Gallagher的博客。

.date-time {
    font-weight: 400;
    color: darken($grey, 30%);
}

这里非常快速地声明了date-time元素。它应该嵌套在我们的message-box样式中。我相信这是Sass颜色功能的首次使用，总体来说，它非常有用。这会使$grey 变深30％。当您已经有一种颜色并且只想快速使用另一种颜色时，这真棒。

留言框

现在让我们进入消息框。

.message {
    padding: $padding*2;
    height: auto;
    border-radius: 3px;
    background: $white;
    text-align: center;

    @media screen and (min-width: $break-two) {
      text-align: left;
    }

    @media screen and (min-width: $break-four) {
      height: 175px;
    }

    &:before {
      content: "";
      position: absolute;
      left: 20px;
      top: -20px;
      border: 10px solid transparent;
      border-bottom: 10px solid $white;
    }

    .message-image {
      border-radius: 50%;
      width: auto;
      max-width: 99px;
      height: auto;
      float: none;

        @media screen and (min-width: $break-two) {
          float: left;
        }
    }

}

好的，这里有很多代码。在移动设备和平板电脑上，最好将这样的内容居中，因为空间不大。我们的基本message样式是通过将text-align属性设置为center来覆盖的。确保还为该框提供白色背景和较小的border-radius以匹配设计。我们为此元素设置了两个断点，因此可以确保在mobile上方的所有内容都会将text-align方式重置为左对齐，并进一步扩大窗口大小比例，设置框的高度，以便当它们浮动在旁边时彼此之间一切都很好。

哦，看！另一个:before伪元素:before 。这与顶部的圣诞树几乎相同，因为我们正在创建一个三角形，使其位于框的上方和date-time元素的下方。

现在是时候对图像进行样式设置了。对于这种设计，可能不需要放大和缩小图像，但是每当使用响应式布局时，我总是喜欢使图像具有这种行为，尤其是当它们包含在一个元素中时，该元素会在各种情况下进行大量更改大小。因此，要涵盖大多数情况，我们只需将width和height设置为auto ，并确保有一个max-width属性可以阻止图像缩放超出其父级的大小。

在移动设备上方的任何窗口大小上，我们都需要将图像float到left使其与消息内容并排放置。是时候再次保存我们的工作并切换回浏览器：

好吧，看起来好多了！剩下的只是消息内容。