HTML+CSS+JS网页设计期末课程大作业 html+css+javascript+jquery化妆品电商网站4页面

阅读：评论：0

常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, 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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../css/bin1.css" rel="stylesheet">
<link href="../css/bin2.css" rel="stylesheet">
<link href="../css/bin3.css" rel="stylesheet">
<link href="../css/bin4.css" rel="stylesheet">
<link href="../css/goods.css" rel="stylesheet"><title>化妆品网</title>
</head>
<body bgcolor="#E5E5E5"><!-- top --><div class="top"><div class="top-content"><div class="top-left"><p><a href="#">欢迎来到主页</a>【<a href="登录.html">登录</a>/<a href="注册.html">注册</a>】</p></div><div class="top-right"><ul class="top-right-menu"><li class="top1"><a href="登录.html">用户中心&nbsp;|</a><div class="yonghu"><ul class="yonghu1"><li><a href="#" target="_blank">个人中心</a><br/></li><li><a href="#" target="_blank">我的足迹</a><br/></li></ul></div></li><li><a href="#">我的购物车&nbsp;|</a></li><li><a href="#">公告中心&nbsp;|</a></li><li class="top4"><a href="#">我的收藏&nbsp;|</a><div class="dianpu"><ul class="dianpu1"><li><a href="#" target="_blank">收藏宝贝</a><br/></li><li><a href="#" target="_blank">收藏店铺</a><br/></li></ul>	</div></li><li class="kefu"><a href="#">在线客服</a></li></ul></div></div><div class="clear"></div></div><!--header center--><div class="header1"><div class="header"><div class="header-logo"><a href="#"><img src="../img/logo.jpg"  height="48"  alt="主页" title="主页"/></a></div><div class="search"><div class="search-form"><input type="text" class="search-form-text" name="search-content" value="输入关键字 搜索产品"/><button class="search-btn">搜索</button></div><div class="clear"></div><div class="search-tag">关键搜索： <a href="#">口红&nbsp;</a><a href="#">粉底液&nbsp;</a><a href="#">气垫&nbsp;</a><a href="#">防晒&nbsp;</a><a href="#">腮红</a></div></div><div class="search-tip"><ul><li><img src="../img/1.png" alt="一站式购齐" title="一站式购齐"><a href="#">一站式购齐</a></li><li><img src="../img/88.png" alt="" title="满88包邮"/><a href="#">满88包邮</a></li></ul></div></div></div><!------content 内容区域---------><div class="container"><div class="overflow"><div class="content-topnav">    <div class="topnav-fl">所有产品分类</div><div class="topnav-r"><div class="topnav-center"><ul><li class="active"><a class="active" href="#">&nbsp;&nbsp;首 页&nbsp;&nbsp;</a>&nbsp;&nbsp;&nbsp;|</li><li><a href="网页1.html">会员折扣区</a>&nbsp;&nbsp;&nbsp;|</li><li><a href="网页1.html">热门品牌区</a>&nbsp;&nbsp;&nbsp;|</li><li><a href="网页1.html">热销产品区</a>&nbsp;&nbsp;&nbsp;|</li><li><a href="网页1.html">特价清仓区</a>&nbsp;&nbsp;&nbsp;|</li><li><a href="网页1.html">新品抢先区</a>&nbsp;&nbsp;&nbsp;|</li><li><a href="网页1.html">时尚精品区</a>&nbsp;&nbsp;&nbsp;|</li><li><a href="网页1.html">时尚精品区</a>&nbsp;&nbsp;&nbsp;|</li></ul></div></div></div><!-------------侧栏导航 banner 广告位----------------><div class="content-main"><div class="content-main-fl"><ul class="shop-hd clearfix"><!-----单个菜单项-----><li id="cat-1" class="cat"><h3><a href="网页1.html" title="品牌口红"><i class="icon iconfont">&#xe904;</i><span>名牌口红</span><i class="icon iconfont fr">&#xe60d;</i></a></h3><!--------主导航下边小导航--------><div class="content-smallnav"><ul><li><a href="网页1.html">魅可</a></li><li><a href="网页1.html">圣罗兰</a></li><li><a href="网页1.html">迪奥</a></li><li><a href="网页1.html">tf</a></li><li><a href="网页1.html">兰蔻</a></li></ul></div><!-----------------end--------------------><div id="cat_1_menu" class="cat_menu clearfix" style=""><ul class="menu1"><table class="menu_fz"><tr><td><dl class="clearfix"><dt><a href="迪奥">迪奥</a></dt><dd><a href="">哑光999</a><a href="">滋润999</a><a href="">金属999</a></dd><dd><a href="">迪奥007</a><a href="">变色001</a><a href="">变色004</a></dd><dd><a href="">迪奥666</a><a href="">迪奥740</a><a href="">迪奥520</a></dd><dd><a href="">唇釉771</a><a href="">红管641</a><a href="">...</a></dd></dl><dl class="clearfix"><dt><a href="圣罗兰">圣罗兰</a></dt><dd><a href="">小银条103</a><a href="">小银条108</a><a href="">唇釉425</a></dd><dd><a href="">小金条9</a><a href="">圆管12</a><a href="">圆管46</a></dd><dd><a href="">方管1</a><a href="">圆管12</a><a href="">圆管46</a></dd><dd><a href="">方管57</a><a href="">黑管唇釉402</a><a href="">...</a></dd></dl><dl class="clearfix"><dt><a href="兰蔻">兰蔻</a></dt><dd><a href="">口红196</a><a href="">唇釉134</a><a href="">唇釉105</a></dd><dd><a href="">哑光口红505</a><a href="">口红132</a><a href="">...</a></dd></dl></td></div>
</html>

2.CSS样式代码 🏠


.goods_title{overflow: hidden;padding: 5px 0 5px 5px;
}
.goods_title h2{float: left;font-size: 20px;font-family: '微软雅黑';
}
ul.goods_title_fr{float: right;
}
.goods_title .goods_title_fr li{float: left;padding-left: 16px;
}
ul.goods_title_fr li a{color: #e8374d;
}
.goods{height: 550px;background: #ffffff;border-top: 2px solid #000;overflow: hidden;
}
.goods_fl{background:#B70003 ;width: 240px;float: left;
}
.goods_fl-2{background:#000E46;width: 240px;float: left;
}
.goods_fl_top{overflow: hidden;padding: 20px 9px;
}
.goods_fl_top-2{overflow: hidden;padding: 20px 9px;
}
.goods_fl_top-2 ul li{float: left;width: 56px;height: 56px;line-height: 56px;text-align: center;background: #FFFFFF;border-radius:100%; color:aqua;margin: 5px 8px;position: relative;border: 1px solid #ccc;
}
.goods_fl_top ul li{float: left;width: 56px;height: 56px;line-height: 56px;text-align: center;background: #FFFFFF;border-radius:100%; color: white;margin: 5px 8px;position: relative;border: 1px solid #ccc;
}
.goods_fl_top ul li:hover{background: transparent;border: 1px solid #ccc;
}
.goods_fl_top-2 ul li:hover{background: transparent;border: 1px solid #ccc;
}