over 2 years ago

6:00 先從架構開始
HTML5

<body>
  <main>
    <aside></aside>
    <div></div>
    <aside></aside>
  <main>
</body>

7:40 先看左邊的<aside></aside>

<class='main'>

.main {
  width:100%;
  height:100%;
}

<class='sidebar'>

.sidebar {
  width:100px;
  height:100%; *從上到下
}

9:40

<html><body>要記得設大小,裡面的div們才會出現。

html , body {
    width: 100%;
  height: 100%; 
  padding: 0px; 通常都會設為0
  margin: 0px; 通常都會設為0
}

ps:不過,如果要把navbar固定在最頂端,就要把body的padding做修改。
[https://getbootstrap.com/components/#navbar-fixed-top]
譬如:body { padding-top: 70px; }

11:30 開始做logo
<aside>裡面做一個class='logo'<div>

.logo {
    background-image: url();
  #還是要記得設寬跟高
  width:64px;
  height:83px;
  margin: 0 auto 0 auto; 這樣可以置中
}

13:50 開始在logo下面用<ul>作清單,目標是讓清單(menu)置中

<aside>
  <ul class='menu'>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</aside>

因為menu會有預留的空間,所以要改padding=0,才有辦法去把文字置中

.menu {
    display: inline-block;
    padding: 0px;
    margin: 0 auto;
}
.menu li {
    #去除點點
    list-style: none;
}

還要回去改sidebar,才能讓menu置中

.sidebar {
  width:100px;
  height:100%; *從上到下
 **text-align: center;**
}

23:00 打出中間內容(content)的部分

<body>
  <main>
    <aside></aside>
    <div class='content' >
      <div class='top_menu' > </div>
      <div class='banner' > </div>
      <article> </article>
    </div>
    <aside></aside>
  <main>
</body>
.top_menu{
    height: 30px;
}

25:00 要在main的地方新增flex(CSS 3)

.main {
  width:100%;
  height:100%;
  **display:flex;**
}

content的地方也要加相關的東西

.content {
  flex:1 #占滿aside剩下的所有的空間,所以要去把右邊的aside也加上固定的寬度。
}

26:40 右邊的aside,取名為detail
<aside class='detail'></aside>

.detail{
width: 120px;
}

28:00 把top_menu做成半透明的黑色

.top_menu {
    height: 30px;
  background-color: rgba(0,0,0,0.5);
}
 <div class='top_menu' > 
   <div class='account' > 
   </div>
 </div>

28:00 放兔子的圖檔

 .account {
   background-image: url();
   width:22px;
   height:37px;
   display: inline-block;
   margin: -7px 0 0 10px;
 }

33:00 下拉選單

 <div class='top_menu' > 
   <div class='account' > 
   </div>
   <select>
     <option value=''>AAA</option>
     <option value=''>BBB</option>
   </select>
 </div>

像select這樣的元素,預設就是inline-block,具有寬跟高。有一個垂直對齊的功能 - vertical-align

 .account {
   background-image: url();
   width:22px;
   height:37px;
   display: inline-block;
   margin: -7px 0 0 10px;
   vertical-align: middle; #這樣就能垂直置中select了。
 }

33:00 用CSS調整下拉選單的樣式
先把本來的外觀拿掉

element-style {
    background-color:transparent;
  border: 0px;
  -webkit-appearence: none; (會把箭頭弄不見)
}

用開發者工具來看

select {
-webkit-appreance:multilist; (把這個改成none)
}

<select id ='dropdwon'>

#dropdown {
    background-color:transparent;
  border: 0px;
  -webkit-appearence: none; (會把箭頭弄不見)
  cursor: pointer; (增加滑鼠指標)
}

用after做出向下的箭頭 (後來發現select不能用這招after)

#dropdown:after {
    content:'↓';
  display:inline-block;
  height: 16px;
  width: 16px;
}

在select後面再加span就出現了,然後用after幫span做出向下的箭頭

46:00 在select後面做搜尋按鈕,然後置右

 <div class='top_menu' > 
   <div class='account' > 
   </div>
   <select>
     <option value=''>AAA</option>
     <option value=''>BBB</option>
   </select>
  <div class='search-wrapper'> <input type='text' class = 'search'><a href='#' 搜尋 a></div>
 </div>
.search {
    border-radius:5px;
    float:right;
}
.search-wrapper {
    float:right;
}

53:00 開始給banner一張圖片

<body>
  <main>
    <aside></aside>
    <div class='content' >
      <div class='top_menu' > </div>
      <div class='banner' > </div>
      <article> </article>
    </div>
    <aside></aside>
  <main>
</body>
.banner {
  background-image: url("");
  width:;
  height:279px;
  background-repeat: no-repeat;
  background-postion: center 0;
  background-color: white;
}

53:00 banner下面放點點

nav其實跟div沒甚麼差別,只是給一個名字而已,為了讓google機器人看的

<body>
  <main>
    <aside></aside>
    <div class='content' >
      <div class='top_menu' > </div>
      <div class='banner' > </div>
      <nav class = 'nav'>
        <span>●</span>
        <span>●</span>
        <span>●</span>
        <span>●</span>
        <span>●</span>
      
      </nav>
      <article> </article>
    </div>
    <aside></aside>
  <main>
</body>
nav span {
 font-size:150%;
}

1:00:00 開始講article

<article> 

<div class='title'> 熱門排行 <span class='bullet'></span></div>
</article>
div.title {
  background-color:;
  display:inline-block;
  width:5px;
  margin-left:2em; (2個字元的寬度)
}
div.title > span.bullet {
  background-image: img(""); #這裡怎麼突然變成img?
  display: inline-block;
  width:26px;
  height:21px;
  vertical-align:text-bottom;
}

1:07:00 放一堆圖片

← simple_GPA_calculator Git - Bitbucket - Heroku 步驟 →