19. 蒂莫絲版型CSS部份 PART-3   網頁第三層框架的CSS設計

設定 #content 區域內第三層中的元素物件

<style type="text/css">  /*這一行的這個標籤不用輸入*/
#content h1 {
  background-image: url(images/h1bg.png);       /*設定這個區域的背景影像*/ 
  background-repeat: no-repeat;                 /*設定背景影像不重複*/
  background-position: center center;           /*設定背景影像的定位位置*/
  text-align: center;                           /*設定這個區域的文字置中對齊*/
  margin-bottom: 20px;                          /*設定這個區域的離下方的距離*/
}
</style>

 

在 aside 區域標題二的下方插入相關影像, 並設定class名稱為 ADimg

<style type="text/css">  /*這一行的這個標籤不用輸入*/
aside h2 {
  font-size: 15px;                               /*設定這個區域的文字大小*/
  text-align: center;                           /*設定這個區域的內容置中對齊*/
  margin-bottom: 20px;                          /*設定這個區域的離下方的距離*/
}

aside img {
  width: 100%;                               /*設定寬度與所在位置的寬度100%相同*/
  height: auto;                              /*設定高度依影像原寬高比例自動計算*/
}

aside .ADimg {
  /*
  border-style: solid;
  border-width: 3px;
  border-color: #fff;
  */
  border: 5px solid #FFF;                       /*設定影像四周有白色邊框*/

  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6);   /*設定中央向外5px半透明的黑色陰影*/
  margin-bottom: 10px;                           /*設定這個區域的離下方的距離*/
  width: 190px;     /*上層aside的內容區寬度是180px, 扣除接下來要設計的border左右10px*/
}
</style>

 

完成版型之後, 複製出相關檔案

運用另存新檔, 複製出以下相關檔案

1. ----- about.html
2. ----- service.html
3. ----- location.html
4. ----- contact.html