3

star-history源码阅读笔记(02)-搜索栏+大图的HTML与CSS排版

 2 years ago
source link: https://rivers-shall.github.io/2020/06/17/star-history%E6%BA%90%E7%A0%81%E9%98%85%E8%AF%BB%E7%AC%94%E8%AE%B0-02-%E6%90%9C%E7%B4%A2%E6%A0%8F-%E5%A4%A7%E5%9B%BE%E7%9A%84HTML%E4%B8%8ECSS%E6%8E%92%E7%89%88/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

本文是star-history项目源码阅读的第二篇文章，会包含:

  • 搜索栏+大图的HTML与CSS排版

本次对代码的分析基于Commit - first commit deecd92 timqian

项目页面排版

在这个commit上，项目的外观还不是很美观，但是已经具备了一种模式，那就是”搜索栏+大图”的模式

+----------------------------------------------------------------+
|                   |search input|||search button|               |
+----------------------------------------------------------------+
|                                                                |
|                                                                |
|                                                                |
|                                                                |
|                           svg picture                          |
|                                                                |
|                                                                |
|                                                                |
|                                                                |
|                                                                |
|                                                                |
+----------------------------------------------------------------+

排版的HTML与CSS实现

首先，我们可以看到整个页面被分做了两块，一块是搜索栏，另一块是svg图片(用于展示star历史)，也就是

  • 搜索栏
    • 搜索输入栏
    • 搜索点击按钮
  • svg图片

项目使用的HTML结构则是

<h1>
    <input/>
    <button></button>
</h1>
<svg></svg>

为了界面的美观，当然还会使用CSS，这里选取一些比较重要的属性设置进行注解

h1 {
    # text-align使得input和button居中显示
    text-align: center,
    # 设置背景色
    background-color: rgba(46, 137, 216, 0.88),
}

input {
    # 形状
    width: 350px;
    height: 23px;
    # 字体大小
    font-size: 15pt;
}

button {
    # 原生文字格式
    text-decoration: none;
    # 文字居中
    text-align: center;
    # 文字大小
    font-size: 16pt;
    # 背景色
    background-color: #01A94C;
    # 字体色
    color: white;
}

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK