300字范文 > web期末网站设计大作业：关于制作网页主题论述——HTML+CSS+JavaScript橙色的时尚服装

web期末网站设计大作业：关于制作网页主题论述——HTML+CSS+JavaScript橙色的时尚服装

时间：2020-10-27 21:43:00

常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目, 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 xmlns="/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><title>ShopCZ-首页</title><link rel="stylesheet" href="css/base.css" type="text/css" /><link rel="stylesheet" href="css/shop_common.css" type="text/css" /><link rel="stylesheet" href="css/shop_header.css" type="text/css" /><link rel="stylesheet" href="css/shop_home.css" type="text/css" /><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/topNav.js"></script><script type="text/javascript" src="js/focus.js"></script><script type="text/javascript" src="js/shop_home_tab.js"></script></head><body><div class="shop_hd"><div class="shop_hd_topNav"><div class="shop_hd_topNav_all"><div class="shop_hd_topNav_all_left"><p>您好，欢迎来到<b><a href="/">ShopCZ商城</a></b>[<a href="">登录</a>][<a href="">注册</a>]</p></div><div class="shop_hd_topNav_all_right"><ul class="topNav_quick_menu"><li><div class="topNav_menu"><a href="#" class="topNavHover">我的商城<i></i></a><div class="topNav_menu_bd" style="display:none;"><ul><li><a title="已买到的商品" target="_top" href="#">已买到的商品</a></li><li><a title="个人主页" target="_top" href="#">个人主页</a></li><li><a title="我的好友" target="_top" href="#">我的好友</a></li></ul></div></div></li><li><div class="topNav_menu"><a href="#" class="topNavHover">卖家中心<i></i></a><div class="topNav_menu_bd" style="display:none;"><ul><li><a title="已售出的商品" target="_top" href="#">已售出的商品</a></li><li><a title="销售中的商品" target="_top" href="#">销售中的商品</a></li></ul></div></div></li><li><div class="topNav_menu"><a href="#" class="topNavHover">购物车<b>0</b>种商品<i></i></a><div class="topNav_menu_bd" style="display:none;"><p>还没有商品，赶快去挑选！</p></div></div></li><li><div class="topNav_menu"><a href="#" class="topNavHover">我的收藏<i></i></a><div class="topNav_menu_bd" style="display:none;"><ul><li><a title="收藏的商品" target="_top" href="#">收藏的商品</a></li><li><a title="收藏的店铺" target="_top" href="#">收藏的店铺</a></li></ul></div></div></li><li><div class="topNav_menu"><a href="#">站内消息</a></div></li></ul></div></div><div class="clear"></div></div><div class="clear"></div><div class="shop_hd_header"><div class="shop_hd_header_logo"><h1 class="logo"><a href="/"><img src="images/logo.png" alt="ShopCZ" /></a><span>ShopCZ</span></h1></div><div class="shop_hd_header_search"><ul class="shop_hd_header_search_tab"><li id="search" class="current">商品</li><li id="shop_search">店铺</li></ul><div class="clear"></div><div class="search_form"><form method="post" action="index.php"><div class="search_formstyle"><input type="text" class="search_form_text" name="search_content" value="搜索其实很简单！" /><input type="submit" class="search_form_sub" name="secrch_submit" value="" title="搜索" /></div></form></div><div class="clear"></div><div class="search_tag"><a href="">李宁</a><a href="">耐克</a><a href="">Kappa</a><a href="">双肩包</a><a href="">手提包</a></div></div></html>

2.CSS样式代码 🏠

/* ShopNC Header CSS wll-/3/24 */.shop_hd {width: 100%;}/* topNav css */.shop_hd_topNav {width: 100%;height: 29px;background-color: #F5F5F5;border-bottom: 1px solid #D8D8D8;}.shop_hd_topNav_all {width: 1000px;margin: 0 auto;position: relative;}.shop_hd_topNav_all_left {float: left;height: 20px;width: 550px;padding: 4px 0 5px;line-height: 20px;margin: 0;overflow: hidden;}.shop_hd_topNav_all_left a {margin: 0 4px;color: #666666;}.shop_hd_topNav_all_left a:hover {color: #FF3300;}.shop_hd_topNav_all_right {position: absolute;right: 0px;top: 4px;height: 20px;}.topNav_quick_menu {width: 450px;height: 20px;}.topNav_quick_menu li {float: left;height: 20px;line-height: 20px;}.topNav_quick_menu li a {padding: 0 23px 0 7px;display: inline-block;color: #666666;}.topNav_quick_menu li a.aHover {border: 1px solid #ccc;padding: 0 22px 0 6px;background-color: #FFF;border-bottom: none;position: relative;top: -1px;z-index: 998;}.topNav_quick_menu li a:hover {color: #FF3300;}.topNav_quick_menu li a i {border-color: #333333 transparent transparent;border-style: solid dashed dashed;border-width: 4px;font-size: 0px;height: 0;position: absolute;top: 9px;right: 10px;}.topNav_menu {position: relative;}.topNav_menu_bd {position: absolute;z-index: 997;padding: 5px 4px;top: 19px;border: 1px solid #CCCCCC;background-color: #FFF;}.topNav_menu_bd ul li {clear: both;width: 100px;}.topNav_menu_bd ul li a {padding: 0 13px 0 7px;}/* logo & search */.shop_hd_header {width: 1000px;margin: 0 auto;hegith: 90px;overflow: hidden;}.shop_hd_header_logo {width: 350px;height: 90px;float: left;}.logo {width: 180px;height: 50px;padding-top: 20px;}.logo span {display: none;}.shop_hd_header_search {width: 500px;float: left;height: 70px;padding: 10px 0;}.shop_hd_header_search_tab li {float: left;padding: 7px 13px;font-weight: bold;position: relative;top: 2px;cursor: pointer;}.shop_hd_header_search_tab li.current {background-color: #FE8502;border-radius: 5px 5px 0 0;color: #fff;}.search_form {width: 490px;height: 30px;overflow: hidden;background: url('../images/hbg.png') repeat-x left -99px;}.search_form form {width: 490px;height: 30px;overflow: hidden;background: url('../images/hbg.png') no-repeat left -69px;}.search_formstyle {width: 487px;height: 24px;overflow: hidden;background: url('../images/hbg.png') no-repeat 403px -129px;padding: 4px 0 3px 3px;}.search_form_text {width: 400px;height: 20px;font-size: 12px;border: none;padding: 2px 2px 0;font-family: yahei;color: #939393;float: left;}.search_form_sub {width: 82px;height: 26px;position: relative;top: -2px;cursor: pointer;background: transparent;border: none;}.search_tag {width: 480px;height: 22px;line-height: 22px;}.search_tag a {margin: 0 5px;color: #4F4F4F;}/* Header Menu */.shop_hd_menu {width: 1000px;margin: 0 auto;height: 35px;background: url('../images/nc_nav.png') repeat-x left top;border-radius: 5px 5px 0 0;position: relative;}.shop_hd_menu_nav {width: 790px;padding-left: 210px;height: 25px;line-height: 35px;font-size: 14px;}.shop_hd_menu_nav li {float: left;}.shop_hd_menu_nav li.current_link a span {background: url('../images/nc_nav.png') repeat-x left -110px;position: relative;left: 1px;}.shop_hd_menu_nav li a {margin: 0;font-size: 14px;font-weight: bold;color: #FFF;}.shop_hd_menu_nav li a:hover span {background: url('../images/nc_nav.png') repeat-x left -110px;}.shop_hd_menu_nav li a span {display: inline-block;height: 35px;line-height: 35px;padding: 0 25px;background: url('../images/nc_nav.png') no-repeat left -35px;}.shop_hd_menu_all_category {position: absolute;left: 0px;top: 0px;z-index: 89;width: 210px;}.shop_hd_menu_all_category_title {width: 210px;height: 35px;line-height: 35px;cursor: pointer;font-size: 14px;color: #FFF;background: none repeat scroll 0 0 #FE8502;border-radius: 5px 0 0 0;}.shop_hd_menu_all_category_title h2 {width: 180px;height: 35px;text-align: center;line-height: 35px;float: left;}.shop_hd_menu_all_category_title h2 a {font-weight: bold;color: #fff;}.shop_hd_menu_all_category_title h2 a:hover {text-decoration: none;}.shop_hd_menu_all_category_title i {display: inline-block;float: left;width: 16px;height: 10px;margin-top: 10px;background: url('../images/nc_nav.png') no-repeat -1px -200px;}.shop_hd_menu_all_category_hd {display: none;}ul.shop_hd_menu_all_category_hd_menu {border: 2px solid #FE8502;border-top: none;width: 206px;position: relative;background-color: #FEFCF6;}ul.shop_hd_menu_all_category_hd_menu li {width: 206px;height: 41px;}ul.shop_hd_menu_all_category_hd_menu li.more {height: 35px;line-height: 35px;}ul.shop_hd_menu_all_category_hd_menu li.more a {margin-left: 30px;color: #D1560D;}ul.shop_hd_menu_all_category_hd_menu li h3 {width: 206px;display: block;height: 41px;line-height: 41px;}ul.shop_hd_menu_all_category_hd_menu li h3 a {width: 170px;display: block;height: 41px;line-height: 40px;margin: 0 auto;font-size: 14px;color: #555555;padding-left: 36px;background: url('../images/nc_nav.png') no-repeat 0px -145px;}ul.shop_hd_menu_all_category_hd_menu li h3 a:hover {text-decoration: none;color: #CC0033;}ul.shop_hd_menu_all_category_hd_menu li.hover h3 a {text-decoration: none;color: #CC0033;background: #FFF;padding-right: 1px;height: 40px;z-index: 99;left: 0px;line-height: 40px;position: relative;top: -2px;padding-top: 1px;border-top: 1px solid #FF9E10;border-bottom: 1px solid #FF9E10;}ul.shop_hd_menu_all_category_hd_menu li.hover div.cat_menu {display: block;}.cat_menu {display: none;padding: 5px 5px 5px 20px;position: absolute;left: 206px;top: 20px;width: 400px;background-color: #FFF;border: 1px solid #FF9E10;z-index: 98;}.cat_menu dl {clear: both;width: 400px;margin: 20px 0;}.cat_menu dl a {color: #555555;}.cat_menu dl dt {width: 70px;float: left;font-weight: bold;line-height: 22px;}.cat_menu dl dd {width: 320px;float: left;line-height: 22px;}.cat_menu dl dd a {float: left;width: 74px;margin-right: 5px;}#cat_1 div.cat_menu {top: -2px;}#cat_6 div.cat_menu {top: 130px;}#cat_7 div.cat_menu {top: 160px;}#cat_8 div.cat_menu {top: 180px;}/* Menu Hover */.shop_hd_menu_hover div.shop_hd_menu_all_category_title i {background: url('../images/nc_nav.png') no-repeat -22px -200px;}.shop_hd_menu_hover div.shop_hd_menu_all_category_hd {display: block;}/* shop_hd_breadcrumb */.shop_hd_breadcrumb {width: 1000px;margin: 10px auto 0;color: #434A53;height: 20px;line-height: 20px;}.shop_hd_breadcrumb strong {font-weight: bold;color: #7B8188;}.shop_hd_breadcrumb span a {color: #434A53;}/* Footer */.shop_footer {width: 1000px;margin: 10px auto;text-align: center;padding: 10px 0;border-top: 1px solid #E9ECEF;}.shop_footer_link p {line-height: 25px;}.shop_footer_link p a {margin: 0 10px;color: #666666;}.shop_footer_copy {color: #AAAAAA;line-height: 20px;margin-top: 5px;}

三、个人总结😊

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

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