"RWD/theme" 修訂間的差異

於 2022年1月10日 (一) 17:39 的修訂

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' />
選單更改 (漢堡選單箭頭動畫
1. 漢堡表單製作
  - 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以下
2. 箭頭動畫
  - 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 更改 (將箭頭加進去)
  - $strnav.="\t\t
    <a href='#'>".subst(請去掉我)r($v,1)."
    </a>
    \n";*/ 要刪除括弧
  - <a href='#'>工具
    </a>
頁首頁尾
- style.css 新增
- #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; /* 文字置中 */}
- theme.php 新增
- $telephone="電話：02-XXXXXXXX";

更改更改

\n"; 更改$html2="

\n</body>\n</html>";

 #字體大小工具箱

字體工具箱雛形雛形<body> 雛形<input type="button" value="大" onclick="zoomInFontSize()"> 雛形<input type="button" value="中" onclick="FontSize()"> 雛形<input type="button" value="小" onclick="zoomOutFontSize()">

雛形

雛形Lorem

雛形

雛形Lorem

雛形function zoomInFontSize() { 雛形var obj = document.getElementById('textWrap'), 雛形curSize = ; // 當前字體大小 雛形obj.style.fontSize = '40px';} 雛形function FontSize() { 雛形var obj = document.getElementById('textWrap'), 雛形curSize = ; // 當前字體大小 雛形obj.style.fontSize = '20px';} 雛形function zoomOutFontSize() { 雛形var obj = document.getElementById('textWrap'), 雛形curSize = ; // 當前字體大小 雛形obj.style.fontSize = '4px';} 雛形// 創建一個容器，來測算當前字體大小雛形/*var getFontSize = function() { 雛形var oDiv = document.createElement('div'); 雛形oDiv.innerHTML = 'ABC測試'; // 寫入任意字元雛形oDiv.style.lineHeight = 1; 雛形oDiv.style.position = 'absolute'; 雛形oDiv.style.top = '-9999em'; 雛形document.body.appendChild(oDiv); 雛形return oDiv.offsetHeight;};*/ </script></body></html> style.css 新增新增#font_box{ 新增width: 200px; 新增 height: 150px; 新增 position: absolute; 新增 top: 160px; 新增 right: 250px; 新增 display: block; 新增 z-index: 0; 新增 color:#000;} 新增theme.php 新增新增$font_Size="字級："; 新增改變字體code 新增 <script> 新增 function zoomInInFontSize() { 新增 var obj = document.getElementById('content'), 新增 curSize = ; // 當前字體大小 新增 obj.style.fontSize = '40px'; 新增 } 新增等等新增改變字體按鈕

新增

".$font_Size."<input type='button' value='特大' onclick='zoomInInFontSize()'>

新增 <input type='button' value='大' onclick='zoomInFontSize()'>

新增 <input type='button' value='原始' onclick='zoomFontSize()'>

"RWD/theme" 修訂間的差異

於 2022年1月10日 (一) 17:39 的修訂

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

導覽選單

個人工具

命名空間

變體

檢視

更多

搜尋

導覽

工具

@@ 行 76： / 行 76： @@
 #*theme.php 新增
 #* $telephone="電話：02-XXXXXXXX";
-#* <p> <div id='header'>".SLOGAN."</div></p>
+更改<div id='header'>".SLOGAN."</div>
-更改
+更改<div id=content style='float:center;'>\n";
-<p><div id=content style='float:center;'>\n";</p>
+更改$html2="</div>\n<div id='footer'>".SLOGAN."<br>".$telephone."</div></body>\n</html>";
-<p>$html2="</div>\n<div id='footer'>".SLOGAN."<br>".$telephone."</div></body>\n</html>";</p>
+  #字體大小工具箱
-#字體大小工具箱
 字體工具箱雛形
-<body>
+雛形<body>
-<input type="button" value="大" onclick="zoomInFontSize()">
+雛形<input type="button" value="大" onclick="zoomInFontSize()">
-<input type="button" value="中" onclick="FontSize()">
+雛形<input type="button" value="中" onclick="FontSize()">
-<input type="button" value="小" onclick="zoomOutFontSize()">
+雛形<input type="button" value="小" onclick="zoomOutFontSize()">
-    <div id="textWrap">
+雛形<div id="textWrap">
-Lorem
+雛形Lorem
-      <ul id="textWrap">
+雛形<ul id="textWrap">
-Lorem
+雛形Lorem </ul>    </div>    <script>
-    </ul>
+雛形function zoomInFontSize() {
-    </div>
+雛形var obj = document.getElementById('textWrap'),
-    <script>
+雛形curSize = '';  // 當前字體大小
-function zoomInFontSize() {
+雛形obj.style.fontSize =  '40px';}
-var obj = document.getElementById('textWrap'),
+雛形function FontSize() {
-curSize = '';  // 當前字體大小
+雛形var obj = document.getElementById('textWrap'),
-obj.style.fontSize =  '40px';}
+雛形curSize = '';  // 當前字體大小
-function FontSize() {
+雛形obj.style.fontSize =  '20px';}
-var obj = document.getElementById('textWrap'),
+雛形function zoomOutFontSize() {
-curSize = '';  // 當前字體大小
+雛形var obj = document.getElementById('textWrap'),
-obj.style.fontSize =  '20px';}
+雛形curSize = '';  // 當前字體大小
-function zoomOutFontSize() {
+雛形obj.style.fontSize = '4px';}
-var obj = document.getElementById('textWrap'),
+雛形// 創建一個容器，來測算當前字體大小
-curSize = '';  // 當前字體大小
+雛形/*var getFontSize = function() {
-obj.style.fontSize = '4px';}
+雛形var oDiv = document.createElement('div');
-// 創建一個容器，來測算當前字體大小
+雛形oDiv.innerHTML = 'ABC測試';  // 寫入任意字元
-/*var getFontSize = function() {
+雛形oDiv.style.lineHeight = 1;
-var oDiv = document.createElement('div');
+雛形oDiv.style.position = 'absolute';
-oDiv.innerHTML = 'ABC測試';  // 寫入任意字元
+雛形oDiv.style.top = '-9999em';
-oDiv.style.lineHeight = 1;
+雛形document.body.appendChild(oDiv);
-oDiv.style.position = 'absolute';
+雛形return oDiv.offsetHeight;};*/    </script></body></html>
-oDiv.style.top = '-9999em';
-document.body.appendChild(oDiv);
-return oDiv.offsetHeight;};*/    </script></body></html>
 style.css 新增
-#font_box{
+新增#font_box{
-	width: 200px;
+新增width: 200px;
-	height: 150px;
+新增	height: 150px;
-	position: absolute;
+新增	position: absolute;
-	  top: 160px;
+新增	  top: 160px;
-	  right: 250px;
+新增	  right: 250px;
-	  display: block;
+新增	  display: block;
-	  z-index: 0;
+新增	  z-index: 0;
-	  color:#000;}
+新增	  color:#000;}
-theme.php 新增
+新增theme.php 新增
-$font_Size="字級：";
+新增$font_Size="字級：";
 新增改變字體code
-	<script>
+新增	<script>
-		function zoomInInFontSize() {
+新增		function zoomInInFontSize() {
-			var obj = document.getElementById('content'),
+新增			var obj = document.getElementById('content'),
-			curSize = '';  // 當前字體大小
+新增			curSize = '';  // 當前字體大小
-			obj.style.fontSize =  '40px';
+新增			obj.style.fontSize =  '40px';
-			}
+新增			}
-		等等
+新增		等等
 新增改變字體按鈕
-<div id='font_box'color='#000'>".$font_Size."<input type='button' value='特大' onclick='zoomInInFontSize()'>
+新增<div id='font_box'color='#000'>".$font_Size."<input type='button' value='特大' onclick='zoomInInFontSize()'>
-	<input type='button' value='大' onclick='zoomInFontSize()'>
+新增	<input type='button' value='大' onclick='zoomInFontSize()'>
-	<input type='button' value='原始' onclick='zoomFontSize()'>  </div>
+新增	<input type='button' value='原始' onclick='zoomFontSize()'>  </div>

"RWD/theme" 修訂間的差異

於 2022年1月10日 (一) 17:39 的修訂

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

導覽選單

搜尋

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