UCHome模板教程3—【思齐集完美方案】

UCHome模板教程1—【思齐集完美方案】
https://discuz.dismall.com/thread-1306125-1-1.html

UCHome模板教程2—【思齐集完美方案】
https://discuz.dismall.com/thread-1306138-1-2.html

在“UCHome模板教程2—【思齐集完美方案】”中，说明了如何新添一个自定义的CSS进行对系统默认模板的覆盖。

在今天的教程3中，给大家举一个实例说明。实例演示见www.siqiji.cn/home [智慧家园]  
免注册登录请用：test     test

思齐集-智慧家园中模板采用仿19楼模板风格，[不是原创，但文件却是原创的，呵呵，原因很简单，因为19楼的版子其实很多，但是代码很不精简，CSS代码还是那种非常低级的写法，为定义一个元素的属性用了10行代码，而实际上只需要2行就够了。因此，思齐集进行了重写。]

下面请大家详细看粘。本教程不提供附件的CSS下载。不过你如果仔细看贴的话，想必你应能自己为自己提供喜欢的19楼重定义CSS了。。。

第一个：Logo。
打开default模板下面的style.css找到最后一行：

1. #header .logo a{ width:85px; height:40px; display:block; background:transparent url(image/logo.gif) no-repeat scroll left center; overflow:hidden; }
   
2. #header .logo a img{ margin: -200px; }

复制代码

去掉width:85px; height:40px;

打开新建的CSS样式文件。如pphuang.css，写上新的CSS

1. .logo { float:left;}
   
2. .logo a { z-index:1; width:220px; height:63px;}

复制代码

接下来看DIV class="headerwarp" 这一块，去除它的背景并指定文本颜色：

1. .headerwarp{background:none;}
   
2. .headerwarp a { color:#F30; }

复制代码

再接下来，重写menu菜单类的样式。

1. .menu {height:28px; position:relative; top:35px; left:0px; }
   
2. .menu li {float:left;        margin:0;        padding:0;        list-style-type:none;        height:28px;        text-align:center;}

复制代码

美化一下：

.menu li a {padding:0 0 0 15px;        display:block;        font-size:12px;        background:url(image/header_product_navigation_left.gif) no-repeat left -57px;
        float:left;        overflow:hidden; color:#728038;        line-height:32px;        height:28px;}
.menu li a span {        background:url(image/header_product_navigation_right.gif) no-repeat right -57px;
        float:left;        overflow:hidden;        line-height:32px;        height:28px;        padding-right:15px;}
.menu li.Selected a {        padding:0 0 0 20px;        font-weight:600;        font-size:12px;        z-index:2;        background:url(image/header_product_navigation_left.gif) no-repeat left 0px;        float:left;        color:#FFF;        line-height:29px;        height:29px;        position:relative;}
.menu li.Selected a span {        PADDING-RIGHT: 20px; background: url(image/header_product_navigation_right.gif) no-repeat right 0px; FLOAT: left; LINE-HEIGHT: 29px; HEIGHT: 29px;}
.menu li.Selected a:hover {        padding:0 0 0 20px; display:block; background: url(image/header_product_navigation_left.gif) no-repeat left 0px; float:left; line-height:29px; height:29px;}
.menu li.Selected a:hover span { padding-right:20px; background: url(image/header_product_navigation_right.gif) no-repeat right 0px; border:0; float:left; color:#fcffce; line-height:29px; height:29px;}
.menu li a:hover {        background: url(image/header_product_navigation_left.gif) no-repeat left -29px; CURSOR: hand; COLOR: #728038; TEXT-DECORATION: none
}
.menu li a:hover span {        background: url(image/header_product_navigation_right.gif) no-repeat right -29px; COLOR: #577e12; TEXT-DECORATION: none
}

.hilite_hot { z-index:6; background: url(image/header_alacool_hot.gif) no-repeat; LEFT: 330px; WIDTH: 21px; LINE-HEIGHT: 20px; POSITION: absolute; TOP: -10px; HEIGHT: 20px}

接下来就是那条横杆了，在header.htm文件中添加对应的DIV，如partition1，CSS写上：

#partition1 {        border:1px solid #FE4900; font-size:0px; z-index:2; background:#FF521C; margin:0 auto; line-height:0px;  height:2px; width:968px;
}

再接下来是第二条菜单栏了，先定义好总体样式：

#big_sort {        width: 970px;        background: url(image/header_sub_navigation3_background.gif) repeat-x; margin:0 auto 10px; overflow:hidden;        line-height:0px;
        height:30px;        text-align:left; position:relative;
}

细化美化：

#big_sort .mend_l,#big_sort .mend_r {        background: url(image/header_sub_navigation3_side.gif);        width:6px;        line-height:0px;        height:30px;}
#big_sort .mend_l {float:left;}
#big_sort .mend_r {        background-position:6px 0px;        float:right;}

#big_sort ul {
        background: url(image/header_sub_navigation_compart.gif) no-repeat right 50%;         float:left; margin:5px 0 0 1px; overflow:hidden; width:12%; height:25px; text-align:center;}
#big_sort ul li {
        margin:0 auto; overflow:hidden; list-style-type:none;
}
#big_sort ul li a {        display:block; font-weight:600px; font-size:14px; margin:0 auto; width:110px; cursor:hand; color:#577e12; text-indent:10px; line-height:21px;        height:21px; text-align:left; text-decoration:none;}
#big_sort ul li a:hover {        background: url(image/header_sub_navigation_portal_left.gif) no-repeat;}
#big_sort ul li a:hover span {        display:block;        background: url(image/header_sub_navigation_portal_right.gif) no-repeat right 0px;         width:110px; line-height:21px; height:21px;}
#big_sort ul li a span b {        font-size: 12px}

整体差不多完成了。在多浏览器下面测试下，发现横杆严重错位了。进行IE7、8、FF下的重新调整：

#partition1 {position:relative; top:22px !important; top:0px; }

菜单栏样式：

*+html #big_sort {
        top:20px;
        height:45px;
}

到此，本教程算是完成了，不知道你的CSS怎么样了。这里特别声明下，如果你的HOME也是用19楼风格的话，那么你就会发现它里面的CSS真的很原始，将我上面所贴的代码进行复制粘贴，你会发现，精简成了1/10了！惊喜吗？

PS，上面只是CSS的相关举例重写，对应的DIV需要在Header.htm中进行ID或者CLASS的定义。怎么样，自己动手体会下吧！很快，你也会了！

祝你好运！附上一张所改代码截图，详细请见具体站点！http://www.siqiji.cn/home

原贴地址：http://www.siqiji.cn/forum/thread-2147-1-1.html

支持。。

没看懂，看不懂

本人专业承接各类模板风格设计与制作.业务联系QQ:270645573

pphuang 发表于 2009-6-21 13:12
本人专业承接各类模板风格设计与制作.业务联系QQ:270645573

i0299.com 模板要修改接吗