【小鱼缸】说说html表格吧_派派后花园

用户中心 游戏论坛 社区服务
发帖 回复
阅读:132 回复:13

[家长里短] 【小鱼缸】说说html表格吧

刷新数据 楼层直达
窈窈毓深

ZxID:77855910


等级: 内阁元老
配偶: 撒旦罪爱
我回来了~
举报 只看楼主 使用道具 楼主   发表于: 2018-06-06 0
好多人觉得html表格很难
其实从难度上来看
和论坛里这种表格没什么区别
如果想做出论坛里这种效果的话
当然如果想做更炫一点
代码量就会多
但我做的很多表格
代码可能不到50行
就可以做出很棒的效果

今天主要讲一下html代码可以做到哪些独特的效果

1. 背景图
这个算是最基础的了
也是最简单的一个
只要用的好
就可以做出非常漂亮的表格
例子就不举了
论坛里还是蛮多的

2. 字体特效(并不是图,而是可以复制的文字)
下面是我截的图,想看原帖的说下,我可以贴下原帖地址~~
这是我学会的第一个比较炫的效果
      
字体效果基本都是靠字体阴影来实现的
前两个是没有加入模糊的阴影
可以清晰看到阴影和字本身是一样的
第三个给字体加了八个阴影
这个可以做出一个白边的效果
第四个字体颜色为白色
加入了绿色的带模糊的阴影
可以看到字体很清透

3. 表格特效
这个就比较多了,我用的多的基本就是阴影,圆角,和旋转

关于阴影,和字体阴影是一样用的
  
第一个字体外面的那个框框,背景色为透明色,阴影是绿色加模糊,再加向内(阴影是在格子里面的)
第二个表格背景色白色,阴影蓝色加模糊,阴影在格子外面

关于圆角,

我一般是用来做水印用的,给字外面加一个圆的框框。
这个其实是一个边框,但边框只有左右,上下没有边框,再加上圆角就可以做到这个的效果

关于旋转

html的格子都是正着的
这个框框其实是旋转了45度后的框框
里面的文字旋转了-45度,所以看起来就像只旋转了框框一样

4. 关于动画
这部分是比较难做的
不过做习惯了还是挺好玩儿的
给个链接:https://www.paipai.fm/r7520376
右上角有四个字,“派派之声”
把鼠标放上去就可以看到,这些字是会动的~~~
这是我今天才做的
非常想炫耀一下
然后……发现小鱼缸有内容了

5. 关于定位
一般做表格,你所写的字都会在某些格子里
但有了绝对定位
就可以想把字写在哪里写在哪里
比方说:

“周年纪”这三个字其实是做为背景的
位置是左下角
而我们的正文写的时候
完全可以写在这三个字上面
只要调整下颜色
并不会影响阅读
所以我一般用这种方法来做水印~~~

以上基本是上最简单的html效果了
只要你想
html可以做出任何你想要的效果
有没有心动
想学的就行动吧~~~
本帖最近评分记录: 3 条评分 派派币 +3

小白兔和积木

ZxID:54271495


等级: 派派版主
925周年520转正620复活,小说素材诗词合金心情
举报 只看该作者 沙发   发表于: 2018-06-06 0
确实炫很多,有教程吗

楼主留言:

网上教程还是很多的,不过不是很实用,我自己想开的教程来着,写了一点就懒了……

本帖最近评分记录: 1 条评分 派派币 +1
  • 窈窈毓深

    派派币 +1 2018-06-07

    https://www.paipai.fm/r7521529 今天刚开的帖子~~~

婇杺ル

ZxID:15533204


等级: 派派文编
配偶: 墨筱。
举报 只看该作者 板凳   发表于: 2018-06-06 0
心动了想学。。。。

楼主留言:

https://www.paipai.fm/r7521529
教程~~~


九昼暖

ZxID:12957271


等级: 派派版主
❤北辰九→夙九❤1.2-5.24-8.14-11.23
举报 只看该作者 地板   发表于: 2018-06-06 0
来来来,开个详细教程

楼主留言:

https://www.paipai.fm/r7521529
大佬~~~一起学习~~~

撒旦罪爱

ZxID:10293479


配偶: 窈窈毓深
11.23结婚。1.11周年。4.4生日  不要手贱
举报 只看该作者 4楼  发表于: 2018-06-06 0
亲爱哒棒棒哒

楼主留言:

么么哒~

北清欢°

ZxID:10178158


等级: 文学之神
举报 只看该作者 5楼  发表于: 2018-06-06 0
感觉好复杂

楼主留言:

还好,会了就不觉得复杂了

总有时代结束总有故事未完

壹柒壹

ZxID:11596843


等级: 热心会员
懒癌晚期,无药可医,最擅长中途放弃
举报 只看该作者 6楼  发表于: 2018-06-06 0
哇呜,好看,我也想试试这个

楼主留言:

https://www.paipai.fm/r7521529
还没将到修饰,不过前面的可以先看下~~~

十夜凉

ZxID:14155948


等级: 内阁元老
配偶: zy32593
……
举报 只看该作者 7楼  发表于: 2018-06-06 0
来来来开了教程等你

楼主留言:

https://www.paipai.fm/r7521529
教程~~~只更新了一点,特效还远……

觅星

ZxID:10356254


等级: 派派版主
配偶: 七家公子
被迫营业V我50救我    1.16周年/826结婚/924转正/1111生日
举报 只看该作者 8楼  发表于: 2018-06-06 0
求开教程~

楼主留言:

https://www.paipai.fm/r7521529
特效还远,不过可以先看下基础

聪明可爱的咸渔

ZxID:14218436


等级: 内阁元老
配偶: 帝凪.。
但行好事,莫问前程。一次性复制整页链接方法:表格那里勾掉只看代码!!勾掉!!
举报 只看该作者 9楼  发表于: 2018-06-06 0
楼上都是求教程的  窝就比较实在了
楼主接单么2333=W=

楼主留言:

暂时还不打算接单~
最近没什么灵感

pototo

ZxID:321766


等级: 热心会员
举报 只看该作者 10楼  发表于: 2018-06-07 0
教程好。煎饼果子来一套

楼主留言:

https://www.paipai.fm/r7521529
一起学习呀~~~只写了基础部分,特效还远……

洛竺

ZxID:11743695


等级: 文学之神
配偶: ficfans
现充,偶尔浮
举报 只看该作者 11楼  发表于: 2018-06-07 0
来来来
开教程

楼主留言:

https://www.paipai.fm/r7521529
教程~~~只写了开头的教程



穆清滢

ZxID:14911144


左手烧瓶右手试管,沉迷工作5.20小组周年6.16入组周年
举报 只看该作者 12楼  发表于: 2018-06-07 0
哇,开教程咩~
接单也行哇~

楼主留言:

https://www.paipai.fm/r7521529
只有教程,不接单了,写教程也好累啊~~~





云柒梦筝

ZxID:19554057


等级: 内阁元老
举报 只看该作者 13楼  发表于: 2018-06-21 0
很有意思啊
发帖 回复