900字范文 > web网页设计期末课程大作业 HTML+CSS+JavaScript仿天猫购物商城设计实例企业网站制作

web网页设计期末课程大作业 HTML+CSS+JavaScript仿天猫购物商城设计实例企业网站制作

时间：2023-06-06 18:57:26

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

⚽精彩专栏推荐👇🏻👇🏻👇🏻

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

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

文章目录🌰

一、网页介绍📖一、网页效果🌌二、代码展示😈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><head><meta charset="UTF-8"><meta name="keywords" content="天猫" /><meta name="description" content="天猫 - 专业线上综合购物平台，全球消费者挚爱的品质购物之城！商品涵盖服饰箱包、美妆个护、家电数码、母婴玩具、美食酒水、家装家居等各大品类，旨在引领中国消费者第一时间发现和体验全球化、更优质的生活方式，提前开启趋势中的理想生活！理想生活，上天猫！" /><title>天猫--理想生活上天猫</title><link rel="stylesheet" href="css/common.css" /><link rel="stylesheet" href="css/index2.css" /><link rel="stylesheet" href="css/reset.css" /><link rel="stylesheet" href="css/index.css" /></head><body><div class="index-harder"><div class="wt1190 clearfix indexNov"><div class="indexNov1 fl"><ul><li><em>喵，欢迎来天猫</em></li><li><a href="login.html">请登录</a></li><li><a href="reg.html">免费注册</a></li></ul></div><div class="indexNov2 fr"><ul><li><div class="indexD"><a>我的淘宝</a><img src="img/首页/屏幕截图 -09-17 103647.png" /></div><div class="fr-divA1 addNone"><a>已买到的宝贝</a><a>已卖出的宝贝</a></div></li><li><div><img src="img/首页/屏幕截图 -09-17 090055.png" /><a>购物车</a></div></li><li><div class="indexD"><a>收藏夹</a><img src="img/首页/屏幕截图 -09-17 103647.png" /></div><div class="fr-divA2 addNone"><a>收到的宝贝</a><br /><a>收藏的店铺</a></div></li><li><em>|</em></li><li><div id="tm"><img src="img/首页/屏幕截图 -09-17 090107.png" class="imgI" /><a class="Ia" title="天猫无限">手机版</a></div><div class="index-M addNone"><div class="index_S"></div><div class="indexm"><img src="img/首页/O1CN01p7gvna1wNcJUZjbyI___6000000006296-2-tps-175-175.png" /><br /><p class="p1">到天猫App</p><p class="p2">新人享受4.9元包邮好货</p></div></div></li><li><div><a>淘宝网</a></div></li><li><div class="indexD"><a>商家支持</a><img src="img/首页/屏幕截图 -09-17 103647.png" /></div><div class="fr-divA3 addNone"><ul><li><h3>商家</h3><a>商家中心</a><a>天猫规则</a><br /><a>商家入住</a><a>运营服务</a><br /><a>商家品控</a><a>商家工具</a><br /><a>天猫智库</a><a>喵言喵语</a></li><li><h3>帮助</h3><div><a>商家服务大厅</a></div><div><a>问商友</a></div></li></ul></div></li><li><div class="indexD"><img src="img/首页/屏幕截图 -09-17 090144.png" class="imgI1" /><a>网站导航</a><img src="img/首页/屏幕截图 -09-17 103647.png" /></div><div class="fr-divA4 addNone"><div class="fr-divA4-Hot"><h2>热点推荐<span>Hot</span></h2><ul><li><a href="">天猫超市</a></li><li><a href="">喵鲜主</a></li><li><a href="">科技新品<i class="Hot-i"></i></a></li><li><a href="">女装新品 <i class="Hot-i-2"></i></a></li><li><a href="">酷玩街</a></li><li><a href="">内衣新品<i class="Hot-i-2"></i></a></li><li><a href="">试美装</a></li><li><a href="">运动新品</a></li><li><a href="">时尚先生<i class="Hot-i-2"></i></a></li><li><a href="">精明妈咪</a></li><li><a href="">吃乐会<i class="Hot-i"></i></a></li><li><a href="">企业采购</a></li><li><a href="">会员积分</a></li><li><a href="">天猫国际</a></li><li><a href="">品质频道</a></li></ul></div></div></html>

2.CSS样式代码 🏠

a {cursor: pointer;}.index-harder {height: 30px;background-color: #F2F2F2;font-size: 12px;}.indexNov2 {width: 52%;}.indexNov1 ul li {float: left;margin-right: 15px;color: #999999;margin-left: 2px;margin-top: 5px;}.indexNov2 ul li {margin-top: 5px;float: left;margin-left: 27px;color: #CCCCCC;text-align: center;position: relative;}.indexNov2 ul li em {margin-left: -10px;}.index-harder a {color: #999999;}.index-harder a:hover {color: #FF0036;}.indexD {padding: 0 2px;}.indexD:hover {background-color: white;}.imgI {position: absolute;top: 2px;left: -20px;}.imgI1 {position: absolute;top: 2px;left: -20px;}.indexNov2 ul li .fr-divA1 a {color: #666666;}.indexNov2 ul li a:hover {color: #FF0036;}.fr-divA1 {position: absolute;padding-top: 5px;top: 22px;left: -1px;background-color: white;width: 85px;height: 67px;border: 1px solid #EEEEEE;border-top: 0;z-index: 4;background-color: white;}.fr-divA2 {position: absolute;padding-top: 5px;top: 22px;left: -1px;background-color: white;width: 85px;height: 67px;border: 1px solid #EEEEEE;border-top: 0;z-index: 4;background-color: white;}.fr-divA3 {position: absolute;padding-top: 5px;top: 24px;left: -116px;background-color: white;width: 180px;height: 229px;border: 1px solid #EEEEEE;border-top: 0;z-index: 4;background-color: white;}.fr-divA3 ul li {border-bottom: 1px dotted #827777;width: 130px;color: #666666;}.fr-divA3 ul li h3 {font-weight: 700;margin-left: -100px;font-size: 12px;color: #666666;}.fr-divA4 {position: absolute;padding-top: 5px;top: 24px;width: 1164px;left: -1099px;background-color: white;height: 210px;border: 1px solid #EEEEEE;border-top: 0;z-index: 24;background-color: white;}.fr-divA4 .fr-divA4-Hot {float: left;width: 560px;height: 140px;}.fr-divA4 .fr-divA4-Hot {border-right: 1px solid #F5F5F5;}.fr-divA4 .fr-divA4-Hot ul li {width: 50px;margin-right: 35px;color: #666666;}.fr-divA4 .fr-divA4-Hot ul li a {color: #666666;position: relative;}.fr-divA4 .fr-divA4-Hot ul li a:hover {color: #F56A00;border-bottom: 1px solid #F56A00;}.fr-divA4 .fr-divA4-Hot h2 {color: #F56A00;margin-left: -417px;}.fr-divA4 .fr-divA4-Market {float: right;width: 600px;height: 140px;margin-left: -20px;}.fr-divA4 .fr-divA4-Market {border-right: 1px solid #F5F5F5;}.fr-divA4 .fr-divA4-Market ul li {width: 50px;margin-right: 43px;color: #666666;}.fr-divA4 .fr-divA4-Market ul li a {color: #666666;position: relative;}.fr-divA4 .fr-divA4-Market ul li a:hover {color: #3B75D9;border-bottom: 1px solid #3B75D9;}.fr-divA4 .fr-divA4-Market h2 {color: #3B75D9;margin-left: -405px;}padding-top: 4px;color: whitesmoke;}

三、个人总结😊

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

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