雲麓谷

家居頁面

1.製作思路：　　
　從ps裏把需要的圖片扣下來，然後像上次作業那樣還原，十分nice
2.遇到的問題及解決方案：
　排列花瓶插入文字後圖片錯位

.vase{
 display: inline-block;
 width: 20%;
 margin: 2%;
 height: 400px;
 text-align: center;
 background-color: white;
 vertical-align:middle
}

添加vertical-align:middle;解決
　

3.製作過程:

1.主體部分用div框起來居中,內容部分的div如下,通過width和margin調整

.room{
 background: url(../img/客廳.png) no-repeat;
    display: inline-block;
 width: 45%;
 margin: 1%;
 height: 253px;
}

2.花瓶部分的超鏈接製作

<div class="vase">
 <a href="##" target="_blank" class="vase2"> 
 <img src="img/花瓶.png" alt="花瓶"><span class="popbox">detail view</span>
 </a>
 <p>這是一個標題</p>
 <p>599</p>
 </div>

.vase2:hover .popbox{
  display:block;
  position:absolute;
  bottom:0px;
  left: 0px;
  width:92%;
  background-color:#d34f38;
  color:#fff;
  padding:10px;
}

html部分是給圖片添加超鏈接
css部分設置鼠標懸停時顯示的文本樣式