home

home.markdown

home

A Pen by Chris Hsieh on CodePen.

License.

index.html

<div class="container">
  <div class="header">
    <div class="logo">
    
    </div>
    <div class="topMenu">
      <ul>
      <li>
        <a href=#>首頁</a>
      </li>
      <li>
        <a href=#>最新消息</a>
      </li>
      <li>
        <a href=#>商品介紹</a>
      </li>
      <li>
        <a href=#>購物須知</a>
      </li>
      <li>
        <a href=#>關於我們</a>
      </li>
      <li>
        <a href=#>聯絡我們</a>
      </li>
      <li>
        <a href=#>會員登入</a>
      </li>
    </ul>
  </div>
    
  </div>
  <div class="slider"></div>
  <div class="content">
    <h1>oekfoekfoe</h1>
    <p>feijfiefjwi我我我我是</p>
  </div>
  <div class="footer"></div>
</div>

style.css

* {
  background: #F2EBEC;
}

.container {
  max-width: 100%;
  height: 1000px;
}

.header {
  background: #F2EBEC;
  width: 100%;
  height: 60px;
  font-size: 16px;
  letter-spacing: .13em;
  position: fixed;
  top: 0;
}

.topMenu{
  float: right;
}

.topMenu li {
  float: left;
  margin-right: 20px;
}
.topMenu a {
  width: 100px;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
  display: block;
  text-decoration: none;
  color: #000;
}
a:hover {
  background: #DADADA;
}

.slider {
  height: 400px;
  background: url('https://www.teasoap.com.tw/downloads/banner/pic/20140829091512.jpg') no-repeat center;
  background-size: cover;
  margin-top: 60px;
}

.content {
  background: gray;
  width: 80%;
  height: 1000px;
  margin: 0 auto; 
  margin-bottom: 50px;
}

.footer {
  background: #404145;
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 0;
}