[技术贴]如何在jj文案中显示自己的封皮
尽管晋江有教程,不过似乎还是有不少作者还是不会弄,于是,白菜在这里写个教程,顺便把一些简单的拓展教程也写进来,提供更丰富的文案效果。
注意!!!本文只讲如何在jj文案中显示封皮,至于制图和相册部分,看需求是否要在今后开新文章介绍。而学习或从事网站工作的人会发现这些代码简单的想死,那么这里不适合你,隔行如隔山,需要学着弄的大有人在,你可以点右上角的X来结束这场bs白菜的活动。
另外补充,因为白菜只用过jj的发文系统,它支持部分html代码,因而带来了非常自由的设置可能,也给很多不懂代码的盆友造成了困扰。其他的网站不知道是怎样的界面,所以爱莫能助了。
【最最基本的插入图片效果】
很简单,将这段代码插入文案的文字前面,然后将中文字代替的部分换成你自己的,就可以了。
如果想懂得更多,我可以告诉你,img是标签,而后面的××=”××”的都是这个标签的属性。另外,除了标签必写,src的属性必须有,其他的都可以省略,不填宽高则显示成原大。
【封皮文案各站一边】
如果说上面的代码你试过了,会发现图片占了好大一片地方,然后文案被挤到了下面,我不详细解释为什么,但这样显示是正确的。什么?你想让文案看起来象报纸,让文字包围着图片,他们俩各占一边,那么你需要下面的代码:
文案文字
<div style=”clear:both”></div>
还算满意吗?为了不让图片的边紧挨着文字,特意的在图片的右方加了十个像素的空白,懂英文的一看就知道其实代码就是有一定规则的英文字符,如果你想让图片和文字左右对调,只要把“left”和“right”对调就可以了。
注意:<div style=”clear:both”></div>这段其实没有什么具体的含义,里面也不要填东西,如果你不怕你的页面在有些电脑上看起来很可怕,就尽管把它删掉试试。
【来个弄个带颜色的边框】
现在,咱们来玩些个稍微炫一点点的效果,我就不多做解释了,直接来看代码。
文案文字
<div style=”clear:both”></div>
其中#ffffff是白色的色码,想换颜色可以参照此页。
【图片推文的列表】
我们有时候需要用图片来推文,或者用来连接我们的旧文,于是,需要有个图片的列表,因为它需要有连接,所以跟前面的都不太一样。将以下代码插到你想要的地方。
<a href=”第二本书的连接地址”><img style=”margin-right:10px;” src=”第二本书的图片地址” alt=”第二本书的名称” /></a>
<a href=”第三本书的连接地址”><img style=”margin-right:10px;” src=”第三本书的图片地址” alt=”第三本书的名称” /></a>
<a href=”第四本书的连接地址”><img style=”margin-right:10px;” src=”第四本书的图片地址” alt=”第四本书的名称” /></a>
【给推文列表加点漂亮的效果】
具体效果聪明的大伙可以自己去试,为了好区分,白菜分别起了酸溜溜的名字,可惜部分只有ie浏览器可以看到 。记得所有图片都要一样大,至少一样高,不会处理图片的话,我想从头看一遍,你已经知道了怎么解决这个问题。
1、彩云归处
a.ourlink img {filter: gray;border:5px solid #cccccc;margin-right:10px;}
a.ourlink:hover img{margin-right:10px;border:5px solid #5abb4a;filter:}
</style>
<a href=”第一本书的连接地址” class=”ourlink”><img src=”第一本书的图片地址” alt=”第一本书的名称” /></a>
<a href=”第二本书的连接地址” class=”ourlink”><img src=”第二本书的图片地址” alt=”第二本书的名称” /></a>
<a href=”第三本书的连接地址” class=”ourlink”><img src=”第三本书的图片地址” alt=”第三本书的名称” /></a>
<a href=”第四本书的连接地址” class=”ourlink”><img src=”第四本书的图片地址” alt=”第四本书的名称” /></a>
2、似梦似幻
a.ourlink img {margin-right:10px;FILTER: Alpha(Opacity=100,Finishopacity=0,Style=2,Startx=50%,Starty=50%,Finishx=0,Finishy=0);border:0;}
a.ourlink:hover img{margin-right:10px;FILTER: Alpha(Opacity=100,Finishopacity=100);}
</style>
<a href=”第一本书的连接地址” class=”ourlink”><img src=”第一本书的连接地址” alt=”第一本书的名称” /></a>
<a href=”第二本书的连接地址” class=”ourlink”><img src=”第二本书的图片地址” alt=”第二本书的名称” /></a>
<a href=”第三本书的连接地址” class=”ourlink”><img src=”第三本书的图片地址” alt=”第三本书的名称” /></a>
<a href=”第四本书的连接地址” class=”ourlink”><img src=”第四本书的图片地址” alt=”第四本书的名称” /></a>
以上教程由腐圈发布,其中可能在转发过程中将英文字符自动的转化为中文字符,而造成代码无效的情况,如果这样就回来看原文吧--如何在jj文案中显示自己的封皮!
如有其他的问题,记得留言给我们。










发表评论