可选原语地图发布格式
本帖最后由 Mushoom 于 2015-2-20 12:05 编辑 <br /><br /><pre style="font-family:微软雅黑;">格式的目的是为了美化并详细地图内容.
难得一番辛苦的搬运,不明不白的玩家也不好感兴趣.
倒不如附上游戏的详情,让玩家明白通透.
如国外的Hiveworkshop以及Chaosrealm都有频繁地使用格式.
使用格式的过程如下:
在发表帖子 -> 高级模式中开启下方"附加选项"的HTML代码,
再打开输入框右上角的高级中的"纯文本",然后复制以下的内容入内.
将你所想要的替换的文字,覆盖<pre>与</pre>代码之间的"英文文字".
如果其中的一项无法填满,例如 -
Game Screenshots - Trails - Download中的Trails的视频一行没有可上传之材,
则直接抹消(删除)那一项的的英文文字以保持整洁.
</pre>
<style>
img {
max-width:765px;
}
.tab1e
{
border-collapse: collapse;
text-align: center;
position:relative;
width:100%
}
.tab1e th
{
border:2px solid #CDCDCD;
text-align: center;
font-weight: bold;
font-size:20px;
padding-top: 2px;
padding-bottom: 2px;
padding-right: 10px;
padding-left: 10px;
background-image: linear-gradient(rgb(150,150,150) 40%, rgba(255,255,255,1) 20%, rgb(100,100,100) 40%) ;
color: rgb(220,220,220);
text-shadow: 0px 0px 1px rgba(20,20,20,1);
letter-spacing:1px;
font-family:微软雅黑;
}
.tab1e td
{
border:2px solid #CDCDCD;
padding:4px;
text-align: center;
background-color:rgb(230,230,230);
}
pre
{
font-family: 微软雅黑;
word-wrap: break-word;
white-space: wrap;
}
hr
{
color:rgb(200,200,200);
}
/* Animation*/
@keyframes translating
{
from {background-color: rgb(245,245,245);}
to {background-color: rgb(0,0,0);}
}
@keyframes translating2
{
from {background-color: rgb(0,0,0);}
to {background-color: rgb(245,245,245);}
}
@-webkit-keyframes translating
{
from {background-color: rgb(245,245,245);}
to {background-color: rgb(0,0,0);}
}
@-webkit-keyframes translating2
{
from {background-color: rgb(0,0,0);}
to {background-color: rgb(245,245,245);}
}
</style>
<table class="tab1e">
<tr>
<th>Map Name - Features - Version</th>
</tr>
<tr>
<td>
Image
<pre>
<p>Introduction</p>
</pre>
</td>
</tr>
<tr>
<td>
<pre>
Author(Creator):
Type: ####
Players: ####
Available Slots: ####
Group: ####
</pre>
</td>
</tr>
<tr>
<td style="height:50px; background-color:rgb(250,250,250);">
</td>
</tr>
</table>
<table class="tab1e">
<tr>
<th>
Game Screenshots - Trails - Downloads
</th>
</tr>
<tr>
<td>
<pre>
Shot1
Shot2
Shot3
Shot4
</pre>
</td>
</tr>
<tr>
<td style="height:50px; background-color:rgb(250,250,250);">
</td>
</tr>
<tr>
<td>
<pre>
Trail1
Trail2
Trail3
Trail4
</pre>
</td>
</tr>
<tr>
<td style="height:50px; background-color:rgb(250,250,250);">
</td>
</tr>
<tr>
<td>
<center>
<a href="http://pan.baidu.com/share/link?shareid=4222865301&uk=3811764733" style="text-decoration:none; a:link {color:rgb(150,150,150);}; a:visited {color:rgb(150,150,150);}; a:hover {color:rgb(150,150,150);}; a:active {color:rgb(150,150,150);}; "><div style="
width:150px; border-radius:4px; box-shadow: 0px 0px 1px rgb(50,50,50); background-color:rgb(245,245,245); background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.08));
text-align:center; padding:12px; font-family:微软雅黑; color:rgb(150,150,150); font-weight:bold;
" id="buttonfor" onmouseover="overON(this)" onmouseout="outON(this)">
Click to Download
</div>
</a>
</center>
</td>
</tr>
<tr>
<td style="height:50px; background-color:rgb(250,250,250);">
</td>
</tr>
<tr>
<th>
Game Signature - Changelog - Miscellaneous
</th>
</tr>
<tr>
<td>
<pre>
<a href="替换这里的中文文字为想要的页面"><img src="这里写入想要的图片地址"/></a>
<form>
<textarea height="100%" cols="100%">
<a href="替换这里的中文文字为想要的页面"><img src="这里写入想要的图片地址"/></a>
</textarea>
</form>
</pre>
</td>
</tr>
<tr>
<td style="height:50px; background-color:rgb(250,250,250);">
</td>
</tr>
</table>
<script>
function overON(arg) {
arg.style.animation = "translating 2s";
arg.style.WebkitAnimation = "translating 2s";
arg.style.backgroundColor = "rgb(0,0,0)";
}
function outON(arg1) {
arg1.style.animation = "translating2 2s";
arg1.style.WebkitAnimation = "translating2 2s";
arg1.style.backgroundColor = "rgb(245,245,245)";
}
</script>
<br>
事实上我是先制作了这个英文版的格式之后才改变成了中文版.<br>
所以英文版的格式可能看起来会微妙地比中文版要好.<br>
<br>
效果预览:
<br><br>
<style>
.tab1e
{
border-collapse: collapse;
text-align: center;
position:relative;
width:100%
}
.tab1e th
{
border:2px solid #CDCDCD;
text-align: center;
font-weight: bold;
font-size:20px;
padding-top: 2px;
padding-bottom: 2px;
padding-right: 10px;
padding-left: 10px;
background-image: linear-gradient(rgb(150,150,150) 40%, rgba(255,255,255,1) 20%, rgb(100,100,100) 40%) ;
color: rgb(220,220,220);
text-shadow: 0px 0px 1px rgba(20,20,20,1);
letter-spacing:1px;
font-family:微软雅黑;
}
.tab1e td
{
border:2px solid #CDCDCD;
padding:4px;
text-align: center;
background-color:rgb(230,230,230);
}
pre
{
font-family: 微软雅黑;
word-wrap: break-word;
white-space: wrap;
}
hr
{
color:rgb(200,200,200);
}
/* Animation*/
@keyframes translating
{
from {background-color: rgb(245,245,245);}
to {background-color: rgb(0,0,0);}
}
@keyframes translating2
{
from {background-color: rgb(0,0,0);}
to {background-color: rgb(245,245,245);}
}
@-webkit-keyframes translating
{
from {background-color: rgb(245,245,245);}
to {background-color: rgb(0,0,0);}
}
@-webkit-keyframes translating2
{
from {background-color: rgb(0,0,0);}
to {background-color: rgb(245,245,245);}
}
</style>
<table class="tab1e">
<tr>
<th>Map Name - Features - Version</th>
</tr>
<tr>
<td>
Image
<pre>
<p>Introduction</p>
</pre>
</td>
</tr>
<tr>
<td>
<pre>
Author(Creator):
Type: ####
Players: ####
Available Slots: ####
Group: ####
</pre>
</td>
</tr>
<tr>
<td style="height:50px; background-color:rgb(250,250,250);">
</td>
</tr>
</table>
<table class="tab1e">
<tr>
<th>
Game Screenshots - Trails - Downloads
</th>
</tr>
<tr>
<td>
<pre>
Shot1
Shot2
Shot3
Shot4
</pre>
</td>
</tr>
<tr>
<td style="height:50px; background-color:rgb(250,250,250);">
</td>
</tr>
<tr>
<td>
<pre>
Trail1
Trail2
Trail3
Trail4
</pre>
</td>
</tr>
<tr>
<td style="height:50px; background-color:rgb(250,250,250);">
</td>
</tr>
<tr>
<td>
<center>
<a href="改变这些文字为链接" style="text-decoration:none; a:link {color:rgb(150,150,150);}; a:visited {color:rgb(150,150,150);}; a:hover {color:rgb(150,150,150);}; a:active {color:rgb(150,150,150);}; "><div style="
width:150px; border-radius:4px; box-shadow: 0px 0px 1px rgb(50,50,50); background-color:rgb(245,245,245); background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.08));
text-align:center; padding:12px; font-family:微软雅黑; color:rgb(150,150,150); font-weight:bold;
" id="buttonfor" onmouseover="overON(this)" onmouseout="outON(this)">
Download
</div>
</a>
</center>
</td>
</tr>
<tr>
<td style="height:50px; background-color:rgb(250,250,250);">
</td>
</tr>
<tr>
<th>
Game Signature - Changelog - Miscellaneous
</th>
</tr>
<tr>
<td>
<pre>
<a href="替换这里的中文文字为想要的页面"><img src="这里写入想要的图片地址"/></a>
<form>
<textarea height="100%" cols="100%">
<a href="替换这里的中文文字为想要的页面"><img src="这里写入想要的图片地址"/></a>
</textarea>
</form>
</pre>
</td>
</tr>
<tr>
<td style="height:50px; background-color:rgb(250,250,250);">
</td>
</tr>
</table>
<script>
function overON(arg) {
arg.style.animation = "translating 2s";
arg.style.WebkitAnimation = "translating 2s";
arg.style.backgroundColor = "rgb(0,0,0)";
}
function outON(arg1) {
arg1.style.animation = "translating2 2s";
arg1.style.WebkitAnimation = "translating2 2s";
arg1.style.backgroundColor = "rgb(245,245,245)";
}
</script>
本帖最后由 Mushoom 于 2015-2-20 13:13 编辑 <br /><br /><style>
img {
max-width:765px;
}
.imgur {
border-radius: 10px;
margin-bottom: 3px;
}
.dividing
{
border-bottom: 2px solid hsl(203,10%,75%);
border-left: 5px solid hsl(203,10%,55%);
font-size: 25px;
font-weight: lighter;
font-family: 微软雅黑;
padding: 2px;
letter-spacing: 1px;
margin-top: 5px;
text-shadow: 0px 0px 1px hsla(0,0%,0%,0.23);
}
.synopsis
{
font-weight: lighter;
font-family: 微软雅黑;
padding: 2px;
letter-spacing: 1px;
margin-top: 5px;
text-wrap: avoid;
word-wrap: break-word;
}
</style>
<pre class="synopsis">
可选格式2：
<div class="dividing">演示 - Performance</div>
<div class="synopsis">文字Test</div>
</pre>
<br>
<style>
img {
max-width:765px;
}
.imgur {
border-radius: 10px;
margin-bottom: 3px;
}
.dividing
{
border-bottom: 2px solid hsl(203,10%,75%);
border-left: 5px solid hsl(203,10%,55%);
font-size: 25px;
font-weight: lighter;
font-family: 微软雅黑;
padding: 2px;
letter-spacing: 1px;
margin-top: 5px;
text-shadow: 0px 0px 1px hsla(0,0%,0%,0.23);
}
.synopsis
{
font-weight: lighter;
font-family: 微软雅黑;
padding: 2px;
letter-spacing: 1px;
margin-top: 5px;
text-wrap: avoid;
word-wrap: break-word;
}
</style>
<div class="dividing">演示 - Performance</div>
<pre class="synopsis">
文字Test
</pre>
<pre class="synopsis">
解说：
复制 “ 38列到42为止的内容 ” 替换其中的汉字内容，以增加特定的展示内容框。
</pre>
效果地址
好！为何Hiveworkshop里的楼主能发出各种格式、字体、界面的东西！
admin 发表于 2015-2-6 18:01
好！为何Hiveworkshop里的楼主能发出各种格式、字体、界面的东西！
和这种格式的原理是一样的。
只是他们预先制作了特定的背景图片提供给发布者使用。
当然，用户自制使用的也多。
Mushoom 发表于 2015-2-6 18:03
和这种格式的原理是一样的。
只是他们预先制作了特定的背景图片提供给发布者使用。
当然，用户自制使用 ...
能从页面源代码扣出来他们那些不？
本帖最后由 Mushoom 于 2015-2-6 18:17 编辑
admin 发表于 2015-2-6 18:09
能从页面源代码扣出来他们那些不？
大概不能吧。
由于是预写的Css，所以在Html页面只剩制定的ID或Class。
当然，现在的开发者工具会自动关联至CSS也说不定，从而找到CSS文件。
不过重点是，他们的风格为暗色。
根据色彩的调和，是不适合我们的风格的物。
如果只是表格的话，Discuz的所见所得文本编辑框已经预置在其内，大概。
Mushoom 发表于 2015-2-6 18:13
大概不能吧。
由于是预写的Css，所以在Html页面只剩制定的ID或Class。
恩，论坛现在没有风格。简单得很
本帖最后由 Mushoom 于 2015-2-6 18:22 编辑
admin 发表于 2015-2-6 18:18
恩，论坛现在没有风格。简单得很
简洁也是一种风格。
美化并不只被拘留在图片上。
嘛，我个人而言是不讨厌这种默认的风格。
毕竟也是洗练得出的结果之一。
要么以自身（ 格式 ）配合他人（ 风格 ）。
要么以他人（ 风格 ）配合自身（ 格式 ）的转换，实质变化绝非绝大。
页:
[1]