"RWD/style" 修訂間的差異

出自 全民科學平台
前往： 導覽、 搜尋
(→‎RWD 整體畫面視覺(body寬度 選單欄長度)
(→‎RWD 整體畫面視覺(body寬度 選單欄長度 施工中 很亂)
行 3： 行 3：
 
===RWD 整體畫面視覺(body寬度 選單欄長度    施工中 很亂===
 
===RWD 整體畫面視覺(body寬度 選單欄長度    施工中 很亂===
 
# 更動部分
 
# 更動部分
−
#*更改style.css
 
 
#*新增@media screen and (max-width:480px)  // 讓其判斷小於480px的要怎麼顯示
 
#*新增@media screen and (max-width:480px)  // 讓其判斷小於480px的要怎麼顯示
 
#*更改body width 100% height auto  // 讓網頁符合螢幕大小 並自動縮放圖片
 
#*更改body width 100% height auto  // 讓網頁符合螢幕大小 並自動縮放圖片
行 10： 行 9：
 
#*更改 #xo-banner  width    // 同上
 
#*更改 #xo-banner  width    // 同上
 
#*更改 #xo-globalnav display:none //手機板先隱藏選項欄
 
#*更改 #xo-globalnav display:none //手機板先隱藏選項欄
−
#*更改theme.php
 
−
#*<meta name="viewport" content="width=device-width, initial-scale=1" />
 
 
#*改變圖片z位置
 
#*改變圖片z位置
 
#*@media screen and (max-width:768px){  新增平板選項
 
#*@media screen and (max-width:768px){  新增平板選項
 
#*menu.css 改變 margin auto 但看似沒變化
 
#*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">
 
−
##*<div class="hamburger-line"></div></label>
 
 
##*stylemobile.css 新增
 
##*stylemobile.css 新增
 
##*.hamburger {                      /*增加漢堡選單方塊*/
 
##*.hamburger {                      /*增加漢堡選單方塊*/
行 38： 行 26：
 
##*xo-globalnav {  width: 40%;  (螢幕寬768px以下
 
##*xo-globalnav {  width: 40%;  (螢幕寬768px以下
 
## 箭頭動畫
 
## 箭頭動畫
−
##* style.css更改
 
 
##* .arrow {
 
##* .arrow {
 
##* float:right;
 
##* float:right;
行 53： 行 40：
 
##* /*transform: rotate(-45deg);*/ /*逆旋转180度*/
 
##* /*transform: rotate(-45deg);*/ /*逆旋转180度*/
 
##* margin-top:10px;}
 
##* 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>
 
 
#頁首頁尾
 
#頁首頁尾
−
#*style.css 新增
 
 
#* #header {
 
#* #header {
 
#*height: 60px;
 
#*height: 60px;
行 74： 行 57：
 
#*padding:                0 10px 0 10px;
 
#*padding:                0 10px 0 10px;
 
#*text-align: center; /* 文字置中 */}
 
#*text-align: center; /* 文字置中 */}
−
#*theme.php 新增
+
#字體工具箱
−
#* $telephone="電話：02-XXXXXXXX";
+
#*font_box{
−
#* <p> <div id='header'>".SLOGAN."</div></p>
+
#* width: 200px;
−
更改
+
#* height: 150px;
−
<p><div id=content style='float:center;'>\n";</p>
+
#* position: absolute;
−
<p>$html2="</div>\n<div id='footer'>".SLOGAN."<br>".$telephone."</div></body>\n</html>";</p>
+
#*   top: 160px;
−
#字體大小工具箱
+
#*   right: 250px;
−
字體工具箱雛形
+
#*   display: block;
−
<body>
+
#*   z-index: 0;
−
<input type="button" value="大" onclick="zoomInFontSize()">
+
#*   color:#000;}
−
<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日 (日) 16:38 的修訂


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;}
取自 "http://science4everyone.net/MediaWiki/index.php?title=RWD/style&oldid=6376"