• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > wordpress CMS主题制作 > 制作wordpress主题教程(11):style.css主题样式文件(一)

    制作wordpress主题教程(11):style.css主题样式文件(一)

    作者: 分类:wordpress CMS主题制作 点击: 2,993 次
    wordpress CMS主题:ssmay主题

      通过前面几章的制作,wanlimm主题总体框架已经做完,首页index.php、文章页single.php、分类页(这里没有单独做,默认会使用index.php)、评论comments.php、头部header.php、底部footer.php、侧边栏sidebar.php以及主题函数functions.php等。但是,打开前台,虽能正常浏览,但是网页布局很乱(如下图),看起来不舒服、不美观、体验不好,怎么办?我们要通过CSS样式来调整它,让网页前台能漂亮展示,提升用户体验。

      制作wordpress主题教程(11):style.css主题样式文件(一)

      通过dreamweaver打开wanlimm主题的style.css文件(这个我们在前面已创建)。

      首先,设置网页的宽度,一般网站的网页宽度是1000左右,我们就在style.css文件添加如下代码:

      *{margin:0;padding:0;}
      body{padding:0px;margin:0; line-height:180%;font-size:12px;font-family:Verdana,Arial,Helvetica,Microsoft YaHei,small,sans-serif;text-align:center;color:#333; }
      div,form,img,ul,ol,li,dl,dt,dd{margin:0;padding:0;border:0;text-align:left;}
      h1,h2,h3,h4,h5,h6 {margin:0;padding:0;font-weight:bold;margin-right:auto;margin-left:auto;}
      ul,li {list-style:none;}
      a {color:#555; text-decoration:none;}
      a:hover {color:#df0031;text-decoration:underline;}

      #wrapper { margin:0 auto; width:1000px; background:#CCCCCC; }

      上面的最后一句的意思是:网页宽度1000px,右右居中,背景色是浅灰色,如下图:

      制作wordpress主题教程(11):style.css主题样式文件(一)

      然后设置标题和描述、导航菜单的样式,添加下面的代码:

      h1 { font-size:32px; float:left; font-weight:800; line-height:60px; width:80%; margin-left:20px; }

      .menu{width:100%;padding-left:5px;overflow:hidden;float:left; margin-bottom:15px;}
      .menu li{float:left;height:36px;line-height:38px; width:100px; text-align:center;font-size:16px;font-weight:bold;overflow:hidden;}

      通过上面的代码,标题和菜单就规范化了,如下图:

      制作wordpress主题教程(11):style.css主题样式文件(一)

      然后再首页文章列表的样式,代码如下:

      /* 文章标题列表 */
      .content{ width:730px; float:left; margin-left:15px; }
      .post{ float:left; margin-bottom:20px; }
      .info{ line-height:30px; }
      .info a{ color:#660000 }

      效果如下图:

      制作wordpress主题教程(11):style.css主题样式文件(一)

      嗯,本章就介绍到这里,下一章我们接着介绍侧边栏和底部的CSS样式设置。

       



      QQ二维码

    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201505274104.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.