模板DIY同步图文解析教程<含模板下载>适合新手学习 [复制链接]

有兴趣的的朋友可以一起测试，现在安装 pageadmin 最新版本，选用默认风格~！~我们就在默认风格中修改，调试。
首先我们看这个 目标网站《也是刚制作好的一个》
然后和我们安装好的 pageadmin 模板经行对比，分析，目标网站的布局。

具体布局修改方法


接下来要做的就是 在原有的 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;}
--------------------------------------------------------------------------------------------------------------------
一般情况来说，我们只需要修改 宽度，和背景图片即可。
对于新手来说，修改顶部的导航背景图片，完全可以采用另种方式！

3.jpg(90.81 K)

2008/12/22 18:44:16

-------------------修改网站宽度 在  红色
/*网站主体样式*/
body{word-break:break-all;color333333;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{color333333;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;}
----------------

-----------这部分的CSS 我们可以定位搜索，一段一段的来修改CSS 样式，使他们相同。


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

连程序一起模板 提供下载