您的位置:首页 > Web前端 > CSS

ecshop模板制作5-调整首页样式

2013-08-23 00:09 183 查看
保留头,内容,脚,上中下三层结构

1,修改页头

themes\default\library

page_header.lbi

1)修改logo样式

<div class="f_l"><a href="../index.php" name="top"><img src="../images/logo.gif" /></a></div>

->

class="logo"

修改style.css

.f_l{float:left;}

->

.logo{

float:left;

margin-left:50px;

margin-top:30px

}

2)修改登录样式

{insert name='member_info'}

includes/lib_insert.php

$output = $GLOBALS['smarty']->fetch('library/member_info.lbi');

library/member_info.lbi

<a href="user.php"><img src="images/bnt_log.gif" /></a>

<a href="user.php?act=register"><img src="images/bnt_reg.gif" /></a>

->

<a href="user.php">登录</a>

<a href="user.php?act=register">我的帐号</a>

3)修改搜索栏位置

删除

library/page_header.lbi

<!--search start-->

<div id="search" class="clearfix">

</div>

<!--search end-->

添加

library/member_info.lbi

<form id="searchForm" name="searchForm" method="get" action="search.php" onSubmit="return checkSearchForm()" class="f_r" style="_position:relative; top:5px;">

<select name="category" id="category" class="B_input">

<option value="0">{$lang.all_category}</option>

{$category_list}

</select>

<input name="keywords" type="text" id="keyword" value="{$search_keywords|escape}" class="B_input" style="width:110px;"/>

<input name="imageField" type="submit" value="" class="go" style="cursor:pointer;" />

<a href="search.php?act=advanced_search">{$lang.advanced_search}</a>

</form>

4)修改中部导航栏样式

page_header.lbi

<div id="mainNav" class="clearfix">

添加样式

<div id="mainNav" class="clearfix m_nav">

style.css

/*页面主导航*/

.m_nav{

position:absolute;

margin-top:-40px;

margin-left:400px;

}

5)将购物车信息放在页头处(类似淘宝)

index.dwt

<!-- #BeginLibraryItem "/library/cart.lbi" -->

{insert_scripts files='transport.js'}

<div class="cart" id="ECS_CARTINFO">

{insert name='cart_info'}

</div>

<div class="blank5"></div>

<!-- #EndLibraryItem -->

移到

page_header.lbi

下面

隐藏显示

/library/cart.lbi

<div class="cart" id="ECS_CARTINFO">

->

<div class="cart" style="position:absolute;float:left;visibility:hidden;" id="ECS_CARTINFO">

2,修改页脚

themes\default\library\page_fotter.lbi

1)修改底部导航栏样式

themes\default\library\page_fotter.lbi

删除

<div class="f_r">

<a href="#top"><img src="images/bnt_top.gif" /></a> <a href="../index.php"><img src="images/bnt_home.gif" /></a>

</div>

修改

<div class="f_l">

->

<div class="f_r">

2)修改页脚内容

themes\default\library\page_fotter.lbi

1>修改版权标识

可以参考这里
http://www.ecmoban.com/article-1642.html
进一步深入的修改可以参考这里
http://www.ecmoban.com/article-285.html
删除style.css中的图片

/*版权*/

#footer{background:url(images/logo1.gif) no-repeat 5% 50%; padding-left:200px; width:760px; margin:10px auto;}

#footer .text{background:url(images/footerLine.gif) no-repeat left center; padding-left:50px; *padding-bottom:20px;}

修改

/languages/zh_cn/common.php

$_LANG['copyright'] = "© 2005-%s %s 版权所有,并保留所有权利。";

->

2013 XXXX All rights reserved.

2>去掉底部的Powered by ecshop 270

打开 js/common.js

删除第244行:onload = function()【一定要删除这个完整的,不然会页面版权乱飞】

再打开模板文件夹的 library/page_footer.lbi

删除 {foreach from=$lang.p_y item=pv}{$pv}{/foreach}{$licensed}

3>删除查询信息和rss

themes\default\library\page_fotter.lbi

删除

{insert name='query_info'}

<div align="left" id="rss"><a href="{$feed_url}"><img src="../images/xml_rss2.gif" alt="rss" /></a></div>

4>修改备案号样式

themes\default\library\page_fotter.lbi

<!-- ICP 证书{if $icp_number} -->

<span class="f_l" style="margin-top:-35px;margin-left:250px;"> {$lang.icp_number}:<a href="http://www.miibeian.gov.cn/" target="_blank">{$icp_number}</a></span><br />

<!-- 结束ICP 证书{/if} -->

5>添加页底链接

themes\default\library\page_fotter.lbi

<div class="f_r" style="margin-top:-50px;margin-right:-80px;">

<a href="#" target="_blank" >网站地图</a>

-

<a href="#" target="_blank" >法律声明</a>

-

<a href="#" target="_blank" >联系方式</a>

</div>

以下文件是属于index.dwt,但我还是将其归类到页脚

6>删除友情链接

themes\default\index.dwt

<!--友情链接 start-->

<!--友情链接 end-->

7>删除帮助

其实帮助还是蛮有用的,详细设置可以参考这里,但有这里我只能按客户要求删除之
http://www.ecmoban.com/article-1558.html
themes\default\index.dwt

<div class="blank5"></div>

<!--帮助-->

<!--帮助-->

3,修改主内容区

themes\default\index.dwt

1)删除商店公告

<!--站内公告 start-->

<!--站内公告 end-->

2)删除品牌分类

<!--今日特价,品牌 start-->

<div class="clearfix">

<!--特价-->

<!--品牌-->

</div>

5)修改轮播栏

1>修改位置

<div class="f_l" id="focus">

<!-- #BeginLibraryItem "/library/index_ad.lbi" --><!-- #EndLibraryItem -->

</div>

复制到此之上

<div class="block clearfix">

<!--left start-->

2>修改大小

themes\default\library\index_ad.lbi

var swf_width=484;

var swf_height=200;

->

var swf_width=950;

var swf_height=560;

3>修改样式

<div class="f_l" id="focus">

->

<div class="f_l" style="position:absolute;float:left;margin-top:-90px;margin-left:140px;z-index:-99;" id="focus">

3)修改站内快讯样式

1>调至左边

<!--焦点图和站内快讯 START-->

<!--焦点图和站内快讯 END-->

<div id="mallNews" class="f_r">

->

<div id="mallNews" class="f_l">

4)修改精品推荐样式

1>调至右边

<!-- #BeginLibraryItem "/library/recommend_best.lbi" -->

2>调整样式

/library/recommend_best.lbi

删除文字

<p><a href="{$goods.url}" title="{$goods.name|escape:html}">{$goods.short_style_name}</a></p>

<font class="f1">

<!-- {if $goods.promote_price neq ""} -->

{$goods.promote_price}

<!-- {else}-->

{$goods.shop_price}

<!--{/if}-->

</font>

调整more位置

<div class="more"><a href="../search.php?intro=best"><img src="images/more.gif" /></a></div>

->

<div class="itemTit" id="itemBest">

下面

调整宽度

<div class="box" style="width:600px;margin-left:150px;height:160px;">
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: