产品使用及交流论坛

首页 » 产品使用交流区 » 安装及使用交流 » 模板DIY同步图文解析教程<含模板下载>适合新手学习
dimi - 2008/12/22 18:32:00
有兴趣的的朋友可以一起测试,现在安装 pageadmin 最新版本,选用默认风格~!~我们就在默认风格中修改,调试。
首先我们看这个 目标网站《也是刚制作好的一个》
然后和我们安装好的 pageadmin 模板经行对比,分析,目标网站的布局。
90
具体布局修改方法
91

接下来要做的就是 在原有的 CSS样式基础之上修改样式表  对于不太了解CSS样式的朋友,我们有傻瓜式的演示方式:
1. 顶部导航 修改位置:
template\style1 下lanmu.css

/*menu样式*/
.menu_box{clear:both;width:100%;}
                  /**********LOGO在上方样式***********/
.menu_box_style1_1{clear:both;border:0 solid #cccccc;}
.menu_box_style1_1_1{float:left;}
.menu_box_style1_1_2{float:right;padding:5px 0 0 0;}
.menu_box_style1_2{clear:both;Text-align:left;height:35px;background:url(images/menu_bg.gif) repeat 0 0;border:0 solid #dddddd;border-width:0 1px 0 1px;overflow:hidden;}
.menu_style_1{float:left;width:100px;Text-align:center;padding:9px 0 0 0;background:url(images/menu_style.gif) no-repeat 0 0;}
.menu_style_1_last{float:left;width:98px;Text-align:center;padding:9px 0 0 0;}
--------------------------------------------------------------------------------------------------------------------
一般情况来说,我们只需要修改 宽度,和背景图片即可。
对于新手来说,修改顶部的导航背景图片,完全可以采用另种方式!
92
-------------------修改网站宽度 在  红色
/*网站主体样式*/
body{word-break:break-all;color:#333333;margin: 0 0 0 0;font-size:12px;line-height:20px;text-align:center;font-family:宋体,Arial;}
.Page_style{width:900px;border:0 solid #cccccc;margin-left:auto;margin-right:auto;Text-align:center;overflow:hidden;}
a{color:#333333;text-decoration:none;}
a.detail{text-decoration:none;}
a:hover {text-decoration:underline;}
form,ul,li{list-style-type:none;margin:0 0 0 0;padding:0 0 0 0;}
p{padding:0 0 0 0;margin:0 0 0 0;}
div,td{font-size:12px;}
hr{border:1px solid #cccccc;line-height:1px;}
----------------
93
-----------这部分的CSS 我们可以定位搜索,一段一段的来修改CSS 样式,使他们相同。
94

新手一定要多练习! 多练习练习熟练就好啦!
反复练、重复练,肯定能做出来啦。 我都研究了3个多星期了,在这里还要感谢版主 xinyou 给咱提醒了一下。
:+ :+ :+ :+  直接修改css样式就可以了,不要重新布局设计,《那条路太难走啦!!!!!:# :# :# 》就用pageadmin后台里的模块设计。

连程序一起模板 提供下载
dimi - 2008/12/22 18:32:00
留位待编
dimi - 2008/12/22 18:32:00
留位待编
apple163 - 2008/12/22 21:36:00
这里太多高手了,不过你做的没xiyou的那个好看,整体颜色不搭配
dimi - 2008/12/23 12:58:00
xiyou是高手 值得我们去学习:+
mudyu - 2009/2/7 11:36:00
sdfsd
fast99 - 2009/2/8 18:39:00
顶了,感谢分享
ymjdesign - 2009/4/2 14:07:00
来学习的,

多多照顾
11994869 - 2009/4/3 0:29:00
多多照顾多多照顾:Z
payao - 2009/4/13 22:44:00
学习了
weizheng0449 - 2009/4/17 16:29:00
为什么我都看不见下载项?
weizheng0449 - 2009/4/17 16:30:00
还是没有
chenbiao88 - 2009/4/21 9:59:00
没见到下载地址.
target2009 - 2009/4/23 10:41:00
历害!牛人 ,学习了!
opteron842 - 2009/4/23 20:58:00
值得我们去学习
aiguolove - 2009/4/29 11:14:00
值得学习哦
dianthus - 2009/5/6 15:50:00
学习一下
千羽网络 - 2009/6/11 9:37:00
这个帖子好啊,适合新手了解。
3106yht - 2009/6/26 22:23:00
新手来学习~~~~~~~~~~~
meiquguo - 2010/1/31 19:36:00
学习 了 做的也很好了
zwqchina - 2010/1/31 21:39:00
不错,顶起来
cm911 - 2010/2/1 17:22:00
学习了的呵呵
leeoness - 2010/2/4 11:43:00
楼主教的是方法,不是来显摆的,有必要做的那么好看吗,把自己要说的东西说清楚就可以了,说的再多再好听,到后来自己说的是什么都不知道,还不如不说!
青叶子 - 2010/5/11 16:52:00
不错,学习一下,挺好的。
chris - 2010/5/13 10:40:00

哪位高手可以帮帮我?
该用户已被删除 - 2010/5/15 21:27:00
势必对不懂修改主题的同志有用
watermelon - 2010/7/20 20:08:00
值得学习
watermelon - 2010/7/26 19:27:00
学习了
zjpin - 2010/8/10 17:29:00
:strong:  不错  挺好的。。。
dream3610 - 2010/8/29 18:47:00
不错~
123
查看完整版本: 模板DIY同步图文解析教程<含模板下载>适合新手学习