本帖最后由 小白 于 2014-1-28 08:22 编辑
上面我们讲述了Discuz如何新建模板,接下来我们就说说魅族模板建立
方法/步骤
首先我们要在daodejing_mz这个文件夹里新建四个文件夹,如图所示其中:image是放置所要模仿的网站的图片.
建立文件夹后,我们先整理common文件夹里面所需要的东西,从default文件夹首先拷贝四个文件必须的文件:common.css,module.css,footer.htm,header.htm;并将common.css改名为extend_common.css,module.css改名为extend_module.css
如图所示
清空两个css文件夹里的样式表,接下来我们先根据魅族官网的布局写一下extend_common.css这个文件.
由第三部看到魅族头部模板的css是:
为了让读者更加容易阅读,每次更新尽量短,有利于读者阅读以及思考
我们知道魅族头部含有:#hd,#w_header,.m_top,.logo,c_menu,#mzCust,.cr
现在我们用google chrome将他的css代码copy下来,放到extend_common.css文件里面如图所示,具体代码如下:
- #w_header {background: url(../../template/daodejing_mz/image/headbg.jpg) 0 0 repeat-x;height: 80px;width: 100%;min-width: 1080px;}
- .m_top {width: 1040px;margin: 0 auto;padding: 25px 20px 0px;position: relative;z-index: 10;}
- /*logo*/
- #logo {float: left;height: 20px;width: 111px;background: url(../../template/daodejing_mz/image/head20121226.png) no-repeat 0 -60px;}
- #logo a {width: 122px;height: 20px;display: block;overflow: hidden;}
- .custHead, #globalName, .c_menu a, .sina, .tencent {background: url(../../template/daodejing_mz/image/head20121226.png) no-repeat;}
- /*导航*/
- a:visited {color: #222222;outline: none;}
- .c_menu {float: left;padding-top: 4px;padding-left: 30px;}
- .c_menu li {float: left;}
- .c_menu a {display: block;width: 100px;height: 18px;position: relative;}
- .c_menu a.r_store {background-position: -100px 0;}
- .c_menu a.r_prd {background-position: 0px 0px;}
- .c_menu a.r_buy {background-position: -200px 0;}
- .c_menu a.r_tech {background-position: -300px 0;}
- .c_menu a.r_flyme {background-position: -400px 0;}
- .c_menu a.r_bbs_selected {background-position: -500px -36px;}
- .c_menu .hideLeft {background-color: #d8d8d8;display: block;height: 12px;width: 1px;overflow: hidden;position: absolute;right: 0px;}
- /*用户*/
- #mzCust {float: right;height: 28px;line-height: 28px;margin-top: -9px;padding-top: 4px;}
- #mzCust .atag {cursor: pointer;margin: 2px 5px 0px 3px;_margin: 2px 3px 0px 3px;float: right;}
- #mzCust a:link, #mzCust a:visited {color: #a2a2a2;}
- #mzLoginArea3 {float: right;}
- #mzCust .atag {cursor: pointer;margin: 2px 5px 0px 3px;_margin: 2px 3px 0px 3px;float: right;}
- #mzCust .custHead {width: 18px;height: 17px;background-position: -124px -58px;float: right;margin-top: 6px;}
- .cr {display: block;float: none;font-size: 0;height: 0;line-height: 0;overflow: hidden;clear: both;visibility: hidden;}
这里我们要注意:魅族头部涉及到图片,我们要保存到建立的daodejing_mz/image里面,当然图片路径也要修改一下,魅族头部图片如下:
上述工作完成后,我们将魅族头部的代码直接复制到我们的daodejing_mz/common文件夹里的header.htm里面,没有错,是直接复制,因为魅族头部图片是静态的html和其他不同.
其中放置在<div id="mzCust" attribute="0">的代码是我们自己要修改的如下:
我们要复制的整体代码完整的如下:
|
