請入內看 → Template:最新訊息/Sandbox
求任何意見 小地方也好
改動的地方
- 表格寬度
- 3種表格背景顏色
- 圖片大小 & 固定寬而已
- 時間顯示學白貓遊戲裡
- 紅字加了白色陰影 不然會不清楚
請入內看 → Template:最新訊息/Sandbox
求任何意見 小地方也好
改動的地方
移動版...是個悲劇
難寫也難用XDDD
我連續七天,每天都寫程式超過15個小時
我短時間不想碰code了XDDD
這些就交給你們研究了
我去寫關卡資訊=w=/
做了兩個對比版,放在 Sandbox/首頁最新訊息 了。請跳過快取(Cache)刷新頁面後查看效果。
歡迎各位分別對以下細節發表你的建議:
6 现在就是200 7 怕没有图
改了後兩個的背景色,用的綠色和紅色,不過調的更淺了一些。
加了最小高度,280 像素,避免沒有圖片的時候高度不對。
目前的式樣如下:
.wcp-news-main-tp1 .wcp-news-main { display: block; position: relative; padding: 0 6px; } .wcp-news-main-tp1 .tpl-news-v2 { display: block; position: relative; padding: 0; border: 1px solid #653; margin-bottom: 10px; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); border-radius: 4px; } .wcp-news-main-tp1 .tpl-news-v2-type-1 { background: rgba(255, 238, 187, 0.4); } .wcp-news-main-tp1 .tpl-news-v2-type-2 { background: rgba(218, 240, 226, 0.4); } .wcp-news-main-tp1 .tpl-news-v2-type-3 { background: rgba(255, 238, 238, 0.4); } .wcp-news-main-tp1 .tpl-news-v2::after { content: " "; position: absolute; bottom: 0; left: 0; right: 0; height: 40px; background: rgba(102, 85, 51, 0.8); } .wcp-news-main-tp1 .tpl-news-v2-main { display: table; width: 100%; position: relative; z-index: 2; min-height: 120px; } .wcp-news-main-tp1 .tpl-news-v2-main-left, .tpl-news-v2-main-right { display: table-cell; vertical-align: middle; text-align: center; } .wcp-news-main-tp1 .tpl-news-v2-main-left { padding: 10px 10px 50px; } .wcp-news-main-tp1 .tpl-news-v2-main-right { width: 200px; padding: 10px; } .wcp-news-main-tp1 .tpl-news-v2-main-right::before { content: " "; display: block; height: 120px; float: right; } .wcp-news-main-tp1 .tpl-news-v2-title { font-size: 133%; line-height: 1.2; font-weight: bold; } .wcp-news-main-tp1 .tpl-news-v2-desc { display: table; margin: 20px auto 0; font-size: 100%; text-align: left; } .wcp-news-main-tp1 .tpl-news-v2-img img { width: auto; height: auto; max-width: 190px; } .wcp-news-main-tp1 .tpl-news-v2-more { position: absolute; left: 0; right: 220px; bottom: 0; height: 20px; color: white; z-index: 3; padding: 10px; line-height: 20px; } .wcp-news-main-tp1 .tpl-news-v2-time-range { float: left; } .wcp-news-main-tp1 .tpl-news-v2-time-countdown { float: right; color: transparent; } .wcp-news-main-tp1 .tpl-news-v2-time-date { font-size: 115%; } .wcp-news-main-tp1 .tpl-news-v2-time-countdown .mw-time-countdown { color: white; } .wcp-news-main-tp1 .tpl-news-v2-time-countdown .mw-time-countdown span { text-shadow: 0 1px white, 0 -1px white, 1px 0 white, -1px 0 white, 0 0 1px white; font-weight: bold; } .wcp-news-main-tp2 .wcp-news-main { display: block; position: relative; padding: 0; } .wcp-news-main-tp2 .tpl-news-v2 { display: block; position: relative; padding: 0 0 40px; border: 1px solid #653; margin: 20px 0; } .wcp-news-main-tp2 .tpl-news-v2-type-1 { background: rgba(255, 238, 187, 0.4); } .wcp-news-main-tp2 .tpl-news-v2-type-2 { background: rgba(218, 240, 226, 0.4); } .wcp-news-main-tp2 .tpl-news-v2-type-3 { background: rgba(255, 238, 238, 0.4); } .wcp-news-main-tp2 .tpl-news-v2::after { content: " "; position: absolute; bottom: 0; left: 0; right: 0; height: 40px; background: rgba(102, 85, 51, 0.8); } .wcp-news-main-tp2 .tpl-news-v2-main { display: table; width: 100%; position: relative; z-index: 2; } .wcp-news-main-tp2 .tpl-news-v2-main-left, .tpl-news-v2-main-right { display: table-cell; vertical-align: middle; text-align: center; } .wcp-news-main-tp2 .tpl-news-v2-main-left { padding: 10px; } .wcp-news-main-tp2 .tpl-news-v2-main-right { width: 200px; padding: 10px; } .wcp-news-main-tp2 .tpl-news-v2-main-right::before { content: " "; display: block; height: 120px; float: right; } .wcp-news-main-tp2 .tpl-news-v2-title { font-size: 133%; line-height: 1.2; font-weight: bold; } .wcp-news-main-tp2 .tpl-news-v2-desc { display: table; margin: 20px auto 0; font-size: 100%; text-align: left; } .wcp-news-main-tp2 .tpl-news-v2-img img { width: auto; height: auto; max-width: 190px; } .wcp-news-main-tp2 .tpl-news-v2-more { position: absolute; left: 0; right: 0; bottom: 0; height: 20px; color: white; z-index: 3; padding: 10px; line-height: 20px; } .wcp-news-main-tp2 .tpl-news-v2-time-range { float: left; } .wcp-news-main-tp2 .tpl-news-v2-time-countdown { float: right; color: transparent; } .wcp-news-main-tp2 .tpl-news-v2-time-date { font-size: 115%; } .wcp-news-main-tp2 .tpl-news-v2-time-countdown .mw-time-countdown { color: white; } .wcp-news-main-tp2 .tpl-news-v2-time-countdown .mw-time-countdown span { text-shadow: 0 1px white, 0 -1px white, 1px 0 white, -1px 0 white, 0 0 1px white; font-weight: bold; }
我覺得圖片浮在時間上面好有立體感,我喜歡~~
改版1
東離島鑽正確數量是84鑽,並非是79鑽
這邊後面打算改嗎,改版還要再動一下嗎?
注意:目前這個改版不支援移動設備。
可以先改看看 再看有沒有小地方需要作微調
移動設備不支援,那在移動設備上會變怎樣?無法顯示!?