html css api_使用HTML和CSS构建API驱动的Web应用

最新推荐文章于 2022-10-27 14:45:49 发布

daique1908

最新推荐文章于 2022-10-27 14:45:49 发布

阅读量261

点赞数

文章标签： html css js java web ViewUI

html css api

设计了一些视觉模拟以帮助指导我们为浏览器构建我们的小应用程序之后，让我们进入令人兴奋的部分并开始构建！

档案结构

让我们为项目设置文件结构。看起来像这样（每个资产分别位于其对应的文件夹中）：

.
├── index.html
└── assets
    ├── css
    ├── img
    ├── js
    └── sketch

现在，我们为每个资产都有一个文件夹，还有我们先前创建的.sketch文件，其中包含我们的页面.sketch 。

初始HTML

基于我们的文件结构，让我们设置基本HTML文档以及指向我们资产的链接（稍后将创建）。

<!doctype html>
   
   
    Gimmie Dat iCon
    
   
   
     href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">
     rel="stylesheet" href="assets/css/styles.css">

到目前为止，这里是：

基本HTML页面结构，包括页眉，主要内容和页脚区域。
链接到我们将创建的自定义CSS
链接到Google Fonts上的Pacifico（如前所述，这是我们将用来显示小应用程序名称的字体）
链接到我们的自定义javascript（我们将创建）以及Google托管库CDN上的jQuery库

初始CSS

因为这个小应用程序相对较小和简单，所以我倾向于在此项目中使用香草CSS（无预处理程序），但是显然您可以以自己喜欢的任何形式编写CSS。

让我们从设置一些基本的页面样式开始，并对要使用的颜色进行注释引用。在assets/css/styles.css执行以下操作：

/*
    General Styles

    Colors
    @highlight: #196E76
    @text: #4A4A4A;
    @text-light: #9A9A9A
    @body-background: #EEEEEE;
*/

*, 
*:before, 
*:after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

html {
  box-sizing: border-box;
  background: #EEEEEE;
  text-align: center;
}

body {
    font-size: 1em;
    line-height: 1.5;
    font-family: Lucida Grande, sans-serif;
    max-width: 43.75em; /* 880/16 */
    margin: 0 auto;
    padding: 0;
    color: #4A4A4A;
}

img {
    max-width: 100%;
    height: auto;    
}

a {
    color: inherit;
}

在这里，我们设置了一些基本的页面样式来管理图像，链接和我们将要使用的盒子模型。您可能已经注意到，我们通过设置body标签的max-width来使用body标签作为包装器。这将使我们所有内容居中在页面中间，而不会超出特定宽度。

注意，我们还定义了将在顶部注释中使用的颜色值。由于我们没有使用允许我们设置变量的预处理器，因此在继续编写样式时，这些变量将派上用场。

应用标题

让我们创建应用程序的标题。请记住，在Sketch中我们设计了以下功能：

因此，让我们创建HTML以匹配我们的模拟。我们会将这些内容放入我们之前创建的header元素中。


   
   
    
    
     Gimmie Dat iCon 
    
    
    Retrieve full-sized icon artwork for iOS & Mac apps.

现在，我们在页面顶部具有应用程序的名称和描述。但是样式很基本。

让我们为页面标题编写一些样式，使其更符合我们的模拟：

/*
    Header Styles
*/
header {
    margin: 1em 0 2em;
    color: #196E76;
}

    header h1 {
        font-family: 'Pacifico', serif;
        font-size: 3em; 
        text-shadow: 0 4px 2px rgba(0, 0, 0, .1);
        margin: 0;
    }

        header h1 a {
            text-decoration: none;
        }

    header p {
        margin-top: -.625em;
        text-indent: 7.75em; /* indent slightly */
        text-shadow: 0 1px 0px rgba(0, 0, 0, .15);
        font-size: .875em; /* 14/16 */
    }

以下是我们所做的简要概述：

标头容器的颜色和间距
应用名称header h1设置为使用Google字体中的Pacicifo（请记住，我们在标头中设置了指向该资源的链接）
应用程序描述header p略有偏移，以避免碰到应用程序名称上“ G”的降序。

现在，我们的标题看起来更像是设计：

但是，请记住，我们的应用程序将响应Swift！因此，如果我们使用Chrome的dev工具在较窄的宽度上检查这些样式，您会注意到由于我们的text-indent用于说明的文字换行有点时髦。

为了缓解这种情况，在较窄的宽度处，我们将删除文本缩进并以较大的页margin-top将描述文本向下凸出，从而使换行看起来更加自然。让我们编写一个媒体查询来帮助我们：

@media screen and (max-width: 600px) {
    header p {
        text-indent: 0;
        margin-top: .5em;
    }
}

在那里，现在我们有了响应头！

应用输入

下一步是继续进行模拟的输入和输出区域。记住他们看起来像这样：

首先，让我们将输入字段添加到我们先前创建的main HTML元素中：

现在，我们有了一个带有输入和提交按钮的表单。到目前为止，它具有良好的语义，但是我们对它的期望还不够。我们需要添加一些样式。

让我们向表单输入和按钮元素添加一些样式。

/*
    Form Input
    Styles for the form input and button
*/
form {
    position: relative;
}

    form input{
        width: 100%;
        display: block;
        font-size: 1em;
        padding: .625em .85em;
        padding-right: 7em;
        line-height: 1.5;
        margin: 0;
        border: 1px solid #bbb;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset, 
                    0 2px 4px rgba(0, 0, 0, .1);
        border-radius: 3px;
    }

        form input:focus {
            border-color: #298cda;
        }

    form button {
        text-decoration: none;
        background: #196E76;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        line-height: 1.5;
        color: white;
        font-size: 1em;
        border-radius: 0 3px 3px 0;
        border: 0;
        outline: 0;
        text-align: center;
        -webkit-appearance: none;
        margin: 0;
        padding: 0 1em;
        font-family: 'Pacifico', serif;
    }
        form button:hover {
            cursor: pointer;
        }

        form button:disabled {
            opacity: .5;
        }

在这里，我们向表单输入和按钮添加了一些样式，以及:hover ， :focus和:disabled一些不同状态。这为我们提供了一种输入，其风格与我们在模拟中设计输入的方式相同。

应用输出

在这一点上，我们可以创建我们所谓的“输出”区域。在这里，我们将动态呈现iTunes API返回的图标。但是，在初始页面加载时，用户尚未请求任何内容。因此，我们现在将使用零状态设计。从我们的模拟中记住，它看起来像这样：

我们将继续添加到我们一直在研究的main HTML元素中：


   
   
    
    
    
    
    
    
        
     
     
        
     
     
    
    
     
    
    
    
    
    
    
    
    
    
        
     
     
            
      
       Enter a valid iTunes app store link, i.e. https://itunes.apple.com/us/app/twitter/id333903271?mt=8

注意，我们在输入HTML之后添加了输出HTML。它由一个包装纸（该包装纸充当我们设计中的大白盒）和一个内容（位于其中的中间）组成。我们将使用CSS将.content元素设置为max-width为512像素，因为这是显示图标的最大尺寸。现在，尽管如此，我们看起来像这样：

注意我们的图标占位符丢失了。如果返回到Sketch文档，我们可以轻松地将该资产输出为SVG，以便在浏览器中使用。

现在我们应该在浏览器中显示图像。

让我们在输出框中添加一些样式。

/*
    Content Styles
    Main container for content, i.e. the icons, error messages, etc
*/
.wrapper {
    background: #fff;
    border: 1px solid #ccc;
    text-align: center;
    padding: 2em;
    margin: .5em 0 2em;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
    border-radius: 3px;
    position: relative;
}

.content {
    max-width: 512px;
    margin: 0 auto;
    position: relative;
    word-wrap: break-word; /* for long urls */
}

    .content * { /* do a simple reset on elements in .content */
        margin: 0;
        padding: 0;
    }

    .content strong {
        font-weight: bold;
        display: block;
    }

我们在此处添加的大多数CSS在代码中都有注释以对其进行解释。我们在外部包装器中添加了样式，然后，因为我们没有在页面上进行完全CSS重置，所以我们通过应用.content *对内容区域内部HTML元素进行了简单的重置。

最后，我们为零状态下的加粗元素添加了一些样式。现在我们应该有一些类似于我们的模拟游戏！