CSS教程之Wordpress网站GreenGaint主题损坏网页结构的隐形杀手

只看该作者 · 发表于 2015-1-15 23:13:59

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

最新版本html5+CSS3与2014年10月29日，万维网联盟宣布，经过几乎8年的艰辛努力，该标准规范终于最终制定完成。
破洛洛文章简介：损坏网页结构的两个隐形杀手.
在创立GreenGaint主题的过程当中，有两个网页结构上的成绩让我头疼了很长工夫，一向没有找出究竟是那里出了成绩，但以后却在偶尔的情形下将这两个成绩办理了。这篇文章里我就将这两个损坏网页结构的隐形杀手总结一下，作为履历教导，供人人自创。先让我来讲说第一个成绩。
1、审慎利用wp_head()语句

发明第一个成绩的原因是我在<body>标签下创立了一个<divid=”wrapper”></div>容器，将页面中的全体内容都放到了这个容器以内，可是创立完主题以后却发明wrapper容器的顶部间隔<body>标签，也就是扫瞄器顶部有也许25个像素。为了确认这个间隙的存在，我给<body>标签和wrapper容器增加上了1个像素的border属性，发明的确存在这个成绩。然后我又细心反省了CSS代码，看看是否是手误给wrapper容器增加了margin-top属性，发明代码统统一般，这就让人烦闷了，究竟是那里出了成绩呢？
前一段工夫筹办更新GreenGaint主题，在收拾完head.php文件页首的<meta>和<Link>等标签后，检察页面源代码时，俄然发明在<head>标签内呈现了几行过剩出来的代码，细心一看，个中另有<style>标签，而且另有各类内边距外边距属性，这我就分明了，为何wrapper的顶部会事出有因空出几十个像从来了。本来是这里的<style>标签在作祟。可是这些代码并不是我写上往的，怎样会呈现在<head>标签内呢？经由仔细一行一行和head.php文件中代码的比对，发明有这么一句<?phpwp_head()?>很可疑，不晓得是干吗用的。搜刮查完材料后才晓得wp_head()是wordpress的一个十分主要的函数，基础上一切的主题在header.php这个文件里城市利用到这个函数，并且良多插件为了在header上加点器材也会用到wp_head()，好比SEO的相干插件。可是，在wp_head()呈现的这个地位，会增添良多其实不经常使用的代码。这就注释了为何在<head>标签内会呈现<style>标签和wrapper容器的顶部会呈现间隙的缘故原由，公然删除这句代码后，页面显现一般了。这里必要申明的是，间接将wp_head()函数删除大概会影响到某些插件的一般利用，以是假如你既不想让这句代码影响页面结构，又不想影响插件的利用，能够搜刮查询一下怎样平安的删除wp_head()代码的办法。
2、确保wordpress主题各文件的编码分歧

别的一个奇异的成绩就是侧边栏下沉的成绩，创立好GreenGaint主题以后，在测试主题在扫瞄器的兼容性上，我发明侧边栏在IE和Firefox中都很一般，惟独在Safari扫瞄器中，侧边栏向下下沉了几十个像素，顶部和内容区部分没法坚持在统一程度线上。反省了代码后没有发明任何成绩，这让我百思不其解。很长一段工夫这个成绩就被弃捐了，仍是在比来更新GreenGaint主题的时分，我俄然想到会不会是文件编码招致了这个成绩呢？用EditPlus翻开sidebar.php文件后，发明编码为UTF-8+BOM，而别的文件也是这个编码。固然我其实不分明这个编码是甚么意义，我仍是把sidebar.php和别的主题文件另存为了UTF-8格局，这以后再用Safari测试后发明统统一般，又一个诡异而让人头疼的成绩办理了。
</p>
学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。

只看该作者 · 发表于 2015-1-17 20:51:18

在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

只看该作者 · 发表于 2015-1-26 16:44:00

技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

只看该作者 · 发表于 2015-2-4 20:58:02

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

只看该作者 · 发表于 2015-2-10 10:32:41

Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

只看该作者 · 发表于 2015-3-1 12:19:48

还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

只看该作者 · 发表于 2015-3-10 18:11:55

时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

只看该作者 · 发表于 2015-3-17 10:08:19

使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

只看该作者 · 发表于 2015-3-24 07:16:46

dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] CSS教程之Wordpress网站GreenGaint主题损坏网页结构的隐形杀手

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子