RWD/style
RWD 整體畫面視覺(body寬度 選單欄長度
- 更動部分
- 更改style.css
- 新增@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 //手機板先隱藏選項欄
- 更改theme.php
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- 改變圖片z位置
- @media screen and (max-width:768px){ 新增平板選項
- menu.css 改變 margin auto 但看似沒變化
- 移動theme.php 中 style.css 和 menu.css的位置 方法如下
- <link rel='stylesheet' type='text/css' media='screen' href='/".SITE."/jquery.makeCollapsible.css' />
- <link rel='stylesheet' type='text/css' media='screen' href='/mm/treestyles.css' />
- <link rel='stylesheet' type='text/css' media='screen' href='/".SITE."/".$style_Num."' />
- <link rel='stylesheet' type='text/css' media='screen' href='/".SITE."/menu.css' />
- 選單更改 (漢堡選單 箭頭動畫
- 漢堡表單製作
- theme.php 新增
- <input type="checkbox" name="menu-switcher" id="menu-switcher" />
- <label for="menu-switcher" class="hamburger">
- </label>
- 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以下
- 箭頭動畫
- style.css更改
- .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;}
- theme.php 更改 (將箭頭加進去)
- 漢堡表單製作
