2025年前端小白实战过程----制作在线购物类网页

大家好，我是讯享网，很高兴认识大家。

前言

在线购物网站是当下比较流行的一类网站，越来越多的公司企业着手架设在线购物类网站平台。我在网上搜了很多，发现了易于新人着手的网页项目。那么本篇文章，将展示我对一个网页的编写过程。

整体布局

找了个“优尚”的网站，体现的组件比较多，主要包括产品搜索，账户登录，广告推荐，产品推荐，产品分类等内容。最终的网页效果如图。
尚优购物网站
讯享网

设计分析

购物网站的一个特点就是突出产品，突出购物流程，优惠活动，促销活动等信息。在线购物类网站的主要特性体现在如下几个方面：
1.要有商品搜索功能，有详细的商品分类。
2.增加广告活动位，帮助特色产品推广。
3.可以设置热门产品推荐位。
4.让浏览者知道在网页中如何快速地查找自己需要的信息。

排版架构

本实例的在线购物网站是上下型结构，header有网页头部、导航栏；中间为网页主要内容，banner、产品；footer为页脚信息，我画了一个整体框架。如图：
框架图

Logo与导航区

导航使用水平结构，与其他类别网站相比，是前边有一个购物车显示，把购物车功能放到这里使用户更方便快捷地查看购物情况。以下为网页头部的效果。

其具体的HTML框架代码如下：

<!--------------------------------------------NAV--------------------------------------------> <div id="nav"><span><a href="#">我的账户</a> | <a href="#" style="color:#5CA100;">订单查询</a> | <a href="#">我的优惠券</a> | <a href="#">积分换购</a> | <a href="#">购物交流</a> | <a href="#">帮助中心</a></span> 你好，欢迎来到优尚购物[ <a href="#">登录</a>/<a href="#">注册</a>] </div> <!--------------------------------------------logo--------------------------------------------> <div id="logo"> <div class="logo_left"><a href="#"><img src="images/logo.gif" border="0" /></a></div> <div class="logo_center"> <div class="search"><form action="" method="get"> <div class="search_text"> <input type="text" value="请输入产品名称或订单编号" class="input_text"/> </div> <div class="search_btn"><a href="#"><img src="images/search-btn.jpg" border="0" /></a></div> </form></div> <div class="hottext">热门搜索&nbsp; <a href="#">新品</a>&nbsp;&nbsp;&nbsp;<a href="#">限时特价</a>&nbsp;&nbsp;&nbsp;<a href="#">防晒隔离</a>&nbsp;&nbsp;&nbsp;<a href="#">超值换购</a> </div> </div> <div class="logo_right"><img src="images/telephone.jpg" width="228" height="70" /></div> </div> <!--------------------------------------------MENU--------------------------------------------> <div id="menu"> <div class="shopingcar"><a href="#">购物车中有0件商品</a></div> <div class="menu_box"> <ul> <li><a href="#"><img src="images/menu1.jpg" border="0" /></a></li> <li><a href="#"><img src="images/menu2.jpg" border="0" /></a></li> <li><a href="#"><img src="images/menu3.jpg" border="0" /></a></li> <li><a href="#"><img src="images/menu4.jpg" border="0" /></a></li> <li><a href="#"><img src="images/menu5.jpg" border="0" /></a></li> <li><a href="#"><img src="images/menu6.jpg" border="0" /></a></li> <li style="background:none;"><a href="#"><img src="images/menu7.jpg" border="0" /></a></li> <li style="background:none;"><a href="#"><img src="images/menu8.jpg" border="0" /></a></li> <li style="background:none;"><a href="#"><img src="images/menu9.jpg" border="0" /></a></li> <li style="background:none;"><a href="#"><img src="images/menu10.jpg" border="0" /></a></li> </ul> </div> </div>

讯享网

上述代码主要包括三个部分：nav、logo、menu。其中nav区域主要定义购物网站中的账户、订单、注册、帮助中心等信息；logo部分主要定义网站的logo、搜索框信息以及其他；menu主要定义网站的导航菜单。
在CSS样式文件中，对应上述代码的CSS代码如下。

讯享网/*==========================nav==========================*/ #nav{ 
    width:970px; height:30px; line-height:30px; margin:auto; padding:0 5px 0 5px;} #nav a{ 
    color:#666;} #nav a:hover{ 
    color:#5CA100;} #nav span{ 
    float:right;} /*==========================logo==========================*/ #logo{ 
    width:980px; height:70px; margin:auto;} .logo_left{ 
    float:left; width:277px; margin-right:41px;} .logo_center{ 
    float:left; width:400px; height:70px;} .search{ 
    margin-top:13px; height:29px; background:url(../images/search.jpg) no-repeat;} .search_text{ 
    float:left; width:312px; padding-left:27px; margin-top:3px;} .search_btn{ 
    float:left;} .input_text{ 
    width:300px; height:23px; font-size:12px; color:#; border:none; background:none; line-height:23px;} .hottext{ 
    color:#; line-height:24px;} .hottext a{ 
    color:#;} .logo_right{ 
    float:right; width:228px; height:70px;} /*==========================menu==========================*/ #menu{ 
    margin-top:10px; margin:auto; width:980px; height:41px; overflow:hidden;} .shopingcar{ 
    float:left; width:140px; height:35px; background:url(../images/shopingcar.jpg) no-repeat; color:#fff; padding:10px 0 0 42px;} .shopingcar a{ 
    color:#fff;} .menu_box{ 
    float:left; margin-left:60px;} .menu_box li{ 
    float:left; width:55px; margin-top:17px; text-align:center; background:url(../images/menu_fgx.jpg) right center no-repeat;}

上面的代码中。选择器定义了nav，logo，以及nav的各类属性。

Banner与资讯区

购物网站的Banner区域同企业型的比较起来差别很大，主要企业是为了突出企业文化。而购物网则是为了放置主推产品、优惠活动、促销活动等。该部分实现的的效果如图。
在这里插入图片描述
其具体的HTML代码如下：

<!--------------------------------------------banner_top--------------------------------------------> <div id="banner"> <div class="banner_box"> <div class="banner_pic"><img src="images/banner.jpg" border="0" /></div> <div class="banner_right"> <div class="banner_right_top"><a href="#"><img src="images/event_banner.jpg" border="0" /></a></div> <div class="banner_right_down"> <div class="moving_title"><img src="images/news_title.jpg" /></div> <ul> <li><a href="#"><span>国庆大促5宗最，纯牛皮钱包免费换！</span></a></li> <li><a href="#">身体护理系列满199加1元换购飘柔！</a></li> <li><a href="#"><span>YOUSOO九月新起点，价值99元免费送！</span></a></li> <li><a href="#">喜迎国庆，化妆百元红包大派送！</a></li> </ul> </div> </div> </div> </div>

在上述代码中，banner分为两部分，左侧放大，右侧缩小和文字消息。
在CSS样式文件中，上面的对应代码如下：

讯享网/*==========================banner_top==========================*/ #banner{ 
    background:url(../images/banner_top_bg.jpg) repeat-x; padding-top:12px;} .banner_box{ 
    width:980px; height:369px; margin:auto;} .banner_pic{ 
    float:left; width:726px; height:369px; text-align:left;} .banner_right{ 
    float:right; width:247px;} .banner_right_top{ 
    margin-top:15px;} .banner_right_down{ 
    margin-top:12px;} .banner_right_down ul{ 
    margin-top:10px; width:243px; height:89px;} .banner_right_down li{ 
    margin-left:10px; padding-left:12px; background:url(../images/icon_green.jpg) left no-repeat center; line-height:21px;} .banner_right_down li a{ 
    color:#444;} .banner_right_down li a span{ 
    color:#A10288;}

#banner选择器定义了背景图，对齐方式，链接样式等。

产品区域

该区域为图文混排的结构，购物网站大量运用图文混排方式，如下。

其具体的HTML代码如下所示：

<div class="clean"></div> <div id="content2"> <div class="con2_title"><b><a href="#"><img src="images/ico_jt.jpg" border="0" /></a></b><span><a href="#">新品速递</a> | <a href="#">畅销排行</a> | <a href="#">特价抢购</a> | <a href="#">男士护肤</a>&nbsp;&nbsp;</span><img src="images/con2_title.jpg" /></div> <div class="line1"></div> <div class="con2_content"><a href="#"><img src="images/con2_content.jpg" width="981" height="405" border="0" /></a></div> <div class="scroll_brand"><a href="#"><img src="images/scroll_brand.jpg" border="0" /></a></div> <div class="gray_line"></div> </div> <div id="content4"> <div class="con2_title"><b><a href="#"><img src="images/ico_jt.jpg" border="0" /></a></b><span><a href="#">新品速递</a> | <a href="#">畅销排行</a> | <a href="#">特价抢购</a> | <a href="#">男士护肤</a>&nbsp;&nbsp;</span><img src="images/con4_title.jpg" width="27" height="13" /></div> <div class="line3"></div> <div class="con2_content"><a href="#"><img src="images/con4_content.jpg" width="980" height="207" border="0" /></a></div> <div class="gray_line"></div> </div>

讯享网/*==========================content2==========================*/ #content2{ 
    width:980px; height:545px; margin:22px auto; overflow:hidden;} .con2_title{ 
    width:973px; height:22px; padding-left:7px; line-height:22px;} .con2_title span{ 
    float:right; font-size:10px;} .con2_title a{ 
    color:#444; font-size:12px;} .con2_title b img{ 
    margin-top:3px; float:right;} .con2_content{ 
    margin-top:10px;} .scroll_brand{ 
    margin-top:7px;} #content4{ 
    width:980px; height:250px; margin:22px auto; overflow:hidden;} #bottom{ 
    margin:auto; margin-top:15px; background:#F0F0F0; height:236px;} .bottom_pic{ 
    margin:auto; width:980px;}

上述代码定义了产品类别的背景图、高度、宽度、对齐方式等。

页脚部分

就不弄复杂的页脚了，本例中比较简单，是使用一个div标记放置了一个版权信息图片。
页脚部分
html:<div id="copyright"><img src="images/copyright.jpg" /></div>

css:#copyright{ width:980px; height:150px; margin:auto; margin-top:16px;}

最终就实现了一个静态的购物网站，这属于比较简单的项目。
那么如有需要源代码和资料的小伙伴可以私信我，本篇文章就结束了。