wordpress CMS主题 微信
  • 全部教程
  • Home > wordpress CMS主题制作 > 制作wordpress主题教程(11):style.css主题样式文件(一)

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

    高时银博客 wordpress CMS主题制作 点击: 1,760 次 0 0

    通过前面几章的制作,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样式设置。

     


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

    目前还没有评论。赶快来坐沙发吧。

    发表评论