【RWD】   「語」分享語法 (6) CSS樣式討論版



Nacht夜 Love Dream Happiness

私訊  發言  +好友
2016-08-11 21:16:14



  除了分享語法可「發言」之外,其餘一律使用意見。
  小秘訣:搜尋本版(最下)搜尋↓
  https://bassadv.com/lgpps7/topic.php?id=1294975976...
  然後再按【ctrl+F】會出現搜尋框,在裡面打關鍵字。
  
  LA大提供的RWD留言版css
  https://bassadv.com/bassrwd.css...
  
  CSS 語法分享規則:
  請將 <style> 以及 </style> 去除。
  要記得加上【留言版語法】【背景】【位置】【邊線】【連結】【CSS】等標籤。
  
  
  禁止非 CSS 語法分享


好文(2)    給我的話   相本化   本主題精華文章    發表留言  

文章連結 6658275001

:O

私訊  發言  +好友

2023-08-27 17:44:04

 更改【意見】的【留言者名字】字體顏色
 .comment font:nth-of-type(3n-2){color:字體顏色;}
 
 -
 參考的網址
 [1]https://medium.com/ui-ux%E7%B7%B4%E5%8A%9F%E5%9D%8A/css%E9%81%B8%E6%93%87%E5%99%A8%E4%BB%8B%E7%B4%B9-3-c35ce1e867d4
 [2]https://www.w3schools.com/css/css_pseudo_classes.asp
 
 
 
 
 
 
 


給5  10  20  其他bm     好文(0)    意見    回覆文章    分享留言   


文章連結 1335832477

玫蜜 Asami

私訊  發言  +好友

2017-01-19 10:25:03

 【留言版語法】【悄悄話圖片替換】
  因為原來的圖片灰灰的不好看我不喜歡 ←
 
 .c4 img[src="./lgpps7/secret.gif"] {
   display: block;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   background: url('圖片網址') no-repeat;
   width: 圖片寬度px;
   height: 圖片高度px;
   padding-left: 位置調整px;
   margin-bottom: 與下行距離調整px;
 }
 
 【留言版語法】【連結圖片替換】
  因為超連結三個字太醜我不喜歡 ←
 
 p.tell-text>font>a[target] {
 display: inline-block;
 font-size: 0;
 background-image: url('圖片網址');
 background-repeat: no-repeat;
 margin: 5px;
 width: 圖片寬度px;
 height: 圖片高度px;
 }
 
  板子一邊建,語法就會一邊慢慢被發掘出來 XD


給5  10  20  其他bm     好文(0)    意見    回覆文章    分享留言   


就是愛挖坑♥由凜 : 感謝分享!   2017-01-21 08:59
就是愛挖坑♥由凜 : 感謝分享!   2017-01-21 08:59
 : 謝謝分享♥   2017-08-02 21:26
bashily : 謝謝分享!   2017-08-02 21:48

文章連結 1125501836

玫蜜 Asami

私訊  發言  +好友

2017-01-18 11:09:21

 【留言版語法】【位置】
 
  隱藏留言版首頁上的版主自訂連結(到底哪裡可以設定...?) 
  + 讓留言板首頁標題可佔到全寬(就是把原本版主自訂連結的部份吃掉)
 
 .c4:not([id^="cc"]) { display: none; } /* 隱藏版主自訂連結區 */
 .c3:not([id^="cc"]) { width: 100%; } /* 首頁標題區 100% 寬 >> 可自訂 */
 
 
 


給5  10  20  其他bm     好文(2)    意見    回覆文章    分享留言   


就是愛挖坑♥由凜 : 感謝分享!   2017-01-21 08:11
polariel : 謝謝分享>w<!! 語法放上去真的不見了好神奇!!!!   2024-04-02 00:47

文章連結 1319600073

就是愛挖坑♥由凜

私訊  發言  +好友

!
2017-01-14 13:59:09

 留言版語法
 以下提供色碼表
 http://www.ifreesite.com/color/...
 
 
 /更改背景顏色/
 
 BODY{background:#E0FFFF;}
 
 /更改公告背景顏色/
 
 .tell-text{background-color:#87CECB!important;z-index:+2important;}
 
 /更改滑鼠滑過留言版下方的主題的顏色/
 
 .forum-block{background:#87CECB;}
 
 /更改日期顏色/
 
 .forum-desc{background:#ADD8E6;}
 
 /更改公告後的顏色/
 
 .c1{background:#008B8B;}
 
 /更改留言版右側的顏色/
 
 .c2{background:#B0E0E6;}
 
 /更改左下區塊顏色/
 
 .c3{background:#B0E0E6;}
 
 /更改右下區塊顏色/
 
 .c4{background:#B0E0E6;}
 
 /更改「公告、所有主題、精華主題、回論壇、發表主題、管理」選框顏色
 
 .content-btn, .content-btn2 {background:#5F9EA0;font-color:#fff;boeder:0px;}
 
 /更改「公告、所有主題、精華主題、回論壇、發表主題、管理」字顏色
 
 .content-btn, .content-btn2 a:link {color:#fff;-moz-text-shadow: 0px 0px 4px #B0E0E6;
  -webkit-text-shadow: 0px 0px 4px #B0E0E6;
  text-shadow: 0px 0px 4px #B0E0E6;}
 
 /更改「公告、所有主題、精華主題、回論壇、發表主題、管理」點擊後顏色
 
 .content-btn:hover, .content-btn2:hover{font-color:#fff;background:#B0E0E6;-moz-opacity: 0.9;-khtml-opacity: 0.9;opacity: 0.9;
   -webkit-transition: all 0.8s ease-in-out;
   -moz-transition: all 0.8s ease-in-out;}
 
 /更改主題字顏色
 
 a:link,.head_menu a:link,.content a:link,
  a:visited,.head_menu a:visited,.content a:visited
  {color:#000000;text-decoration:none;}
  a:hover,.head_menu a:hover,.content a:hover
  {color:#000000;text-decoration:none;-moz-opacity: 0.9;-khtml-opacity: 0.9;opacity: 0.9;
   -webkit-transition: all 0.8s ease-in-out;
   -moz-transition: all 0.8s ease-in-out;}
 body, p, table, font,.head-title,.tell-text,.forum-block{color:#000000;font-size:15px;}
 
 


給5  10  20  其他bm     好文(3)    意見    回覆文章    分享留言   


文章連結 1366132855

就是愛挖坑♥由凜

私訊  發言  +好友

!
2016-12-04 18:48:58

 #留言版語法#
 第一次發文...RWD版的語法好複雜...是說解說我不太會...所以就造字面翻,其實雖說是留言版語法,但是也可以用在遊戲上
 
 /必須先在網站開始的地方加上以下meta語法/
 
 <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
 
 /需將所有有圖片的地方,加上以下CSS語法,方便圖片按照螢幕寬度的自動縮放/
 
 img {
 
      height: auto;
 
      max-width: 100%;
 
  }
 
 /在CSS的地方加上以下規則,不同寬度大小,給予新的不同CSS規則/
 
 // Media Query ,也就是當寬度 < 768 px 時將載入下面這段 CSS :
 
  @media only screen and (max-width: 768px) {
 
      //CSS的內容
 
      ....
 }
 
 // Media Query ,也就是當寬度 < 480 px 時將載入下面這段 CSS :
 
  @media only screen and (max-width: 480px) {
 
      //CSS的內容
 
      ....
 }
 
 // Media Query ,也就是當寬度 < 320 px 時將載入下面這段 CSS :
 
  @media only screen and (max-width: 320px) {
 
      //CSS的內容
 
      ....
 }
 
 /把遊戲小說論壇那排的BASS製作平台拿掉/
 
 .app-bar-logo{display:none;}
 
 /遊戲小說那排當滑鼠滑過時會出現小圖案/把括號裡的網址換成你的
 
 a:hover{background-image:url(http://i.imgur.com/kgD6kmj.png);  background-repeat:no-repeat;padding-left:25px;}
 b{padding:2px;background:#cacaeb;}
 
 /更改遊戲小說那排的顏色/
 
 .app-bar,.tab-bar button{background:#000000
 ;}
 
 /更改遊戲小說那排的顏色加滑鼠滑過時會變成圓角/
 
 .tab-bar button:hover{background:#e9e6ff;-moz-opacity: 0.9;-khtml-opacity: 0.9;opacity: 0.9;
   -webkit-transition: all 0.8s ease-in-out;
   -moz-transition: all 0.8s ease-in-out;-moz-text-shadow: 0px 0px 4px #737296;
  -webkit-text-shadow: 0px 0px 4px #737296;
  text-shadow: 0px 0px 4px #737296;font-color:#fff;-moz-border-radius: 43px;
 -webkit-border-radius: 43px;
 border-radius: 43px;
 }
 .app-bar,.tab-bar button{background:#ff6699
 ;}
 b{padding:2px;background:#cacaeb;}
 
 /更改背景/跟lapps7的語法一樣可選擇位置,中間【center】,左邊【left】、右邊【right】、左上方【top left】、右上方【top right】,背景重覆只要把no-repeat里的no-拿掉就好了
 
 body 
  {
   background-image:url(http://i.imgur.com/NNcEzrP.jpg);
   background-repeat:no-repeat;
   background-attachment:fixed;
   background-position:top right;
  }


給5  10  20  其他bm     好文(5)    意見    回覆文章    分享留言   


曉晴天Sunny : 感謝分享!   2016-12-04 21:22
繪森 : 謝謝分享!!!   2017-01-20 22:34
polariel : 感謝分享>//<   2024-04-02 02:30

 頁數 : 0  1  

搜尋本版