大二Web课程设计——基于HTML CSS JavaScript jquery手表商城购物网站(17页)

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

❤ 【作者主页——🔥获取更多优质源码】

❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】

❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】

文章目录🌰

一、网页介绍📖
一、网页效果🌌
二、代码展示😈
- 1.HTML结构代码 🧱
- 2.CSS样式代码 🏠
三、个人总结😊
四、更多干货🚀

一、网页介绍📖

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

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

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

一、网页效果🌌

在这里插入图片描述

二、代码展示😈

1.HTML结构代码 🧱

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


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-transform" />
<title>喜悦手表网【官网】：中国最大的正品名表商城！买手表，上喜悦手表！</title>
<meta name="keywords" content="手表,买手表,喜悦手表网,喜悦手表网官网,名表商城,正品手表，瑞士手表" />
<meta name="description" content="【喜悦手表网官网】：买原装正品世界名表：浪琴、天梭、欧米茄、劳力士等瑞士手表品牌，信用卡分期付款，正品保证，全国联保，终身售后保障！" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />


<!-- banner js -->
<script src="Script/banner.js"></script>
<!-- end banner js -->
<link rel="stylesheet" href="css/sxg.css">
<script src="Script/jquery.js"></script>
<script src="Script/global.js"></script>
<!--修订功能js错误 重置模块功能：下拉菜单隐藏、头部幻灯片， 修改时间2014年5月20日11:11:17 修改员：huang-->
<script type="text/javascript">
$(function() {
	//我们一开始就隐藏所有的下拉菜单
	$('#dropdown_nav li').find('.sub_nav').hide();
	//当鼠标悬停在主导航链接，我们发现下拉菜单中的相应链接。
	$('#dropdown_nav li').hover(function() {
		$(this).find('.sub_nav').fadeIn(100);
		$(this).find(".sub_link").addClass("cur");
	}, function() {
		$(this).find('.sub_nav').fadeOut(50);
		$(this).find(".sub_link").removeClass("cur");
	});
});
</script>
<script type="text/javascript">
function mOver()
{
document.getElementById("caier").style.display="block";
}

function mOut()
{
document.getElementById("caier").style.display="none";
}
</script>
<!-- end 修改完毕-->
</head>
<body>
<!-- Begin header -->
<div id="member_info2"></div>
<div class="head">
	<div class="r1 w1225">
    <div class="le">
        <a href="#" rel="nofollow" class="ico c__sina" title="新浪微博" target="_blank"><img src="css/images/weibo1.png" /></a>
        <a href="javascript:;" rel="nofollow" class="ico c__dimension" onMouseOver="mOver()" onMouseOut="mOut()"><img src="css/images/weixin2.png" /></a>
        <span class="tFav"><a href="javascript:;" rel="nofollow" onclick="AddFavorite(window.location,document.title);" class="f12 c666">收藏</a></span>
        <div id="caier" style=" display:none; width:200px; height:200px;"><img src="css/images/api.png" style="width:100%; height:100%" /></div>
    </div>
  <div class="ri">
            <span class="tLnk2"><a href=""  >购物车</a></span>
            <span class="tLnk1"><a href="" class="f12">登录</a> <a href="" class="f12">注册</a></span>
      </div>
    </div>
<div class="r2 w1225">
    	<h1 class="logo w440"><img src="css/images/LOGO.png" /></h1>
        <div class="srh">
            <form id="searchForm" name="searchForm" method="get" action="/shoubiao.html" onsubmit="return checkSearchForm()"><input type="hidden" value="1" name="dow" id="dow">
                <input name="w" id="w" type="text" class="tIptTxt c999 f14" value="搜索 品牌/系列/型号" title="搜索 品牌/系列/型号" onfocus="javascript:var t=$(this); if(t.val()==t.attr('title')) t.val('');" onblur="javascript:var t=$(this); if(t.val()=='') t.val(t.attr('title'));" />
                <a class="c__search">搜索</b></a>
            </form>
        </div>
        <div class="wbPt">
          <span class="tTel" style="font-size:16px;">服务热线：400-888-8888</span>
    </div>
  </div>
  
  
  
<!-- 模块修改：腕表弹出层，修改内容：从展开修改为收起。修改2014-5-19 15:17:34 修改员：huang-->
<div class="r3 w1225" style="position:relative">
<div class="gSort" id="pop_menu">

	
<!--    <span class="tit" id="pop_gMenu">
    	<b class="ico c__category"></b>
        腕表分类
    </span>-->
    <ul id="dropdown_nav">
			<li>
				<a class="sub_link" href="#">腕表分类</a>
           
			<div class="sub_nav">
			<dl>
            <dt style="position:absolute;">手表品牌</dt>
            <dd>
                                    <a   href="">劳力士</a>
                                    <a   href="">欧米茄</a>
                                    <a   href="">欧古诗丹</a>
                                    <a   href="">天梭</a>
            </dd>
        </dl>
        <dl>
            <dt>男士手表</dt>
            <dd>
                                    <a   href="">送父亲</a>
                                    <a   href="">送老公</a>
                                    <a   href="">送男友</a> 
                                    <a   href="">送亲人</a> 
            </dd>
        </dl>
        <dl>
            <dt>女士手表</dt>
            <dd>
                                    <a   href="">送母亲</a>
                                    <a   href="">送老婆</a>
                                    <a   href="">送女友</a> 
                                    <a   href="">送亲人</a> 
            </dd>
        </dl>
        <dl>
            <dt>特价推荐</dt>
            <dd>
                <a href="" title="雅克利曼手表 Jacques Lemans">雅克利曼</a>
                <a href="" title="玛莎拉蒂手表 Maserati">玛莎拉蒂</a>
                <a href="" title="CK手表 Calvin Klein">CK</a>
                <a href="" title="Guess手表 Guess">Guess</a>
            </dd>
        </dl>
        <dl>
            <dt>款式场合</dt>
            <dd>
                <a href="" title="商务手表">商务休闲</a>
                <a href="" title="正装手表">正装</a>
                <a href="" title="时尚手表">时尚</a>
                <a href="" title="运动手表">运动</a>
                <a href="" title="运动手表">收藏</a>
            </dd>
        </dl>
           </div>
</html>

2.CSS样式代码 🏠


.idxBnr {
	width: 100%;
	height: 400px;
	overflow: hidden;
	position: relative;
	z-index: 1
}
.idxBnr li a {
	display: inline-block;
	width: 100%;
	height: 400px;
	background-position: 50% 0;
	background-repeat: no-repeat;
	zoom: 1
}
.idxBnr .bx-pager {
	text-align: center;
	position: absolute;
	bottom: 10px;
	left: 0;
	z-index: 51
}
.idxBnr .bx-pager .bx-pager-item {
	width: 24px;
	height: 24px;
	display: inline-block;
*display:inline;
	_display: inline
}
.idxBnr .bx-pager .bx-pager-item a.bx-pager-link {
	width: 17px;
	height: 17px;
	line-height: 0;
	font-size: 0;
	overflow: hidden;
	text-indent: 99em;
	display: inline-block;
	background-position: -225px -56px;
	vertical-align: middle;
	background:#fff;
	color:#000;
}
.idxBnr .bx-pager .bx-pager-item a.active {
	width: 25px;
	height: 25px;
	line-height: 25px;
	background-position: -197px -56px;
	text-indent: 0;
	font-size: 16px
}
.idxBnd {
	background-image: url(images/idxBnd_bg.png);
	background-repeat: repeat-x;
	height: 176px;
	overflow: hidden
}
.idxBnd .tCnt {
	margin: 0 auto;
	position: relative
}
.idxBnd .tBtnLe, .idxBnd .tBtnRi {
	margin: 20px 0 0 0
}
.idxBnd .tCnt .logosSet {
	height: 150px;
	margin: 0 auto;
	position: relative
}
.logosSet ul {
	width: 100%;
	height: 150px;
	overflow: hidden;
	float: left;
	position: relative
}
.logosSet li {
	width: 1150px;
	overflow: hidden;
	float: left;
	height: 150px
}

三、个人总结😊

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

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

四、更多干货🚀

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

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

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬

大二Web课程设计——基于HTML CSS JavaScript jquery手表商城购物网站(17页)

文章目录🌰

一、网页介绍📖

一、网页效果🌌

二、代码展示😈

1.HTML结构代码 🧱

2.CSS样式代码 🏠

三、个人总结😊

四、更多干货🚀

JQuery 详细教程

【web前端期末/课程设计】中国体育网站(bootstrap4/jQuery/swiper)

Echarts图表官网打开太慢怎么办？echarts.apache.org

vue3 ECharts实现可视化中国地图

ABAP: JSON 报文解析——/ui2/cl_json

使用SSE实现echarts数据实时更新

uni-app echarts组件封装

使用ResizeObserver观察DOM元素的尺寸变化

HTML5 Day2-块元素和行内块元素

vue切换页面echarts图表不显示的问题

前端哥

用JQueryUI库在.net MVC中配置datepicker(时间日期控件)

JQuery 详细教程

jQuery Mobile 高级教程（二）

jQuery2 高级教程（八）

【web前端期末/课程设计】中国体育网站(bootstrap4/jQuery/swiper)

jQuery-LazyLoad-Any 开源项目安装与使用指南

jQuery Spellchecker 使用教程

Echarts图表官网打开太慢怎么办？echarts.apache.org

【Java】深入浅出Jackson与JSON的“Unrecognized field”问题解析

PHP用CURL发送Content-type为application/json的POST请求方法

1
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

2
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

3
npm的使用

2024-08-18 00:08:131000

4
JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000

5
在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000

6
成为优秀的TS体操高手之 TS 类型体操前置知识储备

2024-06-10 11:06:351000

7
django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000

8
html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000

9
jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000

10
基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000