9.web前端网页制作美妆网页设计实例大学生期末大作业 html+css+js

本文链接：https://blog.csdn.net/A240307/article/details/136719444

本文以美妆旅游为主题，介绍了从头设计美妆网站并转换为代码的过程。采用HTML5+CSS3+JS语言，实现了导航栏、动态轮播等特效。展示了HTML、CSS、JS代码示例，总结了页面设计要求，还提供交流分享渠道。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

本文以“美妆”旅游为主题来设计实践，介绍如何通过从头开始设计美妆网站并将其转换为代码的过程。本实例为html+css+javascript代码。该实例里面有设置导航栏效果、js动态轮播特效,二级列表、点击事件、导航栏效果、DIV、Banner、表格、视频、注册、登录页面等实例比较全面，供大家参考。

一、网页介绍

1.网页简介

此实例系统文件种类包含：HTML结构文件、css网页样式文件、js网页特效文件、images网页图片文件；画面精明，代码简短，供大家参考。

2.网页编辑

网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。兼容各大主流浏览器、显示效果稳定的浮动网页布局结构，已达到打开后就能即时看到网站的效果。

3.知识应用

采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计，js动态轮播特效,二级列表、点击事件、导航栏效果、DIV、Banner、表格、视频、注册、登录页面等。

二、网页效果

提示：以下是本篇文章正文内容，下面案例供参考:

三、代码展示

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/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<link href="css/style2.css" rel="stylesheet" type="text/css" />
</head>

</ul>

$('#prevbt').click(function() {
prevbt();
})
$('#nextbt').click(function() {
nextbt();
})

banner_T = setInterval(banner_Auto, 5000)

function banner_Auto() {
nextbt();
}
$('#banner').hover(function() {
clearInterval(banner_T);
}, function() {
banner_T = setInterval(banner_Auto, 5000);
})
</script>
</div>

</div>
<div class="main">
<div class="cp">
<div class="cp_1">
<div class="cp_title"></div>
<div class="cp_list">
<div class="cp_list1">
<a href="#"><img src="image/cp_t1.jpg" /></a>
<p><a href="#">活细胞精华系列</a></p>
<span>活细胞精华有着显著的效果，让你体验一种意想不到的神奇效果。</span>
<h>于美白事业的追求，我们永远都在路上我们的态度永远都追崇一丝不苟
</h>
</div>
<div class="cp_list2">
<a href="#"><img src="image/cp_t2.jpg" /></a>
<p><a href="#">逆时空面膜系列</a></p>
<span>活细胞精华有着显著的效果，让你体验一种意想不到的神奇效果。</span>
<h>于美白事业的追求，我们永远都在路上我们的态度永远都追崇一丝不苟
</h>
</div>
</div>
</div>
<div class="cp_2">
<div class="cp_title2"></div>
<div class="cp_2_list">
<div class="cp_2_list1"><a href="#"><img src="image/cp_t3.jpg" /></a>
<p><a href="#">逆时空面膜系列</a></p>
<span>活细胞精华有着显著的效果，让你体验一种意想不到的神奇效果。</span>
<h>于美白事业的追求，我们永远都在路上我们的态度永远都追崇一丝不苟
</h>
</div>
<div class="cp_2_list2"><a href="#"><img src="image/cp_t4.jpg" /></a>
<p><a href="#">逆时空面膜系列</a></p>
<span>活细胞精华有着显著的效果，让你体验一种意想不到的神奇效果。</span>
<h>于美白事业的追求，我们永远都在路上我们的态度永远都追崇一丝不苟
</h>
</div>
</div>

</div>
</div>
<div class="aut">
<div class="aut_title"></div>
<div class="aut_list">
<ul>
<li><a href="#"><img src="image/aut_t1.jpg" /></a></li>
<li><a href="#"><img src="image/aut_t2.jpg" /></a></li>
<li><a href="#"><img src="image/aut_t3.jpg" /></a></li>
<li><a href="#"><img src="image/aut_t4.jpg" /></a></li>
</ul>
</div>
</div>
</div>
<div class="foot">
<div class="foot_1">
<div class="a"><img src="image/foot_logo.jpg" /></div>
<div class="b">

......

2.CSS

代码如下（节选示例）：

@charset "utf-8";
/* CSS Document */

* {
margin: 0;
padding: 0;
margin: 0 auto;
}

body {
font-family: "宋体";
font-size: 12px;
color: #000;
}

img {
border: 0px;
}

a {
text-decoration: none;
color: #000;
}

li {
list-style: none;
}

.head {
background: url(../style/nav_bj.jpg) repeat-x 0 95px;
}

.logo {
width: 1024px;
height: 65px;
padding-top: 20px;
margin-bottom: 10px;
}

.nav {
width: 1024px;
height: 36px;
}

.nav li {
float: left;
width: 120px;
line-height: 32px;
text-align: center;
}

.nav a {
color: #FFF;
font-size: 14px;
font-weight: bold;
display: block;
width: 105px;
height: 36px;
}

.nav span {
font-size: 14px;
font-weight: bold;
display: block;
width: 105px;
height: 35px;
color: #000;
background: url(../style/nav_a.jpg) no-repeat;
}

.nav a:hover {
color: #000;
background: url(../style/nav_a.jpg) no-repeat;
}

.banner {
width: 1024px;
height: auto;
margin-top: 10px;
}

.main_1 {
wisth: 1024px;
height: auto;
}

.cp {
width: 1024px;
height: 400px;
margin-top: 70px;
padding-left: 10px;
}

.cp_1 {
width: 500px;
float: left;
}

.cp_title {
width: 500px;
height: 22px;
background: url(../style/cp_1.jpg) no-repeat;
}

.cp_list {
width: 500px;
height: 350px;
margin-top: 36px;
border-right: 1px #CCC dashed;
}

.cp img {
width: 240px;
height: 192px;
margin-bottom: 10px;
}

.cp_list1 {
width: 240px;
height: 360px;
float: left;
}

.cp p a {
font-family: "汉仪中等线简";
font-size: 14px;
font-weight: bold;
color: #999999;
}

.cp span {
font-family: "汉仪综艺体简";
font-size: 14px;
font-weight: bold;
color: #000;
display: block;
line-height: 24px;
width: 240px;
height: 50px;
overflow: hidden;
margin-top: 10px;
}

.cp h {
font-family: "汉仪中等线简";
font-size: 14px;
font-weight: bold;
color: #999999;
display: block;
line-height: 24px;
width: 240px;
height: 50px;
overflow: hidden;
margin-top: 5px;
}

.cp_list2 {
width: 240px;
height: 360px;
float: left;
margin-left: 5px;
}

.cp_2 {
width: 500px;
float: left;
margin-left: 5px;
}

.cp_title2 {
width: 500px;
height: 22px;
background: url(../style/cp_2.jpg) no-repeat;
}

.cp_2_list {
width: 500px;
height: 350px;
margin-top: 36px;
margin-left: 5px;
}

.cp_2_list1 {
width: 240px;
height: 360px;
float: left;
}

.cp_2_list2 {
width: 240px;
height: 360px;
float: left;
margin-left: 5px;
}

.aut {
width: 1024px;
height: auto;
padding-top: 80px;
margin-bottom: 80px;
}

.aut img {
width: 200px;
height: 180px;
}
......

3.JS

代码如下（节选示例）：

jQuery.easing.jswing = jQuery.easing.swing;
jQuery.extend(jQuery.easing, {
def: "easeOutQuad",
swing: function(e, f, a, h, g) {
return jQuery.easing[jQuery.easing.def](e, f, a, h, g)
},
easeInQuad: function(e, f, a, h, g) {
return h * (f /= g) * f + a
},
easeOutQuad: function(e, f, a, h, g) {
return -h * (f /= g) * (f - 2) + a
},
easeInOutQuad: function(e, f, a, h, g) {
if ((f /= g / 2) < 1) {
return h / 2 * f * f + a
}
return -h / 2 * ((--f) * (f - 2) - 1) + a
},
easeInCubic: function(e, f, a, h, g) {
return h * (f /= g) * f * f + a
},
easeOutCubic: function(e, f, a, h, g) {
return h * ((f = f / g - 1) * f * f + 1) + a
},
easeInOutCubic: function(e, f, a, h, g) {
if ((f /= g / 2) < 1) {
return h / 2 * f * f * f + a
}
return h / 2 * ((f -= 2) * f * f + 2) + a
},
easeInQuart: function(e, f, a, h, g) {
return h * (f /= g) * f * f * f + a
},
easeOutQuart: function(e, f, a, h, g) {
return -h * ((f = f / g - 1) * f * f * f - 1) + a
},
easeInOutQuart: function(e, f, a, h, g) {
if ((f /= g / 2) < 1) {
return h / 2 * f * f * f * f + a
}
return -h / 2 * ((f -= 2) * f * f * f - 2) + a
},
easeInQuint: function(e, f, a, h, g) {
return h * (f /= g) * f * f * f * f + a
},
easeOutQuint: function(e, f, a, h, g) {
return h * ((f = f / g - 1) * f * f * f * f + 1) + a
},
easeInOutQuint: function(e, f, a, h, g) {
if ((f /= g / 2) < 1) {
return h / 2 * f * f * f * f * f + a
}
return h / 2 * ((f -= 2) * f * f * f * f + 2) + a
},
easeInSine: function(e, f, a, h, g) {
return -h * Math.cos(f / g * (Math.PI / 2)) + h + a
},
easeOutSine: function(e, f, a, h, g) {
return h * Math.sin(f / g * (Math.PI / 2)) + a
},
easeInOutSine: function(e, f, a, h, g) {
return -h / 2 * (Math.cos(Math.PI * f / g) - 1) + a
},
easeInExpo: function(e, f, a, h, g) {
return (f == 0) ? a : h * Math.pow(2, 10 * (f / g - 1)) + a
},
easeOutExpo: function(e, f, a, h, g) {
return (f == g) ? a + h : h * (-Math.pow(2, -10 * f / g) + 1) + a
},
easeInOutExpo: function(e, f, a, h, g) {
if (f == 0) {
return a
}
if (f == g) {
return a + h
}
if ((f /= g / 2) < 1) {
return h / 2 * Math.pow(2, 10 * (f - 1)) + a
}
return h / 2 * (-Math.pow(2, -10 * --f) + 2) + a
},
easeInCirc: function(e, f, a, h, g) {
return -h * (Math.sqrt(1 - (f /= g) * f) - 1) + a
},
easeOutCirc: function(e, f, a, h, g) {
return h * Math.sqrt(1 - (f = f / g - 1) * f) + a
},
easeInOutCirc: function(e, f, a, h, g) {
if ((f /= g / 2) < 1) {
return -h / 2 * (Math.sqrt(1 - f * f) - 1) + a
}
return h / 2 * (Math.sqrt(1 - (f -= 2) * f) + 1) + a
},
easeInElastic: function(f, h, e, l, k) {
var i = 1.70158;
var j = 0;
var g = l;
if (h == 0) {
return e
}
if ((h /= k) == 1) {
return e + l
}
if (!j) {
j = k * 0.3
}
if (g < Math.abs(l)) {
g = l;
var i = j / 4
} else {
var i = j / (2 * Math.PI) * Math.asin(l / g)
}
return -(g * Math.pow(2, 10 * (h -= 1)) * Math.sin((h * k - i) * (2 * Math.PI) / j)) + e
},
easeOutElastic: function(f, h, e, l, k) {
var i = 1.70158;
var j = 0;
var g = l;
if (h == 0) {
return e
}
if ((h /= k) == 1) {
return e + l
}
if (!j) {
j = k * 0.3
}
if (g < Math.abs(l)) {
g = l;
var i = j / 4
} else {
var i = j / (2 * Math.PI) * Math.asin(l / g)
}
return g * Math.pow(2, -10 * h) * Math.sin((h * k - i) * (2 * Math.PI) / j) + l + e
},
easeInOutElastic: function(f, h, e, l, k) {
var i = 1.70158;
var j = 0;
var g = l;
if (h == 0) {
return e
}
if ((h /= k / 2) == 2) {
return e + l
}
if (!j) {
j = k * (0.3 * 1.5)
}
if (g < Math.abs(l)) {
g = l;
var i = j / 4
} else {
var i = j / (2 * Math.PI) * Math.asin(l / g)
}
if (h < 1) {
return -0.5 * (g * Math.pow(2, 10 * (h -= 1)) * Math.sin((h * k - i) * (2 * Math.PI) / j)) + e
}
return g * Math.pow(2, -10 * (h -= 1)) * Math.sin((h * k - i) * (2 * Math.PI) / j) * 0.5 + l + e
},
easeInBack: function(e, f, a, i, h, g) {
if (g == undefined) {
g = 1.70158
}
return i * (f /= h) * f * ((g + 1) * f - g) + a
},
easeOutBack: function(e, f, a, i, h, g) {
if (g == undefined) {
g = 1.70158
}
return i * ((f = f / h - 1) * f * ((g + 1) * f + g) + 1) + a
},
easeInOutBack: function(e, f, a, i, h, g) {
if (g == undefined) {
g = 1.70158
}
if ((f /= h / 2) < 1) {
return i / 2 * (f * f * (((g *= (1.525)) + 1) * f - g)) + a
}
return i / 2 * ((f -= 2) * f * (((g *= (1.525)) + 1) * f + g) + 2) + a
},
easeInBounce: function(e, f, a, h, g) {
return h - jQuery.easing.easeOutBounce(e, g - f, 0, h, g) + a
},

......

四、总结

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

五、交流分享

1.【关注作者|获取更多源码（2000+个网页源码）|优质文章】；
2. 您的支持是我创作的动力！看到这里就【点赞收藏博文】，三连支持下吧，3Q！关注我带您学习各种前端插件、整站模板、3D炫酷效果、图片展示、文字效果、大学生毕业HTML、期末大作业模板案例等；更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。