A Simple Search Homepage

The key points in this web page is:

How to position a
absolute centering with CSS;
How to add a footer sticky to page bottom: add background-image: none; into navbar's CSS definitions;
How to align text centering in a row: text-align: center;;
How to specify font properties, including font-family, font-size and font-weight;
How to add a image;

Now build this page:

$ meteor create searchHome
$ cd searchHome
$ ln -s ../client
$ tree
.
├── searchHome.css
├── searchHome.html
├── searchHome.js
├── client -> ../client
└── public
    └── logo.png
$ tree client
client
├── css
│   └── bootstrap.min.css
└── lib
    └── bootstrap.min.js

$ cat << EOF > searchHome.html
<head>
  <title>NewFairs</title>
</head>

<body>
  <div class="container">
    {{> header}}
    {{> simpleSearchBox}}
  </div>

  <div id="content" class="container">
    {{> hello}}
  </div>

  <div id="footer">
    <nav class="navbar navbar-fixed-bottom">
      <div class="container" >Here is the Footer</div>
    </nav>
  </div>
</body>

<template name="header">
  <div class="header" align="right">
    {{> loginButtons}}
    <div class="btn-group">
      <button type="button" class="btn btn-default">Action</button>
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">汉语</a></li>
        <li><a href="#">English</a></li>
      </ul>
    </div>
  </div>
</template>

<template name="simpleSearchBox">
  <div class="fixed-search-form">
    <div class="row logo">
      <img src="/logo.png" alt="logo" />
      牛展网
    </div>
    <div class="row">
      <input type="text">
      <button>搜索</button>
    </div>
  </div>
</template>

<template name="hello">
  <button id="addline">Add a line</button>
  <button id="rmline">Remove a line</button>
  <div>
    {{#each samples}}
      <li>Item No: {{this}}</li>
    {{/each}}
  </div>
</template>
EOF

$ cat << EOF > searchHome.css
html {
  position: relative;
  min-height: 100%;
}

#content { padding-bottom: 70px; }

.fixed-search-form {
  margin: auto;
  position: absolute;
  top:0; left:0; bottom:0; right:0;
  height: 60%;
  width: 60%;
  text-align: center;
  font-size: x-large;
  font-family: Verdana,
               "Microsoft YaHei", "微软雅黑",
               "WenQuanYi Micro Hei";
}

.search-form .logo {
  font-size: 200%;
  font-weight: bold;
}

#footer .navbar {
  position: absolute;
  background-image: none;
}
EOF

Note1: the website logo image logo.png is created online, and download to local disk. See note "创建简单的网站Logo" for details.

Note2: in "font-family", "Verdana" is english font, "Microsoft YaHei" is Chinese font for Windows platform, "WenQuanYi Micro Hei" for Linux platform. search and show this font with aptitude search wqy, aptitude show fonts-wqy-microhei. See note "Build Working Environment with i3 and Mint" for details of this font on Linux.

Refs:

A Simple Search Homepage

Published

Last Updated

Category

Tags

Contact