RWD/style

RWD 整體畫面視覺(body寬度 選單欄長度 施工中 很亂

1. 更動部分
   • 新增@media screen and (max-width:480px) // 讓其判斷小於480px的要怎麼顯示
   • 更改body width 100% height auto // 讓網頁符合螢幕大小 並自動縮放圖片
   • 更改body color // 改成全白
   • 更改img width 100%!important; // 讓圖片符合螢幕大小 並覆蓋之前的設定
   • 更改 #xo-banner width // 同上
   • 更改 #xo-globalnav display:none //手機板先隱藏選項欄
   • 改變圖片z位置
   • @media screen and (max-width:768px){ 新增平板選項
   • menu.css 改變 margin auto 但看似沒變化
2. 選單更改 (漢堡選單 箭頭動畫
   1. 漢堡表單製作
      • stylemobile.css 新增
      • .hamburger { /*增加漢堡選單方塊*/
      • .hamburger-line { /*增加漢堡選單線條*/
      • 改變 #xo-globalnav { /* 側攔
      • #menu-switcher:checked ~ #xo-globalnav { /*動畫
      • #menu-switcher { /*隱藏選項
      • 更改設定#xo-globalnav li {
      • #xo-globalnav a {
      • style.css 中更改選單列 浮出寬度
      • xo-globalnav { width: 50%; (螢幕寬480px以下
      • xo-globalnav { width: 40%; (螢幕寬768px以下
   2. 箭頭動畫
      • .arrow {
      • float:right;
      • margin-top:10px;
      • margin-right:5px;
      • width: 5px;
      • height: 5px;
      • border-top: 2px solid black; /* 箭頭颜色 */
      • border-right: 2px solid black; /* 箭頭颜色 */
      • transform: rotate(45deg);
      • transition: all 0.5s ease 0s;/*all是所有屬性都将獲得動畫效果 0.5秒完成動畫 ease(逐漸變慢)*/}
      • #xo-globalnav a:hover .arrow{
      • transform: rotate(135deg);/*旋转180度*/
      • /*transform: rotate(-45deg);*/ /*逆旋转180度*/
      • margin-top:10px;}
3. 頁首頁尾
   • #header {
   • height: 60px;
   • width: 70%; /* 讓他小於圖片寬度 */
   • margin: 0 auto; /* 加auto可讓整個body左右置中 */
   • color: #FFF; /* 灰底白字 */
   • background-color: #999;
   • padding: 0 10px 0 10px;
   • text-align: center; /* 文字置中 */
   • z-index: 50; /* 高度在圖片下方 */
   • position: absolute; /*固定在圖片後不顯示*/}
   • #footer {
   • margin: 0 auto; /* 加auto可讓整個body左右置中 */
   • color: #FFF; /* 灰底白字 */
   • background-color: #999;
   • padding: 0 10px 0 10px;
   • text-align: center; /* 文字置中 */}
4. 字體工具箱
   • font_box{
   • width: 200px;
   • height: 150px;
   • position: absolute;
   • top: 160px;
   • right: 250px;
   • display: block;
   • z-index: 0;
   • color:#000;}