Skip to main content
 Web开发网 » 站长学院 » Wordpress教程

做网站之家:wordpress实例网页模板css实战篇(二)

2021年07月13日7790百度已收录

  节课我们将进入wordpress做网站模板实战操作第一课,先回忆一下在上一节中我们已经对css进行了一些基本的规则与一些属性的用法。这一节课我们将对之前所学习的css进入加深的了解,这节课我们以wordpress作为做网站模板的教程,本章节中有对css的进一步了解与使用,在本节中为了让学员更好的理解与体会我们用了很多种手法去书写css。建义在自己实际做网站的过程中,可以以自己最为简便以及能够实现的效果为佳。

  先看一下今天这节课的实际效果,为了更简单的程现网站的效果和css的属性,所以做网站之家:像素来制作这个可真说得上是真正的微博该有的样子了。效果图版中为了更直观的观看到网站的构架我们在最外层与最内层分别加入了内补丁即是内间距,在实际操作中一般是不需要这样布局,这样也只是为了更方便同学观看而已。

做网站之家:wordpress实例网页模板css实战篇(二)  网页模板 实战 wordpress 实例 之家 第1张

  一:先来认识一下这节我们这个实战课程用到的文件style.css样式表、header.php顶部调用文件index.php主页主体文件、sidebar.php侧边栏文件、footer.php底部文件、category.php例表页、single.php详细页文件,做网站之家小贴示如果你的网站页面是缺少category.php例表页文件wordpress侧调用:archive.php文件。

  上一节中我们对基本的css语法进行过讲解相信同这对这些代码不会感到陌生。从代码中我们可以看出页面是居中的小贴示使用wordpress模板的时候由于格式问题我们得要处理一下:

  1:如果你使用的源码是UTF-8码,而模板为GBK的情况下在模板上写上中文是会乱码的,解决办法:用记事本或Dreamweaver打开模板文件,别存为编码为UTF-8格式,再进行编辑就好了,为了方便编辑页面做网站之家推荐各位使用Dreamweaver来进行做模板。

  2:转换的UTF8由于BOM问题,我们使用margin属性居中时是不生效的,我们还需要用Dreamweaver打开页面选择新建一个PHP动态页。步聚为选择文件–>新建–>动态页–>PHP–>–>点首选参数–>默认文档为PHP–>文档类型选择 XHTML 1.0 Transitional–>默认编码选UTF-8–>下边有个包括Unicode签名(BOM)将其去除不钩选,这样页面就正常了,可以进入工作状态。

  3:为了能够更好的展示效果,我们做wordpress模板的时候,都是先写在了header.php文件上,受图片影响做网站之家还真是伤不起呀!先贴上模板页面代码:

  #warp{

  position:absolute;这个是层浮动设置,层也为上下级可以用z-index:1;来控制数值越大,越在上层显示。

  #warp{

  position:absolute;这个是层浮动设置,层也为上下级可以用z-index:1;来控制数值越大,越在上层显示。

  (浮动层详细说明使用方法:

  position : static | absolute | fixed | relative

  取值:

  static :  默认值。无特殊定位,对象遵循HTML定位规则

  absolute :  将对象从文档流中拖出,使用 left , right , top , bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据 body 对象。而其层叠通过 z-index 属性定义

  fixed :  未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范

  relative :  对象不可层叠,但将依据 left , right , top , bottom 等属性在正常文档流中偏移位置

  此篇官网还有2/3详细到做网站之家官网查看。需要做网站,想知道如何做网站,需要做网站seo优化排名请到官网联系。

  本文由做网站之家原创,本文地址:/尊重版权,转载请注明

评论列表暂无评论
发表评论
微信