檢視 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">
##*<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 {
##* 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>
#頁首頁尾
#*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";
#* <p> <div id='header'>".SLOGAN."</div></p>
更改
<p><div id=content style='float:center;'>\n";</p>
<p>$html2="</div>\n<div id='footer'>".SLOGAN."<br>".$telephone."</div></body>\n</html>";</p>
#字體大小工具箱
字體工具箱雛形
<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>