檢視 RWD/style 的原始碼

[[分類:平台]]

===RWD 整體畫面視覺(body寬度 選單欄長度    施工中 很亂===
# 更動部分
#*新增@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 但看似沒變化
#選單更改 (漢堡選單 箭頭動畫
##漢堡表單製作
##*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以下
## 箭頭動畫
##* .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;}
#頁首頁尾
#* #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; /* 文字置中 */}
#字體工具箱
#*font_box{
#*	width: 200px;
#*	height: 150px;
#*	position: absolute;
#*	  top: 160px;
#*	  right: 250px;
#*	  display: block;
#*	  z-index: 0;
#*	  color:#000;}