在线css编辑器-有没有比较强大的html+js+css编辑器？

参照这个修改就对了!

空间名称和简介区域

#header ――主体部分―空间头部的整个标题部分

#header ――主页左上角背景图片

#header ―― 主页右上角背景图片

#header ――空间名称,即主标题,名字大小颜色

#header a.titlink ――空间名称链接,未被点击

#header a.titlink:visited――已被访问过的链接

#header ――空间简介,即副标题,位置大小颜色

-------------------------------------------------------------------------------

导航栏

#tabline ――菜单下方的横线,即分隔符,用来与空间名称分开

#tab ――导航菜单栏主体―页面上方“主页博客|相册……”栏背景图片

#tab a.on,#tab a.on:link,#tab a.on:visited―― 选中状态,即“导航栏链接”,大小颜色+背景

#tab span ――导航栏项与项之间的分割符“|”

#tab a:link ――TAB“博客|相册……”栏链接颜色,未被点击

#tab a:visited――“博客|相册……”已被访问过的链接

#tab2 ――(基本选项 | 模板设置 | 高级设置 | 访问统计) 这行的菜单主体属性

#tab2 span ――TAB选中状态

#tab2 a ――TAB未选中状态

#tab2 a:link

#tab2 a:visited ――已被访问过的链接

-------------------------------------------------------------------------------

内容区域

.stage ――页面正文所有部分(导航栏以下)

其它区域(即访问量等信息)

#comm_info 主体部分――“其它”中“已有 人次访问本空间”颜色、位置

#comm_info ――“已有 人次访问本空间”下面粉红色分割线相关设置

#comm_info a――“其它”中“什么是RSS?”颜色

#comm_info a:hover――悬停效果

#comm_――区域标题

#m_comm_――其它区域模块

#pvshow――访问量数字字体#m_comm_info div a――百度logo

--------------------------------------------------------------------------------

页码区域

#page ――主体 高度大小位置

#page span―― 当前页码(不可点击)

#page a.pc―― 上一页和下一页 未被点击

#page a.pc:visited―― 已被点击

#page a.pi ――页码(可点击)

#page a.pi:visited ――已被访问过的链接

--------------------------------------------------------------------------------

模块区域

.mod ――模块标题,上下间距

.modhandle{cursor:move}

.modth ――模块标题栏主体和正文之间的距离

.modhead ――模块标题区的位置

.modopt ――模块操作区(如写新文章),间距

.modtit ――模块标题区(如文章列表、个人档案)大小颜色

.modtitlink ――模块标题链接

.modact ――操作文字链接,“修改个人资料”链接,――右上角“编辑”等链接的相关大小颜色设置。

.modbox ――模块内容区主背景颜色等

a.modact:link――“修改个人资料”链接颜色

a.modactlink:visited ――已被访问过的链接

.modtl ――模块左上角远郊边沿图片背景,第一列,空列

.modtc―― 模块中上的背景图片背景,第二、三列,个人档案、修改个人资料

.modtr ――模块右上角背景图片背景,第四列,空列

.modbl ――模块左下角背景图片背景

.modbc―― 模块中下、最下端一条背景图片背景

.modbr ――模块右下角背景图片背景

--------------------------------------------------------------------------------

文章区域

#m_blog ――文章标题

#m_blog a ――文章标题链接,大小颜色,未被点击

#m_blog a:visited ――文章标题大小颜色已被访问过的链接

#m_blog ――文章发表日期,文字大小颜色

#m_blog ―― 文章内容大小颜色

#m_blog ――“阅读全文>>”

#m_blog a ――“阅读全文>>”的大小颜色,未被点击

#m_blog a:visited ――“阅读全文>>”的大小颜色已被访问过的链接

#m_blog ――文章操作区(如“编辑”等的颜色大小)

#m_blog a ――文章操作链接大小颜色

#m_blog a:visited ――“编辑 删除 评论(4) 浏览(21)”已被访问过的链接

#m_blog ――分隔条的相关设置

#m_blog ――无文章提示信息,隐形设置,不需要改变

--------------------------------------------------------------------------------

个人档案区域

#mod_――首页个人档案标题

#m_pro a ――个人档案中“查看详细信息”的颜色,未被点击

#m_pro a:hover――悬停效果

#m_pro a:visited ――个人档案中“查看详细信息”已被访问过的链接

#m_pro ――个人档案中个人头像的显示位置,分为“中,左,右――center,left,right”

#m_pro ――操作区――个人介绍和头像的间距

#m_pro ――个人用户名的大小颜色

#m_pro ――个人简介的大小颜色

#m_pro ―― 分界线

#m_pro td

#m_pro .photo――照片的背景(此项以下不能预览

#m_pro .photo td――加为好友发送消息中间“|”

#m_pro .photo .image

#m_pro .photo .line――头像下划线

#m_pro .ref

#m_pro .ref .tit――从“用户名”到“圈子”

#m_pro .ref .cnt

#m_pro .basic td――用户名至查看该用户在百度的等

#m_pro .basic .tit

#m_pro .basic a:hover――男省份日期链接,鼠标悬浮在上的链接,未被点击

#m_pro .basic a.nlk:hover――“贴吧发言”“知道回答”

#m_pro .pline――中间分界线

#m_pro .pitem――字体 高度

#m_pro .pitem .tit――我曾就读过的学校等

#m_pro .pitem a:hover――鼠标悬浮在上的链接

--------------------------------------------------------------------------------

相册区域

#m_album ――相册中照片的显示位置,分为“中,左,右――center,left,right”

#m_album ――“上一页”>>“下一页”

#m_album a ――“上一页”的“下一页”未被点击

#m_album a:visited―― “上一页”的“下一页”已被访问过的链接

#m_album ――相册预览区域

#m_album a img――图片链接

#m_album a:hover img――图片悬停效果

#cbut――相册操作按钮

#cbut a img{border:0px;filter:alpha(enabled=0)} ――按钮图片

--------------------------------------------------------------------------------

友情链接区域

#m_links ――子项――友情链接中字体颜色大小

#m_links a ――名称(链接)――友情链接中字体的大小颜色,未被点击

#m_links a:visited ――友情链接中字体的大小颜色,已被点击

#m_links ――分界线

--------------------------------------------------------------------------------

自定义模块1-4

#m_mylink1-4 ――“描述”的内容

#m_mylink1-4 a――标题链接名称

#m_mylink1-4 a:visited――标题链接名称已被访问过的链接

#m_mylink1-4 ――分割线

--------------------------------------------------------------------------------

文章分类区域

#m_artclg ――子项――文章分类中各分类后面主题数及括号的大小颜色

#m_artclg a ――分类名称(链接)――文章分类中各分类的大小颜色,未被点击

#m_artclg a:visited ――文章分类中各分类已被访问过的链接

#m_artclg ――分界线――文章分类中各分类之间的分隔符的相关设置

--------------------------------------------------------------------------------

最新评论区域

#m_comment ――子项――最新评论中用户名的大小颜色,未被点击

#m_comment a ――最新评论中用户名的大小颜色,未被点击

#m_comment a:visited―― 最新评论中用户名的大小颜色,已被点击

#m_comment a.cnt ――最新评论中评论文字的大小颜色,未被点击

#m_comment a.cnt:visited ――最新评论中评论文字的大小颜色已被访问过的链接

#m_comment a.cnt:hover ――最新评论中评论文字鼠标悬浮在上的链接

#m_comment ――最新评论中各评论之间的分割线的相关设置

--------------------------------------------------------------------------------

相册列表

#m_albumlist――第一层相册区域背景

#m_albumlist ――无照片提示信息

#m_albumlist a img――小相册封面图

#m_albumlist a:hover img――鼠标悬停效果

#m_albumlist ――分界线

#m_albumlist ――相册标题

#m_albumlist a

#m_albumlist a:hover――悬停效果

#m_albumlist ――照片数量

#m_albumlist a.act――操作区链接,如编辑、删除

#m_albumlist a.act:hover――鼠标悬停效果

#m_albumlist ――相册第二层图片区域

#m_albumlist ――相册简介

#m_albumlist ――照片尺寸

#m_albumlist #page ――当前页码

#m_albumlist #page a――其他页码

#m_albumlist #page a:hover――鼠标悬停效果

#imagee a img――第三层图片区域

#m_albumlist a img――图片

#m_albumlist a:hover img――图片按钮悬停样式

#m_albumlist ――图片信息

#m_albumlist ――操作按钮的区域

#m_albumlist a img――操作按钮

#m_albumlist a:hover img――操作按钮悬停样式

--------------------------------------------------------------------------------

好友列表

#m_friend

#m_friend

#m_friend a img――好友头像

#m_friend a:hover img――悬停效果

#m_friend

#m_friend a ――好友名称(链接),未被点击

#m_friend a:hover――悬停效果

#m_friend a img――操作按钮图片

#m_friend a:hover img――操作按钮图片

#m_friend a:visited ――已被访问过的链接

#m_friend ――分界线

--------------------------------------------------------------------------------

设置访问统计、模板设置

#m_setting a ――链接{color:#3399CC}

#m_setting a:hover――悬停效果

#m_setting a:visited ――颜色的设置,已被访问过的链接

#m_setting ――主体颜色的设置,已被点击

#m_setting ――模板预览图(选中状态){border:4px solid #FFDB7B}

#m_setting ――模板预览图(未选中状态)

#m_setting ――模板标题名称

#m_setting ――作者名

#m_setting ――“当前模板”文字

#m_setting ――分界线

--------------------------------------------------------------------------------

系统公告

#m_sysinfo a ――链接 颜色的设置,未被点击

#m_sysinfo a:visited ――颜色的设置,已被访问过的链接

#m_sysinfo ――主体 颜色大小

#m_sysinfo ――最新 颜色大小

#m_sysinfo ――发布时间颜色大小

--------------------------------------------------------------------------------

基本选项

#m_setbase ――主体颜色大小

#m_setbase td ――颜色大小

#m_setbase ―― 分界线

#spSpaceName――空间名称

#spSpaceDescri――空间简介

#spConfigDispNum――每页显示文章

#spConfigDispMod――文章显示

#spDateMod――时间格式

#btn_submit――保存选项按钮

--------------------------------------------------------------------------------

网友评论

#in_comment ――主体宽度

#in_comment ――标题颜色大小等设置

#in_comment ――发表人名、序号、-线颜色大小等设置

#in_comment a ――发表人名(链接)未被点击的颜色大小

#in_comment a:visited ――已被访问过的链接

#in_comment ―― 发表时间颜色大小

#in_comment ――评论内容颜色大小

#in_comment ――分隔符的设置

#in_send ――发表评论(标题)的设置

--------------------------------------------------------------------------------

文章存档

#m_filed ――主题的颜色大小设置

#m_filed a ――未被点击的颜色大小设置

#m_filed a:visited ――已被访问过的链接

#m_filed ――分界线

--------------------------------------------------------------------------------

最近访客

#m_track a ――访客ID字体颜色大小

#m_track a:hover―― 鼠标悬浮在ID上的链接

#m_track a img ――访客头像的滤镜效果,其他滤镜效果 {filter:invert} , {filter:xray }

#m_track a:hover img ――鼠标在访客头像上的悬停效果

--------------------------------------------------------------------------------

百度搜索

#m_search――百度搜索区域

#m_search ――“互联网”等字体设置

#m_search ――“互联网”等底色设置

#m_search ――“百度搜索”设置

#mod_{background:url() no-repeat 0% 0%} ――百度搜索标题

#m_search ――输入框

#m_search label――选框区域

#m_search ――选框前的圆圈

#m_search ――提交按钮

--------------------------------------------------------------------------------

留言板

#mod_――留言板模块

#mod_board ――以下6项如不设定则继承通用模块的样式

#mod_board

#mod_board

#mod_board

#mod_board

#mod_board

input.#spBCmtAuthor――留言姓名输入框

input.#spBCmtURL――留言网址输入框

#spBCmtText――留言输入框

#vercode input――验证码输入框

#in_send td.f14 input――留言按钮

#in_msg div――留言区

#in_msg a――留言区链接

#in_msg a:hover――悬停效果

#in_msg ――网友留言标题

#in_msg ――网友留言标题

#in_msg ――留言序号

#in_msg ――留言用户

#in_msg a img――用户头像

#in_msg a:hover img――悬停效果

#in_msg ――留言时间

#in_msg ――留言内容

#in_msg ――分界线

--------------------------------------------------------------------------------

我的搜藏

#m_cang ――主体的颜色大小设置

#m_cang a――未被点击的颜色大小设置

#m_cang a:hover――悬停效果

#m_cang a:visited――已被访问过的链接

#m_cang ――分界线

--------------------------------------------------------------------------------

柱状图

.stat td{line-height:22px;color:#333333;font-size:14px}/*累计访问量等字体*/

.chart{position:relative;margin:10px 0 30px 31px;border:1px solid #B3B3DC}/*柱状图上\左边线*/

.chart ,.chart {position:absolute;background:#DCDCF4;border:1px solid #B3B3DC;line-height:0}/*线柱颜色\底边颜色*/

.chart {background:#C2C2F4}/*线柱悬停效果*/

.chart {position:absolute;border-top:1px dotted #B9B9B9;line-height:0}/*分隔线*/

.chart ,.chart ,.chart {position:absolute;color:#666;font-size:9px;font-family:Arial;text-align:center;white-space:nowrap}/*坐标数字*/

.chart {color:#FF0000}/*月份起始字体颜色*/

.chart {position:absolute;z-index:1000;width:100px;color:#666;font-size:12px;font-family:Arial}/*线柱悬停访问统计数字效果*/

.chart {text-align:right}

.stattop{float:left;margin-top:20px;margin-right:14px;padding:10px;width:199px!important;width:220px;border:1px solid #CDCDCD}/*以下为分析设置*/

.stattop{float:left;margin-top:20px;margin-right:14px;padding:10px;width:199px!important;width:220px;border:1px solid #CDCDCD}

.stattop .list{margin-top:6px}

.stattop .list td{height:20px}

--------------------------------------------------------------------------------

日历

#mod_cals .modbox――日历模块

#cals――日历主体背景、边框

#mod_cals .modbox td ――字体颜色设置

#m_cals――设置模块背景颜色

#m_cals div――背景设置

#cals .cal_body,#cals .cal_mth――除年月控制器外的日期部分,包括周和一般日期

#cals .cal_yr table――年、月表格

#cals .cal_yr td――*年、月单元格

#cals .cal_yr .cal_pre――上一月箭头(正常)

#cals .cal_yr .cal_nxt――下一月箭头(正常)

#cals .cal_yr .cal_pre_ovr――上一月箭头(鼠标悬停)

#cals .cal_yr .cal_nxt_ovr――下一月箭头(鼠标悬停)

百度空间模板速成制作第一步:确定自己博客的主题

你的模板以什么主题为主?是娱乐,还是游戏?是生活杂感?还是随笔?以主题为出发点设计自己模板的色彩风格,简单画出自己模板的造型,模块背景采用透明效果还是半透明效果还是不透明等等问题,大体上做到心中有数。比如我的空间是以魔兽世界为主题,那么就应该以厚重,气势磅礴的风格突出魔兽世界这个游戏的内涵特点,反之如果你的空间是以情感为主题,就适合采用浪漫温柔的风格。

确定第一步问题完全解决了,进入下一步。

百度空间模板速成制作第二步:准备工具

关键性的网址:百度空间模板CSS教程网址 这个网址有你设计模板所关心的大部分问题。我有很多是从这里参考转载的。

制作模板可能会使用到以下工具:WINDOWS自带的画图工具,ACDSEE图片格式转换器,百度的相册,记事本。

同时还需要设计你博客所需要的素材,比如我这个魔兽世界空间,首先在游戏所在盘符找到了游戏自带的素材,然后我又上网下载了一个“魔兽世界素材包”,然后自己又上游戏截了几张自己满意的图片,用于制作自己空间的素材。

还需要善于使用百度搜索你需要解决的问题,不会的摆渡一下吧。不了解这步的,可先进行第三步,遇到问题了再来看看这步。

百度空间模板速成制作第三步:开始制作,流程如下(以下链接点击进入):

( 一),主要流程。

1, 设置透明音乐背景播放器 音乐播放器不能经过代码的改动放视频了(被百度封杀了),羡慕那些老空间还可以继续用。倒霉播放器那么大个,我们就把播放器透明化吧!

2, 在空间顶部加入图片 给人以视觉冲击的好办法

3,设置透明背景 透明的能看到背景!

4,设置百度空间背景半透明效果 太透明我不喜欢,我喜欢半透明,朦胧点的试试这个吧。

5,设置鼠标特效 在空间内鼠标会变成蝴蝶,点上链接之后又会变成花朵,或者其他图案。

6,更改空间主页的名称和简介字体的大小颜色 空间名称和简介,默认字体和颜色太单调了,换换吧。

7, 设置百度空间文章标题周围的花边和背景 装饰空间必备

8,设置百度空间发表评论框的背景图片 网友发表评论时一定会看到的图片,很酷的哦!

9,设置百度空间各个模块的分割线 使你的空间变的整齐有序

10, 在百度空间各个模块里加入滚动条 如果设置空间半透明效果了,这个滚动条就别加了,会使你加了半透明效果的模块效果消失。

11, 设置百度空间"文章置顶"功能 自己有重要的文章需要置顶但是百度空间又没有这个功能怎么办?

(二),可以考虑加入的附加流程:

1,在百度空间里设置多首背景音乐 自我感觉不太实用

2,百度空间的名称用艺术字 追求浪漫华丽的摸板必备

3,让自己的百度空间有下雨效果 打造浪漫气氛

4,设置“其他”模块下的背景 强烈推荐

5,在百度空间设置留言本功能 动动自己的脑子其实哎,自己也应该能想出来的

6,在百度空间设置 “置顶文章” 一个是牺牲了模块的方法,一个是比较变态的方法

7,空间上设置显示IP,日历,天气预报等信息 属于空间小装饰品吧

8,让百度空间的文字有发光效果 绚丽多彩

更多 如果以上没有你想要的东西,或者你想了解更多的东西,那么来这里看看。

如果你将以上的链接都看过了,并且都按照步骤制作了,恭喜你,你的模板即将完成了,进入下一步吧。

百度空间模板速成制作第四步:检查维护你的模板。

从某种角度来讲,你制作完你的模板之后正意味着你的模板制作才刚刚开始,自己或别人使用过程中经常会出现你以前没有料到的差错,你可以找一些朋友来使用和评价一下你新做的模板,有什么缺点和优点,扬长避短,只有不断更新修整和维护的模板,才是最好的模板。

以下是知道的资料:

0.空间制作目录

1.百度官方空间CSS说明

2.最浅显易懂的百度CSS教程

3.你的博客值多少钱?

4.如何提高百度空间访问量?

5.给百度空间的几点改进建议

6.百度空间的网址功能连接项

7.个人空间常用特殊符号介绍

8.CSS代码图解(转)

9.百度空间实用技巧集

10.百度空间个性代码

11.利用重新定义标签,达到写文章时迅速排版的目的

12.边框风格属性(border-style)

13.百度空间布局剖析

14.浏览器窗口滚动条特效及添加滚动条的方法

15.教你怎样让背景自动更新,包括头背景

16.给超链接添加按钮效果

17.超链接效果修改--由浅入深

18.插入图片位置的代码及效果演示图

19.使博客文章中链接在新窗口中打开

20.文字发光方法!!!

21.自制闪字空间名称

22.各模块添加滚动条实例 + 参数详解

23.在百度空间里面添加自己的LOGO等等特效技巧

24.无缝调用不同模板CSS的办法

25.在文章中插入FLASH的制作过程

26.百度空间添加FLASH播放器

27.教你如何制作个性化的标题栏

28.文章列表板块文章区边框的设置

29.百度空间搜索模块css样式

30.增加天气预报的方法

31.空间模块巧移动 + 文字快速插链接

32.在您的站点上添加 Windows Live Favourites 收藏入口

33.滚动条与无滚动条

34.背景音乐――透明渐变播放器

35.显示IP地址代码

36.如何做半透明的百度空间

在线编辑器

38.做分割线的方法

39.教你如何装饰(发表评论版块空白区)

40.装饰百空"发表评论"的"内容"部分

41.给自己的主页加上漂亮的计数器

42.在百度空间文章中设置滚动字

43.改变百度空间的模块宽度

边框属性

45.网页滚动效果设置

46.一些CSS效果教程补遗

47.查看任何人CSS代码和音乐地址的最简单方法

48.访问量字体改变.........

49.关于百度空间新出的“最近访客”的css

50.打造个性鼠标效果

51.百度空间设计的"终极技巧"

52.留言板代码

53.关于百度空间实现各区域不同样式的定义

54.实现百度官方空间的三列式布局

55.致Baiduer CSS初学者

56.打造空间个性的图片效果

57.解决百度模板横向滚动条的问题

58.给空间加点可爱的符号

59.百度空间竖状菜单效果代码

60.分隔线素材大全及其它素材

鼠标样式大全

慢慢看哦!

参考资料:

编辑器的话推荐微软家的VSCode.功能强大,启动快,插件丰富,你值得拥有。

如果想要IDE的话,推荐JB公司的WebStorm.专业前端IDE更强大。

点击头像,欢迎访问的头条,更多好玩内容等着你