本文详述如何完善一个圣诞主题的Web应用界面，重点介绍了响应式设计、样式调整及表单元素的美化技巧。
微信小程序圣诞帽
在本教程中，我们将结束我们的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-boxCSS，所以我们现在要做的就是将标记复制五次，并根据设计更改内容。 如果该应用程序能够真正发挥作用，那么我们就不需要这样做，但是对于本教程而言，必须如此！ 给自己五分钟的时间来复制，粘贴和更改每个框的代码。
让我们在浏览器中快速浏览一下，以检查当我们有多个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的初步设计，也感谢您的阅读和后续指导。
微信小程序圣诞帽
扫一扫
2692
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
