"RWD/style" 修訂間的差異
(→RWD 整體畫面視覺(body寬度 選單欄長度) |
|||
行 54: | 行 54: | ||
##* margin-top:10px;} | ##* margin-top:10px;} | ||
##* theme.php 更改 (將箭頭加進去) | ##* 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> |
於 2022年1月10日 (一) 17:34 的修訂
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">
- </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
- <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";
- ".SLOGAN."
更改
- 字體大小工具箱
字體工具箱雛形 <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'; } 等等 新增改變字體按鈕
<input type='button' value='大' onclick='zoomInFontSize()'>
<input type='button' value='原始' onclick='zoomFontSize()'>