微信小程序圣诞帽
在本教程中,我们将结束我们的Web应用程序前端,因此所有外观看起来都很完美,并且可以在所有屏幕尺寸上正常运行。 上一次,我们通过对消息框进行样式化来进行舍入,只剩下要做的内容。 我们可以直接潜水吗? 好!
到目前为止的故事
在这种情况下,您可能需要赶上本教程的先前部分:
留言内容
.message-content {
width: 100%;
color: darken($grey, 30%);
@media screen and (min-width: $break-two) {
width: 75%;
float: right;
}
@media screen and (min-width: $break-three) {
width: 85%;
}
@media screen and (min-width: $break-four) {
width: 75%;
}
message-content
的声明可确保宽度在浏览器调整大小时自动发挥作用。 对于小尺寸的屏幕,我们需要将其宽100%,以便它位于图像下方。 一旦我们达到了$break-two
宽度,我们就需要将内容右移并稍微拉动宽度以弥补这一点。
此处的其他断点只是确保宽度与浏览器宽度成比例,因此在平板电脑式分辨率下,我们的message-box
仍垂直堆叠,但message-content
浮动在其中,这意味着宽度为75%可能不够宽。 一旦达到基于桌面的大小,我们会将其拉回到75%的宽度,以说明message-box
处于浮动状态且变窄。
a {
color: $green;
&:hover {
color: $red;
}
}
h3, p, div {
margin: 0;
}
h3 {
font-family: $title-font;
font-size: 200%;
font-weight: 400;
letter-spacing: -0.02em;
color: $black;
}
p {
color: $red;
font-weight: 600;
}
div {
margin-top: $margin;
overflow: hidden;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
}
接下来的样式非常简单。 我们只是给任何链接提供一个带有$red
悬停状态的$green
颜色,并覆盖在message-content
包含的h3,p和div元素上设置的任何边距。 h3,p和div元素的单独样式更加精美。 h3
设置为使用$title-font
,并设置了一些letter-spacing
以仅稍微拉开间距以更紧密地匹配设计。 div
标记样式都是关于保留内容的,因此我们确保overflow
被hidden
,如果有任何溢出,我们将显示ellipsis
以指示还有更多文本。 这种事情可以通过服务器端代码来完成(也许是这样),但出于本教程的目的,可以将其包含在CSS中。
保存您的工作并转到浏览器...
看起来很棒! 我们正在进行三种略有不同的布局,所有布局均由上述简单样式控制。 这样就完成了message-box
CSS,所以我们现在要做的就是将标记复制五次,并根据设计更改内容。 如果该应用程序能够真正发挥作用,那么我们就不需要这样做,但是对于本教程而言,必须如此! 给自己五分钟的时间来复制,粘贴和更改每个框的代码。
让我们在浏览器中快速浏览一下,以检查当我们有多个message-box
时我们的样式是否正常工作...
美丽! 我们的Web应用程序现在肯定正在成形,并且我们的消息框可以在所有浏览器尺寸下正常使用。
现在,我们已经征服了大部分Web应用程序,但是仍然有一个重要的部分: footer
。 我们应用的这一部分非常重要,因为它包含了用户可以键入/发布消息的位置。 有一些相当棘手的地方,所以让我们开始吧!
页脚
首先,让我们在index.html文件中编写以下标记:
<footer>
<h4>Thank your Family, Friends, Followers</h4>
<div class="connect-box">
<div class="connected-as group">
<img src="images/faces/jl.jpg" class="connected-image" alt=""> <span>Connected as @tomaslau</span>
<a href="#" class="disconnect btn btn-grey">Disconnect</a>
</div>
<form action="" method="post">
<div class="connect-message">
<textarea name="connect" id="connect" cols="30" rows="10" placeholder="Type your message here to your friends, family and followers"></textarea>
</div>
<button id="postBtn" class="post-btn">Post 'Thank You'</button>
</form>
<div class="social-buttons group">
<a href="#" class="social-btn twitter">Tweet the Love</a>
<a href="#" class="social-btn facebook">Share on Facebook</a>
</div>
<div class="copyright">
2013 © Crafted with Love in London.
</div>
</div>
</footer>
此页脚有几节。 焦点的主要区域是中间的表单,尽管此处不一定必需,但允许用户发布其消息。 social-btn
将需要一些更改布局的样式,并且所有页脚内容必须在屏幕上居中。 让我们从顶部开始,直接进入CSS ...
footer {
padding: $padding*4;
text-align: center;
background: $white;
h4 {
margin-top: 0px;
font-family: $title-font;
font-size: 26px;
font-weight: 400;
color: $darkgrey;
}
}
首先,我们应该在footer
设置一些padding
,以将所有内容从边缘很好地推开。 为了使所有内容都集中在屏幕上,我们只需将text-align
属性设置为center。 标语/标题的样式非常简单,与我们之前为标题所做的非常相似。 让我们在浏览器中检查一下!
这是一个好的开始,但我们还有路要走! 让我们继续我们的Sass文件。
.connect-box {
width: 100%;
margin: 0 auto;
@media screen and (min-width: $break-three) {
width: 525px;
}
}
.connected-as, .connect-message {
background: lighten($grey, 4%);
}
像我们的许多元素一样,对于较小的屏幕, connect-box
应为100%宽。 然后,应在我们的$break-three
点将其切换为设计中看到的宽度525px
。 然后,我们将connected-as
和connect-message
的背景色设置为浅灰色。
“连接为”部分
.connected-as {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom: 1px solid $white;
text-align: left;
padding: $padding/2 $padding*2;
.connected-image {
width: 30px;
height: 30px;
border-radius: 50%;
float: left;
margin-right: $margin/2;
}
span {
float: left;
height: 30px;
line-height: 30px;
color: $darkgrey;
}
.disconnect {
position: absolute;
top: -10px;
right: -10px;
padding: $padding/2 $padding;
margin-top: 3px;
border-radius: 20px;
background: $white;
text-decoration: none;
color: $darkgrey;
text-transform: uppercase;
font-size: 80%;
&:hover {
background: $red;
color: $white;
}
@media screen and (min-width: $break-two) {
position: static;
float: right;
}
}
}
CSS的这一大部分是用于connect-box
的顶部。 第一步是舍入connected-as
右上和左上。 我们还希望此框与下面的部分之间有细微的分隔,因此简单的1px solid $white
边框将很好地完成此操作。 最后,我们需要一些填充,但是我们需要比顶部和底部更多的填充,因此为了保持美观和整洁,我们只需使用$padding
变量并将顶部和底部除以二,然后乘以左右两个。 这是一个很好的例子,说明更改变量值仍然可以使所有内容保持适当的比例。
Twitter的详细信息
接下来的两个声明控制连接的用户的Twitter个人资料图像及其@username。 为了保持标准,我们在CSS中设置了图像的宽度和高度,因此我们知道图像将始终是正确大小的正方形。 要使其显示为圆形,只需对其应用50%的border-radius
。 个人资料图片和@username都应向左浮动,我们应该给@username留一些空白以将其从个人资料图片中推开。
断开按钮
disconnect
按钮正在进行一些其他操作。 在小屏幕分辨率下,我们需要此按钮与该框内的其他文本分开,所以我决定一个不错的选择是将其绝对定位在容器的上方和上方。 顶部和右侧的-10px
位置很好。 如果您认为它可以放置得更好,则不妨尝试一下。 此处的其他样式通过简单的hover
状态控制外观,并添加漂亮的加粗$red
颜色以强调断开动作。 这里一点点的响应性只会将按钮踢回到文档流中,并使其浮动到正确的位置,因此它位于Twitter详细信息的对面。 任何高于或等于$break-two
东西都会发生这种情况。
保存,保存,保存! 是时候再次看看:
看起来不错! 我们现在非常接近完成此任务。 接下来是消息框区域。
留言框
.connect-message {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
textarea {
border: none;
background: transparent;
width: 100%;
height: 130px;
padding: $padding*2;
-webkit-transition: box-shadow 0.4s ease;
-moz-transition: box-shadow 0.4s ease;
-o-transition: box-shadow 0.4s ease;
-ms-transition: box-shadow 0.4s ease;
transition: box-shadow 0.4s ease;
&:focus {
outline: none;
-webkit-box-shadow: inset 0px 0px 20px darken($grey, 10%);
box-shadow: inset 0px 0px 20px darken($grey, 10%);
-webkit-transition: box-shadow 0.4s ease;
-moz-transition: box-shadow 0.4s ease;
-o-transition: box-shadow 0.4s ease;
-ms-transition: box-shadow 0.4s ease;
transition: box-shadow 0.4s ease;
}
}
}
该块应放置在connected-as
块之后,但仍应放在整个footer
声明中。
connect-message
框在左下方和右下方具有圆角,以完成具有圆角的整个容器的外观。 textarea本身肯定需要一些样式,因为浏览器的默认设置很丑陋! 这些样式非常简单,但是您可以看到我们为box-shadow
添加了CSS Transition。 该设计没有显示聚焦状态应该是什么样子,因此我决定在盒子内部始终有一个微妙的阴影褪色。 当失去焦点时,它会逐渐消失。
让我们看看它在起作用吗?
我认为这看起来不错! 盒子阴影可能不符合您的喜好,因此请尝试一下以获取您认为正确的东西。
发表“谢谢”
.post-btn {
width: 100%;
text-align: center;
padding: $padding*2;
margin-top: $margin*2;
background: $green;
color: $white;
font-weight: 500;
border: none;
border-radius: 5px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
&:hover {
background: lighten($green, 10%);
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
}
}
所有重要的“谢谢”按钮! 这里的样式很简单。 该按钮应始终填充容器的整个宽度。 还应该将其从消息区域中移开一点,以便在此处留出一些margin-top
。 我们还有另一个过渡声明,但是这次将其设置为all
,以便为每个具有值更改的属性设置动画以使所有内容保持平滑。 这也意味着,将来我们可以添加其他样式,例如悬停时进行color
更改,并且这些样式仍将保持动画状态。
保存文件,再看一下:
可爱。 这正是我们想要的。 是时候设计这些社交媒体链接了。
社交媒体按钮
.social-buttons {
padding-left: 0px;
margin-top: $margin*2;
@media screen and (min-width: $break-three) {
padding: $padding*3 0 $padding*3 117px;
margin-top: 0px;
}
.social-btn {
padding: $padding/2 14px;
width: 100%;
display: block;
margin: $margin/2 0;
border-radius: 20px;
text-align: center;
color: $white;
text-decoration: none;
text-transform: uppercase;
font-size: 70%;
@media screen and (min-width: $break-three) {
float: left;
margin: $margin/2;
padding: $padding/2 $padding*2;
width: auto;
}
}
.twitter {
background: #00acee;
&:hover {
background: lighten(#00acee, 10%);
}
}
.facebook {
background: #3b5998;
&:hover {
background: lighten(#3b5998, 10%);
}
}
}
此代码应放在我们的Sass文件的footer
块中。 这些按钮的想法是让它们100%宽并以移动/平板电脑分辨率垂直堆叠。 然后,当您将比例尺移至桌面时,它们应与设计相匹配。 媒体对social-buttons
查询涉及大量的反复试验,以实现“居中”的桌面尺寸外观。 我发现左侧填充的117px
值是我得到期望结果的点。
每个social-btn
都有一些简单的样式来显示基本外观。 然后,我们为每个按钮指定样式。 在此应用中,这只是background color
。 请注意,这里我使用的是十六进制值,而不是Sass变量。 除了这是使用这些颜色的唯一位置以外,没有其他真正的原因,因此更改它们不会有太大问题。 如果我们在其他地方拥有社交联系,我肯定会将它们设置为变量。 hover
两个按钮的背景颜色都稍浅。
在查看之前,我们不妨将最终样式块放置到位:
.copyright {
font-size: 90%;
color: $darkgrey;
@media screen and (min-width: $break-three) {
font-size: 100%
}
}
顾名思义,此块控制页脚中的小版权标签。 字体大小响应浏览器大小的更改,在$break-three
显示为100%。
保存并查看我们的杰作!
响应式拆分
真好! 一切看起来都很棒,这差不多构成了我们的圣诞节Web应用程序界面!
奖金
这是一个强烈的季节性主题,基于圣诞节和新年的概念。 只需稍作调整,您就可以轻松地更改它以满足您的需求,例如:
结论
我真的希望您喜欢和我一起通过此Web应用程序工作。 构建这个项目很有趣,我很高兴能够分享有关构建它的技术。 源代码始终可以通过下载链接获得,因此可以随意浏览一下,并在评论中让我知道您有什么想法,或者是否有人可以以任何方式改进它。
感谢Tomas的初步设计,也感谢您的阅读和后续指导。
微信小程序圣诞帽