排版

文字置中

對孩子做置中非本身

text-align: center;

img css 設定

因為原來 img 預設格式為 inline，bottom 會多一點點空白，設為 block 貼齊容器，width 設為 100%，不然會爆開超出容器範圍，hight 設 auto 保持原圖片的比例。

img {
  display: block;
  width: 100%;
  height: auto;
}

版面置中

單欄

確認 html 元素為 block，設定內容的寬度，將 margin 平分。

<div class="container">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, quibusdam.</p>
    <img src="http://lorempixel.com/1920/1080" alt="img">
</div>
.container {
  width: 600px;
  margin: 0 auto;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

多欄

比照單欄做外圍 block 置中設定，將內容依欄數設定寬，用 float 把 margin 清掉，最後加 clearfix 讓下面的內容不會跑上來。

<div class="container">
    <div class="work">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        <img src="http://lorempixel.com/1920/1080" alt="img">
    </div>
    <div class="work">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        <img src="http://lorempixel.com/1920/1080" alt="img">
    </div>
    <div class="work">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        <img src="http://lorempixel.com/1920/1080" alt="img">
    </div>
    
    <div class="clearfix"></div>
    
</div>
.container {
    width: 600px;
    margin: 0 auto;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

.work {
    float: left;
    width: 33.3333%;
}

.clearfix {
    clear: both;
}

網頁導覽列

先做版面置中，把 logo 往左移，nav 往右移，清掉 ul 預設格式。 li 變為橫向有 2 種方法：1.display: inline 2.float: left (inline 有間隔空間無法點，float 加 padding 更好) 最後一樣要加 clearfix 區隔段落。

<div class="container">
  <div id="logo">
    <img src="http://lorempixel.com/100/100" alt="logo">
  </div>
  
  <div id="nav">
    <ul>
      <li><a href="#">home</a></li>
      <li><a href="#">service</a></li>
      <li><a href="#">shop</a></li>
    </ul>
  </div>
  
  <div class="clearfix"></div>
  
</div>
.container {
    width: 600px;
    margin: 0 auto;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

#logo {
  float: left;
}

#nav {
  float: right;
}

#nav ul {
  margin: 0;
  padding-left: 0;
  list-style-type: none;
}

#nav li {
  float: left;
}

#nav a {
  padding: 0 10px;
}

.clearfix {
  clear: both;
}

特殊版面

將圖片移出 block 有 2 種方法： 1.position: relative 2.margin-top: xxpx (margin 不會留白，position 只有圖片會單獨移動)

<body>
  <div class="container">
    <img src="http://lorempixel.com/100/100" alt="img">
    <h2>I am handsome</h2>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat.</p>
  </div>
</body>
body {
  background: #ccc;
}
.container {
  width: 300px;
  padding: 20px;
  margin-top: 50px;
  background: #fff;
  text-align: center;
}

.container img {
  margin-top: -70px;
}

/* .container img {
  position: relative;
  top: -70px;
} */

滑鼠移到圖片上會有其他資訊 將資訊 position:absolute 移到圖片初始位置(要將圖片 position:relative 作為參考點)，加 padding 讓資訊往下移，但整個 block 會超出圖片範圍，因此要加 box-sizing 自動計算寬高，最後加上 hover 讓滑鼠移上去透明度變 1。

<div class="container">
  <img src="http://lorempixel.com/1920/1080" alt="img">
  
  <div class="info">
    <button>button</button>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</div>
.container {
  position: relative;
  width: 300px;
  background: #ccc;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

.info {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 40px;
  text-align: center;
  background: rgb(0, 0, 0, 0.5);
}

.info:hover {
  opacity: 1;
}

PreviousInitial pageNextFlexbox

Last updated