大二Web课程设计期末考试——基于HTML+CSS+JavaScript+jQuery电商类化妆品购物商城

最新推荐文章于 2024-05-13 22:35:15 发布

学生网页制作

最新推荐文章于 2024-05-13 22:35:15 发布

阅读量330

点赞数

分类专栏： html期末大作业文章标签：课程设计 javascript html

本文链接：https://blog.csdn.net/qq_38514511/article/details/129777775

版权

html期末大作业专栏收录该内容

244 篇文章 5 订阅

订阅专栏

常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。

一、网页介绍📖

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。

一、网页效果🌌

在这里插入图片描述

二、代码展示😈

1.HTML结构代码 🧱

代码如下（示例）：以下仅展示部分代码供参考~


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>亲亲网-精品团购</title>
<link href="css/boutiqueGroup.css" rel="stylesheet" type="text/css" />
<link href="css/common.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="img/favicon.ico" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>
</head>

<body>
<!-- 窗口右边导航栏 -->
<div class="rightNav">
    	<div class="rightNavIn">
            <div class="rnLoginIcon">
                <div class="userLogin">
                    <img src="img/default_user_portrait.gif" width="30" height="30" />
                    <p>未登录</p>
                </div>
                
                <div class="loginWindow">
                    登录名<br />
                    <input type="text" /><br /><br />
                    登录密码&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:;">忘记登录密码？</a><br />
                    <input type="text" /><br /><br /><br />
                    <input class="ok" type="submit" value="确认" /><br />
                    <a href="javascript:;" class="register">注册新用户</a>
                    <a href="javascript:;" class="x">X</a>
                </div>
            </div>
            
            <ul>
            	<li>
                	<a href="javascript:;"></a>
                    <i>聊天</i>
                </li>
            	<li>
                	<a href="javascript:;"></a>
                    <i>购物车</i>
                </li>
            	<li>
                	<a href="javascript:;"></a>
                    <i>客服</i>
                </li>
            	<li>
                	<a href="javascript:;"></a>
                    <i>顶部</i>
                </li>
            </ul>
            <div class="closeX"></div>
        </div> 
  <div class="hideBar">
   	<div class="hbBg"></div>
            <a href="javascript:;" class="plus"></a>
        </div>
    </div>

<!-- 头部开始 -->
	<div class="navImg">
        <img src="img/zcjs.png" width="143" height="378" />
    	<button>关闭</button>
    </div>

<div class="header">
    	<div class="headerIn">
        	<div class="hiLeft">
                <span>您好，欢迎来到</span> <a href="javascript:;">亲亲网</a> <a href="javascript:;">[登录]</a> <a href="javascript:;">[注册]</a>
            </div>
            <div class="hiRight">
                <ul class="demo">
                    <li id="li01">
                        <a href="#">我的订单</a>
                        <ul id="ul01">
                            <li><a href="#">待付款订单</a></li>
                            <li><a href="#">待确认收货</a></li>
                            <li><a href="#">待评价交易</a></li>
                        </ul>
                    </li>
                    <li id="li02">
                        <a href="#"> 我的收藏</a>
                        <ul id="ul02">
                            <li><a href="#">品牌收藏</a></li>
                            <li><a href="#">店铺收藏</a></li>
                        </ul>
        
                    </li>
                    <li id="li03">
                        <a href="#">客户服务</a>
                        <ul id="ul03">
                            <li><a href="#">帮助中心</a></li>
                            <li><a href="#">售后服务</a></li>
                            <li><a href="#">客服中心</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
<!-- logo开始 -->
    <div class="logo">
    	<div class="logoIn">
            <div class="logoLeft">
            	<h1><a href="index.html" title="亲亲网"><img src="img/logo.png" width="186" height="60" />亲亲网</a></h1>
            </div>
            <div class="logoCenter">
            	<div class="lcTop">
                	<input type="text" placeholder="请输入您要搜索的关键字" />
                    <a href="#">搜索</a>
                </div>
            	<div class="lcBottom">
                	<p>热门搜索：</p>
                    <ul>
                    	<li><a href="javascript:;">保湿</a></li>
                    	<li><a href="javascript:;">面膜</a></li>
                    	<li><a href="javascript:;">洁面</a></li>
                    	<li><a href="javascript:;">补水</a></li>
                    	<li><a href="javascript:;">香水</a></li>
                    	<li><a href="javascript:;">眼霜</a></li>
                    	<li><a href="javascript:;">唇膏</a></li>
                    	<li><a href="javascript:;">BB霜</a></li>
                    </ul>
                </div>
            </div>
            <div class="logoRight">
 				<ul>
<!-- 我的商城  -->
                	<li>
                        <a href="javasscript:;" class="myShangCheng">
                            <span></span>
                            我的商城
                            <i></i>
                        </a>
                        <div class="scIn">
                            <span><a href="javascript:;">我的用户中心></a></span>
                            <div class="ciLi">
                                <ul>
                                    <li><a href="javascript:;">站内消息(0)</a></li>
                                    <li><a href="javascript:;">资讯回复(0)</a></li>
                                    <li><a href="javascript:;">代金券(0)</a></li>
                                </ul>
                                <ul>
                                    <li><a href="javascript:;">我的订单 >></a></li>
                                    <li><a href="javascript:;">我的收藏 >></a></li>
                                    <li><a href="javascript:;">我的积分 >></a></li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li>
<!-- 购物车结算  -->
                        <a href="javasscript:;" class="myGouWuChe">
                            <span></span>
                            购物车结算
                            <i></i>
                        </a>
                        <div class="gwcIn">
                            <span>最新加入的商品</span>
                            <p>您的购物车中暂无商品，赶快选择心爱的商品吧！</p>
                            <div class="gwcGray">
                                <div class="ggBtn">
                                    <a href="javascript:;">结算购物车中的商品</a>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
<!-- logo结束 -->      
    </div>

<!-- 导航开始 -->  
		<div class="nav">
        	<div class="navIn">
            	<div class="niLeft">
                  <h3>所有分类商品</h3>
                    <img src="img/arrow_down.png" />
                </div>
                
                <div class="niCenter">
                	<a href="index.html">首页</a>
                	<a href="list-boutiqueGroup.html" class="current">精品团购</a>
                	<a href="list-brandSale.html">品牌特卖</a>
                	<a href="list-overseasDirectMail.html" id="ncIcon">海外直邮
                        <img src="img/ico_hot.gif" width="21" height="13"/>
                    </a>
                </div>
                <div class="niRight">
                    <a href="javascript:;" class="nr_01">
                    	<i></i>
                        <span>自营美妆198包邮</span>
                    </a>
                    <a href="javascript:;" class="nr_02">
                    	<i></i>
                        <span>30天无理由退货</span>
                    </a>
                    <a href="javascript:;" class="nr_03">
                    	<i></i>
                        <span>100%正品保证</span>
                    </a>
                    <a href="javascript:;" class="nr_04">
                    	<i></i>
                        <span>中华财险承保</span>
                    </a>
                </div>
          </div>
        </div>
<!-- 导航结束 -->

<!-- 头部结束 -->

<!-- banner开始 -->
	<div class="banner">
    	<div class="bannerIn">
            <ul>
                <li>
                	<div class="img01"></div>
                </li>
                <li>
                	<div class="img02"></div>
                </li>
            </ul>
        </div>
	</div>
<!-- banner结束 -->

<!-- con开始 -->
	<div class="con">
    	<div class="conTop">
        	<a href="javascript:;" class="special"><b>全部</b></a>
        	<a href="javascript:;"><b>护肤</b></a>
        	<a href="javascript:;"><b>彩妆</b></a>
        	<a href="javascript:;"><b>护肤</b></a>
        	<a href="javascript:;"><b>服装</b></a>
        	<a href="javascript:;"><b>鞋靴</b></a>
        	<a href="javascript:;"><b>包包</b></a>
        	<a href="javascript:;"><b>配饰</b></a>
        	<a href="javascript:;" class="a01"><b class="ing">正在进行</b></a>
        	<a href="javascript:;" class="a01"><b>即将开始</b></a>
        	<a href="javascript:;" class="a01"><b>已经结束</b></a>
        </div>
    	<div class="conCenter"> 
        	<dl>
            	<dt>价格：</dt>
                <dd class="select"><a href="javascript:;">不限</a></dd>
                <dd><a href="javascript:;">0-50元</a></dd>
                <dd><a href="javascript:;">50-100元</a></dd>
                <dd><a href="javascript:;">100-200元</a></dd>
                <dd><a href="javascript:;">200-300元</a></dd>
                <dd><a href="javascript:;">300元以上</a></dd>
            </dl>
        	<dl class="sort">
            	<dt>排序：</dt>
                <dd class="select"><a href="javascript:;">默认</a></dd>
                <dd><a href="javascript:;">价格</a></dd>
                <dd><a href="javascript:;">折扣</a></dd>
                <dd><a href="javascript:;">销量</a></dd>
            </dl>
        </div>
    	<div class="conBottomT">
            <dl>
                <dt><a href="javascript:;"><img src="img/boutque01_r2_c2.jpg" width="384" height="225" /></a></dt>
                <dd>
                    <span>
                        <a href="javascript:;">
                            <em>4.48折/</em>Avon雅芳小红裙套装（香体乳150ml+沐浴露150ml)
                        </a>
                    </span>
                </dd>
                <dd class="price">
                    <em>¥43.00</em>
                    <del>¥96.00</del>
                    <i>销量：0天2时19分6秒</i>
                </dd>
            </dl>
            <dl>
                <dt><a href="javascript:;"><img src="img/boutque02_r2_c2.jpg" width="384" height="225" /></a></dt>
                <dd>
                    <span>
                        <a href="javascript:;">
                            <em>3.97折/</em>  单子水漾优白BB霜60g单子水漾优白BB霜60g 自然色倍润型 &nbsp;&nbsp;&nbsp;
                        </a>
                    </span>
                </dd>
                <dd class="price">
                    <em>¥27.00</em>
                    <del>¥68.00</del>
                    <i>销量：0天2时19分6秒</i>
                </dd>
            </dl>
            <dl class="special">
                <dt><a href="javascript:;"><img src="img/boutque03_r2_c2.jpg" width="384" height="225" /></a></dt>
                <dd>
                    <span>
                        <a href="javascript:;">
                            <em>7.04折/</em>荘典痘根尽痘抗痘疤修复膏25g
                        </a>
                    </span>
                </dd>
                <dd class="price">
                    <em>¥76.00</em>
                    <del>¥108.0</del>
                    <i>销量：0天2时19分6秒</i>
                </dd>
            </dl>
            <dl>
                <dt><a href="javascript:;"><img src="img/boutque04_r2_c2.jpg" width="384" height="225" /></a></dt>
                <dd>
                    <span>
                        <a href="javascript:;">
                            <em>6.76折/</em>荘典痘根尽尊贵礼盒版
                        </a>
                    </span>
                </dd>
                <dd class="price">
                    <em>¥188.00</em>
                    <del>¥278.00</del>
                    <i>销量：0天2时19分6秒</i>
                </dd>
            </dl>
            <dl>
                <dt><a href="javascript:;"><img src="img/boutque05_r2_c2.jpg" width="384" height="225" /></a></dt>
                <dd>
                    <span>
                        <a href="javascript:;">
                            <em>8.78折/</em>欧莱雅美眸深邃自动眼线笔0.1g
                        </a>
                    </span>
                </dd>
                <dd class="price">
                    <em>¥79.00</em>
                    <del>¥90.0</del>
                    <i>销量：0天2时19分6秒</i>
                </dd>
            </dl>
            <dl class="special">
                <dt><a href="javascript:;"><img src="img/boutque06_r2_c2.jpg" width="384" height="225" /></a></dt>
                <dd>
                    <span>
                        <a href="javascript:;">
                            <em>7.16折/</em>荘典痘根尽水剂25ml
                        </a>
                    </span>
                </dd>
                <dd class="price">
                    <em>¥78.00</em>
                    <del>¥109.00</del>
                    <i>销量：0天2时19分6秒</i>
                </dd>
            </dl>
            <dl>
                <dt><a href="javascript:;"><img src="img/boutque07_r2_c2.jpg" width="384" height="225" /></a></dt>
                <dd>
                    <span>
                        <a href="javascript:;">
                            <em>3.5折/</em>Aussie美国袋鼠丰盈蓬松护发素400ml
                        </a>
                    </span>
                </dd>
                <dd class="price">
                    <em>¥42.00</em>
                    <del>¥120.00</del>
                    <i>销量：0天2时19分6秒</i>
                </dd>
            </dl>
            <dl>
                <dt><a href="javascript:;"><img src="img/boutque08_r2_c2.jpg" width="384" height="225" /></a></dt>
                <dd>
                    <span>
                        <a href="javascript:;">
                            <em>3.2折/</em>丹姿他能量活力保湿男士霜50g
                        </a>
                    </span>
                </dd>
                <dd class="price">
                    <em>¥16.00</em>
                    <del>¥50.04</del>
                    <i>销量：0天2时19分6秒</i>
                </dd>
            </dl>
            <dl class="special">
                <dt><a href="javascript:;"><img src="img/boutque09_r2_c2.jpg" width="384" height="225" /></a></dt>
                <dd>
                    <span>
                        <a href="javascript:;">
                            <em>2.93折/</em>emma1997艾玛身体乳定制礼盒
                        </a>
                    </span>
                </dd>
                <dd class="price">
                    <em>¥146.00</em>
                    <del>¥499.00</del>
                    <i>销量：0天2时19分6秒</i>
                </dd>
            </dl>
            <dl>
                <dt><a href="javascript:;"><img src="img/boutque10_r2_c2.jpg" width="384" height="225" /></a></dt>
                <dd>
                    <span>
                        <a href="javascript:;">
                            <em>4.07折/</em>SK-Ⅱ美之钥嫩肤清莹露40ml
                        </a>
                    </span>
                </dd>
                <dd class="price">
                    <em>¥33.00</em>
                    <del>¥81.00</del>
                    <i>销量：0天2时19分6秒</i>
                </dd>
            </dl>
            <dl>
                <dt><a href="javascript:;"><img src="img/boutque11_r2_c2.jpg" width="384" height="225" /></a></dt>
                <dd>
                    <span>
                        <a href="javascript:;">
                            <em>5.76折/</em>lanbeirve蓝蓓丽不再孔慌清透冰膜28mlx5片
                        </a>
                    </span>
                </dd>
                <dd class="price">
                    <em>¥114.00</em>
                    <del>¥198.00</del>
                    <i>销量：0天2时19分6秒</i>
                </dd>
            </dl>
            <dl class="special">
                <dt><a href="javascript:;"><img src="img/boutque12_r2_c2.jpg" width="384" height="225" /></a></dt>
                <dd>
                    <span>
                        <a href="javascript:;">
                            <em>3.81折/</em>CHOISKYCN俏十岁安肌舒缓科技面膜贴3片/盒
                        </a>
                    </span>
                </dd>
                <dd class="price">
                    <em>¥122.00</em>
                    <del>¥320.00</del>
                    <i>销量：0天2时19分6秒</i>
                </dd>
            </dl>
            <dl>
                <dt><a href="javascript:;"><img src="img/boutque13_r2_c2.jpg" width="384" height="225" /></a></dt>
                <dd>
                    <span>
                        <a href="javascript:;">
                            <em>4.02折/</em>Coppertone水宝宝速干清爽防晒喷雾型45g SPF50
                        </a>
                    </span>
                </dd>
                <dd class="price">
                    <em>¥21.00</em>
                    <del>¥52.20</del>
                    <i>销量：0天2时19分6秒</i>
                </dd>
            </dl>
            <dl>
                <dt><a href="javascript:;"><img src="img/boutque14_r2_c2.jpg" width="384" height="225" /></a></dt>
                <dd>
                    <span>
                        <a href="javascript:;">
                            <em>4.02折/</em>Coppertone水宝宝速干清爽防晒喷雾型45g SPF50
                        </a>
                    </span>
                </dd>
                <dd class="price">
                    <em>¥21.00</em>
                    <del>¥52.20</del>
                    <i>销量：0天2时19分6秒</i>
                </dd>
            </dl>
            <dl class="special">
                <dt><a href="javascript:;"><img src="img/boutque15_r2_c2.jpg" width="384" height="225" /></a></dt>
                <dd>
                    <span>
                        <a href="javascript:;">
                            <em>4.02折/</em>Coppertone水宝宝速干清爽防晒喷雾型45g SPF50
                        </a>
                    </span>
                </dd>
                <dd class="price">
                    <em>¥21.00</em>
                    <del>¥52.20</del>
                    <i>销量：0天2时19分6秒</i>
                </dd>
            </dl>
            <dl>
                <dt><a href="javascript:;"><img src="img/boutque16_r2_c2.jpg" width="384" height="225" /></a></dt>
                <dd>
                    <span>
                        <a href="javascript:;">
                            <em>4.02折/</em>Coppertone水宝宝速干清爽防晒喷雾型45g SPF50
                        </a>
                    </span>
                </dd>
                <dd class="price">
                    <em>¥21.00</em>
                    <del>¥52.20</del>
                    <i>销量：0天2时19分6秒</i>
                </dd>
            </dl>
            <dl>
                <dt><a href="javascript:;"><img src="img/boutque17_r2_c2.jpg" width="384" height="225" /></a></dt>
                <dd>
                    <span>
                        <a href="javascript:;">
                            <em>4.02折/</em>Coppertone水宝宝速干清爽防晒喷雾型45g SPF50
                        </a>
                    </span>
                </dd>
                <dd class="price">
                    <em>¥21.00</em>
                    <del>¥52.20</del>
                    <i>销量：0天2时19分6秒</i>
                </dd>
            </dl>
            <dl class="special">
                <dt><a href="javascript:;"><img src="img/boutque18_r2_c2.jpg" width="384" height="225" /></a></dt>
                <dd>
                    <span>
                        <a href="javascript:;">
                            <em>4.02折/</em>Coppertone水宝宝速干清爽防晒喷雾型45g SPF50
                        </a>
                    </span>
                </dd>
                <dd class="price">
                    <em>¥21.00</em>
                    <del>¥52.20</del>
                    <i>销量：0天2时19分6秒</i>
                </dd>
            </dl>
            <dl>
                <dt><a href="javascript:;"><img src="img/boutque19_r2_c2.jpg" width="384" height="225" /></a></dt>
                <dd>
                    <span>
                        <a href="javascript:;">
                            <em>4.02折/</em>Coppertone水宝宝速干清爽防晒喷雾型45g SPF50
                        </a>
                    </span>
                </dd>
                <dd class="price">
                    <em>¥21.00</em>
                    <del>¥52.20</del>
                    <i>销量：0天2时19分6秒</i>
                </dd>
            </dl>
            <dl>
                <dt><a href="javascript:;"><img src="img/boutque20_r2_c2.jpg" width="384" height="225" /></a></dt>
                <dd>
                    <span>
                        <a href="javascript:;">
                            <em>4.02折/</em>Coppertone水宝宝速干清爽防晒喷雾型45g SPF50
                        </a>
                    </span>
                </dd>
                <dd class="price">
                    <em>¥21.00</em>
                    <del>¥52.20</del>
                    <i>销量：0天2时19分6秒</i>
                </dd>
            </dl>
            <dl class="special">
                <dt><a href="javascript:;"><img src="img/boutque21_r2_c2.jpg" width="384" height="225" /></a></dt>
                <dd>
                    <span>
                        <a href="javascript:;">
                            <em>4.02折/</em>Coppertone水宝宝速干清爽防晒喷雾型45g SPF50
                        </a>
                    </span>
                </dd>
                <dd class="price">
                    <em>¥21.00</em>
                    <del>¥52.20</del>
                    <i>销量：0天2时19分6秒</i>
                </dd>
            </dl>
    </div>
    <div class="page">
    	<ul>
        	<li>首页</li>
        	<li>上一页</li>
        	<li>1</li>
        	<li>下一页</li>
        	<li>末页</li>
        </ul>
    </div>
    

<!-- con结束 -->




<!-- footer开始 -->
<div class="footer">
            <div class="fiTop">
            	<div class="ftIn">
                    <dl>
                        <dt>服务保障</dt>
                        <dd><a href="#">30天退换货</a></dd>
                        <dd><a href="#">正品保证</a></dd>
                    </dl>
                    <dl>
                        <dt>使用帮助</dt>
                        <dd><a href="#">购物流程</a></dd>
                        <dd><a href="#">积分说明</a></dd>
                        <dd><a href="#">常见问题</a></dd>
                        <dd><a href="#">代金券规则</a></dd>
                    </dl>
                    <dl>
                        <dt>支付方式</dt>
                        <dd><a href="#">货到付款</a></dd>
                        <dd><a href="#">在线支付</a></dd>
                        <dd><a href="#">预存款及充值</a></dd>
                        <dd><a href="#">银行转账</a></dd>
                    </dl>
                    <dl>
                        <dt>配送方式</dt>
                        <dd><a href="#">验货与签收</a></dd>
                        <dd><a href="#">配送说明</a></dd>
                        <dd><a href="#">快递信息追踪</a></dd>
                        <dd><a href="#">包邮政策</a></dd>
                    </dl>
                    <dl class="sale">
                        <dt>售后服务</dt>
                        <dd><a href="#">退款与提现</a></dd>
                        <dd><a href="#">发票说明</a></dd>
                        <dd><a href="#">退换货政策</a></dd>
                    </dl>
                    <dl class="weixin">
                        <dd><strong>手机亲亲</strong></dd>
                        <dd><a href="#"><img src="img/f2.gif" width="78" height="78" /></a></dd>
                        <dd><a href="#">下载移动客户端</a></dd>
                    </dl>
                    <dl class="weixinline">
                        <dd><strong>亲亲微信</strong></dd>
                        <dd><a href="#"><img src="img/f1.gif" width="78" height="78" /></a></dd>
                        <dd><a href="#">亲亲官方微信</a></dd>
                    </dl>
                </div>
            </div>

            <div class="fiBottom">
            	<p>
                    <a href="javascript:;">首页</a>|
                    <a href="javascript:;">关于我们</a>|
                    <a href="javascript:;">联系我们</a>|
                    <a href="javascript:;">帮助中心</a>|
                    <a href="javascript:;">商务合作</a>|
                    <a href="javascript:;">商家入驻</a>
                </p>
                <p>© 2008 - 2014 亲亲网 QinQin.com 版权所有， 客服热线：4000-500-775 (每天09:00-18:00) ICP备08031978号</p>
                <span>
                    <a href="#"><img src="img/ticon_wxrz.gif" width="103" height="40" /></a>
                    <a href="#"><img src="img/ticon_kxwz.gif" width="119" height="40" /></a>
                    <a href="#"><img src="img/ticon_aqlm.gif" width="112" height="40" /></a>
                    <a href="#"><img src="img/ticon_alipay.gif" width="113" height="40" /></a>
                    <a href="#"><img src="img/ticon_tenpay.gif" width="109" height="40" /></a>
                </span>
            </div>
</div>
<!-- footer结束 -->
</body>
</html>

2.CSS样式代码 🏠

@charset "utf-8";
/* CSS Document */
/* 初始化 */

html,body{width:100%;}
body{overflow-x:hidden;}
*{ margin:0; padding:0; outline:none; border:none;}
img{ display:block;}
ul,ol{ list-style:none;}
body{ font-size:12px; color:#6F6F6F;}
a{ text-decoration:none;color:#6F6F6F;}
a:hover{ text-decoration:none; color:#F0378D;}



/* 头部开始 */
.header{ width:100%; height:30px; background:#FAFAFA; border-bottom:1px solid #F0F0F0;}
.headerIn{ width:1200px; height:30px;/*  background:pink; */ margin:0 auto; line-height:30px;}
.hiLeft{ float:left;}
.hiLeft span{ color:#777777;}
.hiLeft a{ color:#333333;}
.hiLeft a:hover{ text-decoration:underline;}
.hiRight{ float:right; width:400px; height:30px; line-height:30px;}
ul{list-style: none;}
a{color:white; text-decoration: none; font-size: 12px;}
.hiRight{width:300px;}
.hiRight li{ width: 100px; height:30px; line-height: 30px; float: left; background: #fff; text-align: center; position:relative;}
.hiRight li a{ display: block; width: 100px; height: 30px; line-height: 30px; color:#777777; }
.hiRight ul li ul li a:hover{ color:#777777; width:100px; height:30px; background:#FAFAFA;}
.hiRight ul li ul{display: none; position:absolute;top:30px; overflow:hidden; border:1px solid #F0F0F0; border-top:none; z-index:888;}

/* logo开始 */
.logo{ width:100%; height:100px; /* background:pink; */ overflow:hidden; _zoom:1;}
.logoIn{ width:1200px; height:100px; /* background:orange; */ margin:0 auto;}
.logoIn .logoLeft h1{ float:left;margin: 15px 10px auto 0;}
.logoIn .logoLeft h1 a{ display:inline-block; overflow:hidden; width:186px; height:60px;}
.logoCenter{ width:451px; height:100px;/*  background:#0FF; */ float:left; overflow:hidden; _zoom:1; margin:0 0 0 130px;}
.lcTop{margin: 15px 10px auto 0;}
.lcTop input{ width:350px; height:16px; border:3px solid #F0378D; display:inline-block; float:left; overflow:hidden; color:#ccc; padding:10px 0 10px 15px;}
.lcTop a{ width:70px; height:42px; background:#F0378D; display:inline-block; float:left; text-align:center; line-height:42px; color:white; font-family:"微软雅黑"; font-weight:bold; font-size:16px;}
.lcBottom{ margin:65px 10px 0 0; height:20px;}
.lcBottom p{ float:left; color:#999999;}
.lcBottom ul{ float:left;}
.lcBottom ul li{ float:left; padding:0 0 0 10px;}
.lcBottom ul li a{ color:#777777;}
.lcBottom ul li a:hover{ text-decoration:underline;}
.logoRight{ float:right; width:260px; height:100px;/*  background:#3F6; */margin: 15px 10px auto 0;}
.logoRight ul{ width:260px; overflow:hidden;}
.logoRight ul li{ width:130px; overflow:hidden;float:left;}
.logoRight .myShangCheng{ width:110px; height:40px; background:#FAFAFA; display:block; border:1px solid #F0F0F0; line-height:40px; font-size:13px; color:#555555; /* border-bottom:none; */z-index:2; position:relative; float:left;}
.logoRight .myGouWuChe{ width:125px; height:40px; background:#FAFAFA; display:block; border:1px solid #F0F0F0; line-height:40px; font-size:13px; color:#555555;/*  border-bottom:none; */z-index:2; position:relative; float:right;}
.logoRight .myShangCheng:hover,.myGouWuChe:hover{ color:#555555; background:#fff;}
.myShangCheng span{ width:16px; height:16px; background:url(../img/top_bg.png) -100px 0px; display:inline-block; margin:12px 0 0 10px;}
.myGouWuChe span{width:20px; height:16px; background:url(../img/top_bg.png) -120px 0px; display:inline-block; margin:12px 0 0 10px;}
.myShangCheng i,.myGouWuChe i{ background:url(../img/arrow-all-down.jpg) no-repeat left center; margin:0 0 2px 0; display:inline-block; width:8px; height:4px;}
.scIn{ width:308px; height:196px; background:#fff;  border:1px solid #F0F0F0; z-index:2; position:absolute; top:86px; right:196px; display:none;}
.scIn span{ width:308px; height:42px; display:block; line-height:42px; text-align:right; border-bottom:1px solid #DCDCDC;}
.scIn span a{ color:#005EA5;}
.scIn span a:hover{ text-decoration:underline;}
.ciLi{ width:308px; height:79px; border-bottom:1px solid #DCDCDC; padding:8px 0 8px 0; }
.ciLi ul{ width:138px; padding:5px 0 0 15px; border-right:1px solid #EDEDED; float:left;}
.ciLi ul li{ line-height:26px;}
.ciLi ul li a{ color:#1E58A1; text-decoration:none;}
.ciLi ul li a:hover{ text-decoration:underline;}
.gwcIn{ width:348px; height:150px; background:#fff; position:absolute; right:48px; top:86px; border:1px solid #DBDBDB; display:none; z-index:2;}
.gwcIn span{ width:343xp; height:42px; display:block; border-bottom:1px solid #DBDBDB; line-height:42px; padding:0 0 0 5px; font-weight:bold; color:#6C6366;}
.gwcIn p{ height:48px; line-height:48px; text-align:center;}
.gwcIn .gwcGray{ width:348px; height:39px; background:#F0F0F0; padding:20px 0 0 0;}
.gwcGray .ggBtn{ width:124px; height:28px; background:#DB3801; border-radius:5px; margin:0 0 0 200px; }
.gwcGray .ggBtn a{ color:#fff; font-size:13px; line-height:28px; height:28px; text-align:center; width:124px; display:block;}
.gwcGray .ggBtn a:hover{ text-decoration:underline;}
/* logo结束 */

/* 头部结束 */



/* footer开始 */

.fiTop{ width:100%; height:205px; background:#F9F9F9; border-top:1px solid #E5E5E5; }
.fiTop a{color:#666666;}
.fiTop a:hover{ color:#F03790;}
.fiTop .ftIn{ width:1200px; height:175px; /* background:red;  */margin:0 auto; padding:30px 0 0 0;}
.fiTop dl{ height:130px;/*  background:yellow; */ width:179px; border-left:1px solid #E1E1E1; float:left; padding:0 0 0 18px;}
.fiTop dl dt{ font-size:16px; font-family:"微软雅黑"; padding:0 0 13px 0;}
.fiTop .sale{ width:110px;}
.fiTop dl dd{ padding:10px 0 0 0; width:84px;/*  background:red; */}
.fiTop .weixin,.weixinline{ width:115px;}
.fiTop .weixin strong{ width:78px; height:27px;/*  background:#339; */ display:block; text-align:center; border-bottom:1px dotted #7e7e7e;}
.fiTop .weixinline{width:78px; border:none;}
.fiTop .weixinline strong{ width:78px; height:27px;/*  background:#339;  */display:block; text-align:center; border-bottom:1px dotted #7e7e7e;}

.fiBottom{ width:100%; height:140px;}
.fiBottom p{  text-align:center; color:#666666; padding:19px 0 0 0;}
.fiBottom p a{ padding:0 18px 0 15px; color:#666666;}
.fiBottom span{display:block; margin:0 auto; width:650px; padding:19px 0 0 90px;}
.fiBottom span a{ float:left;}
/* footer结束 */

三、个人总结😊

一套合格的网页应该包含(具体可根据个人要求而定)

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
所有页面相互超链接，可到三级页面，有5-10个页面组成；
页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
菜单美观、醒目，二级菜单可正常弹出与跳转；
要有JS特效，如定时切换和手动切换图片新闻；
页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
页面清爽、美观、大方，不雷同。
网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

四、更多干货🚀

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.❤️【关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

3.以上内容技术相关问题😈欢迎一起交流学习🔥 在这里插入图片描述

学生网页制作

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
大二Web课程设计期末考试——基于HTML+CSS+JavaScript+jQuery电商类化妆品购物商城

⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
复制链接

扫一扫