RWD/theme

出自 全民科學平台
於 2022年1月10日 (一) 17:39 由 林芸伍 (對話 | 貢獻) 所做的修訂
前往: 導覽搜尋


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

  1. 更動部分
    • 更改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' />
  2. 選單更改 (漢堡選單 箭頭動畫
    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>
  3. 頁首頁尾
    • 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
<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'; 新增 } 新增 等等 新增改變字體按鈕

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

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

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