"RWD/theme" 修訂間的差異

出自 全民科學平台
前往： 導覽、 搜尋
(→‎RWD 整體畫面視覺(body寬度 選單欄長度 施工中 很亂)
行 3： 行 3：
 
===RWD 整體畫面視覺(body寬度 選單欄長度    施工中 很亂===
 
===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" />
 
#*<meta name="viewport" content="width=device-width, initial-scale=1" />
−
#*改變圖片z位置
 
−
#*@media screen and (max-width:768px){  新增平板選項
 
 
#*menu.css 改變 margin auto 但看似沒變化
 
#*menu.css 改變 margin auto 但看似沒變化
 
#*移動theme.php 中 style.css 和 menu.css的位置  方法如下
 
#*移動theme.php 中 style.css 和 menu.css的位置  方法如下
行 22： 行 12：
 
#選單更改 (漢堡選單 箭頭動畫
 
#選單更改 (漢堡選單 箭頭動畫
 
##漢堡表單製作
 
##漢堡表單製作
−
##*theme.php 新增
 
 
##*<input type="checkbox" name="menu-switcher" id="menu-switcher" />     
 
##*<input type="checkbox" name="menu-switcher" id="menu-switcher" />     
 
##*<label for="menu-switcher" class="hamburger">
 
##*<label for="menu-switcher" class="hamburger">
 
##*<div class="hamburger-line"></div></label>
 
##*<div class="hamburger-line"></div></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 {
+
$strnav.="\t\t<dt><a href='#'>".subst(請去掉我)r($v,1)."<div class='arrow'></div></a></dt>\n";*/  要刪除括弧
−
##* 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<dt><a href='#'>".subst(請去掉我)r($v,1)."<div class='arrow'></div></a></dt>\n";*/  要刪除括弧
 
 
##*  <dt><a href='#'>工具<div class='arrow'></div></a> </dt>
 
##*  <dt><a href='#'>工具<div class='arrow'></div></a> </dt>
 
#頁首頁尾
 
#頁首頁尾
−
#*style.css 新增
+
#*$telephone="電話：02-XXXXXXXX";<br><div id='header'>".SLOGAN."</div><br><div id=content style='float:center;'>\n";<br>$html2="</div>\n<div id='footer'>".SLOGAN."<br>".$telephone."</div></body>\n</html>";
−
#* #header {
+
#字體大小工具箱
−
#*height: 60px;
+
#*新增$font_Size="字級：";
−
#*width: 70%;    /* 讓他小於圖片寬度 */
+
#*新增改變字體code
−
#*margin:                0 auto; /* 加auto可讓整個body左右置中 */
+
#*新增 <script>
−
#*color:                  #FFF; /* 灰底白字 */
+
#*新增 function zoomInInFontSize() {
−
#*background-color:      #999;
+
#*新增 var obj = document.getElementById('content'),
−
#*padding:                0 10px 0 10px;
+
#*新增 curSize = '';  // 當前字體大小
−
#*text-align: center; /* 文字置中 */
+
#*新增 obj.style.fontSize =  '40px';
−
#*z-index: 50; /* 高度在圖片下方 */
+
#*新增 }
−
#*position: absolute;      /*固定在圖片後不顯示*/}
+
#*新增 等等
−
#* #footer {
+
#*新增改變字體按鈕
−
#*margin:                0 auto; /* 加auto可讓整個body左右置中 */
+
#*新增<div id='font_box'color='#000'>".$font_Size."<input type='button' value='特大' onclick='zoomInInFontSize()'>
−
#*color:                  #FFF; /* 灰底白字 */
+
#*新增 <input type='button' value='大' onclick='zoomInFontSize()'>   
−
#*background-color:      #999;
+
#*新增 <input type='button' value='原始' onclick='zoomFontSize()'>  </div>
−
#*padding:                0 10px 0 10px;
 
−
#*text-align: center; /* 文字置中 */}
 
−
#*theme.php 新增
 
−
#* $telephone="電話：02-XXXXXXXX";
 
−
更改<div id='header'>".SLOGAN."</div>
 
−
更改<div id=content style='float:center;'>\n";
 
−
更改$html2="</div>\n<div id='footer'>".SLOGAN."<br>".$telephone."</div></body>\n</html>";
 
−
  #字體大小工具箱
 
−
字體工具箱雛形
 
−
雛形<body>
 
−
雛形<input type="button" value="大" onclick="zoomInFontSize()">
 
−
雛形<input type="button" value="中" onclick="FontSize()"> 
 
−
雛形<input type="button" value="小" onclick="zoomOutFontSize()"> 
 
−
雛形<div id="textWrap">
 
−
雛形Lorem
 
−
雛形<ul id="textWrap">
 
−
雛形Lorem </ul>    </div>    <script>
 
−
雛形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';
 
−
新增 }
 
−
新增 等等
 
−
新增改變字體按鈕
 
−
新增<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='zoomFontSize()'>  </div>
 

於 2022年1月16日 (日) 17:01 的修訂


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

  1. 更動部分
    • <meta name="viewport" content="width=device-width, initial-scale=1" />
    • 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' />
  2. 選單更改 (漢堡選單 箭頭動畫
    1. 漢堡表單製作
      • <input type="checkbox" name="menu-switcher" id="menu-switcher" />
      • <label for="menu-switcher" class="hamburger">
      • </label>
    2. 箭頭動畫
      • (將箭頭加進去)
$strnav.="\t\t
<a href='#'>".subst(請去掉我)r($v,1)."
</a>
\n";*/ 要刪除括弧
      • <a href='#'>工具
        </a>
  2. 頁首頁尾
    • $telephone="電話：02-XXXXXXXX";

      \n";
      $html2="
      \n</body>\n</html>";
  3. 字體大小工具箱
    • 新增$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()'>
取自 "http://science4everyone.net/MediaWiki/index.php?title=RWD/theme&oldid=6377"