48.Web前端网页制作手工皂介网页设计实例大学生期末大作业 html+css+js

仙女网页制作

已于 2024-05-11 16:00:40 修改

阅读量714

点赞数 19

CC 4.0 BY-SA版权

分类专栏： Web网页设计实例美妆文章标签：课程设计 javascript html5 css java 3d jquery

于 2024-03-28 23:14:17 首次发布

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

Web网页设计实例同时被 2 个专栏收录

826 篇文章

订阅专栏

美妆

9 篇文章

订阅专栏

该博客以“美妆”手工皂为主题，介绍了应用HTML、CSS、JS设计响应式网页的实例，包含DIV、图片轮翻效果、留言表单等。还展示了部分HTML和JS代码，最后推荐了更多网页制作相关的源码和文章，适合Web开发、课程设计等人群参考。

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

一、前言

本实例以“美妆”手工皂为主题设计，应用html+css+js，响应式网页，包括DIV、图片轮翻效果、留言表单等，供大家参考。【关注作者|获取更多源码（2000+个Web案例源码）|优质文章】；您的支持是我创作的动力！【点赞收藏博文】，Web开发、课程设计、毕业设计有兴趣的联系我交流分享，3Q！

二、网页文件

三、网页效果

以下为网页正文（节选示例）：

四、代码展示

1.HTML

代码如下（节选示例）：

<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>主页</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/layout.css">
</head>
<body>
<header>
<nav>
<div class="top_wrap">
<div class="logo_wrap">
<img src="images/logo1.png">
</div>
<ul class="menu_li">
<li class="active"><a href="#">主页<br><span>Home</span></a></li>
<li><a href="workShow.html">作品展示<br><span>Works</span></a></li>
<li><a href="teachingMethod.html">制皂记<br><span>Methods</span></a></li>
<li><a href="contactUs.html">联系我们<br><span>Contact</span></a></li>
</ul>
<div class="menu_catalog" id="show_list_btn">
<i></i>
</div>
</div>
<ul class="menu_list" id="con_list">
<li class="cur"><a href="newView.html">主页<span>Home</span></a></li>
<li><a href="workShow.html">作品展示<span>Works</span></a></li>
<li><a href="teachingMethod.html">制皂记<span>Methods</span></a></li>
<li><a href="contactUs.html">联系我们<span>Contact Us</span></a></li>
</ul>
</nav>
<div id="top_img" class="carousel slide ">

<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0"
class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>

<div class="banner_con">
<div class="carousel-inner">
<div class="item active">
<div class="img_wrap">
<p>不骄，不矜，勤工，好学，才是好女子。</p>
<div class="img_border">
<img src="images/pic2.png">
</div>
<div class="img_border">
<img src="images/pic7.png">
</div>
</div>
</div>
<div class="item">
<div class="img_wrap">
<p>人静而后安，安而能后定，定而能后慧，慧而能后悟，悟而能后得。</p>
<div class="img_border">
<img src="images/pic3.png">
</div>
<div class="img_border">
<img src="images/pic4.png">
</div>
</div>
</div>
<div class="item">
<div class="img_wrap">
<p>有时候，一点微不足道的肯定，对我却意义非凡。</p>
<div class="img_border">
<img src="images/pic5.png">
</div>
<div class="img_border">
<img src="images/pic6.png">
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<main>
<div class="main_wrap1">

<div class="welcome">
<h2>欢迎来到"和皂"</h2>
<p>手工皂，就是我们自己DIY动手做香皂。只需要油脂、NaOH、水3种材料。手工香皂既可用作洗面，卸妆，又可用作沐浴用。手工香皂的泡沫细腻丰富，能彻底清除毛孔深处的油污，使肌肤滋润光泽，富有弹性。精油皂制作快大多成半透明状，且五颜六色非常漂亮；冷制凝脂皂制作周期长，毫不花哨。在这里都是兴趣相投的制皂人，一起分享，一起交流，一起享受制皂的快乐。</p>
</div>
</div>
<div class="main_wrap2">
<div class="pro_show">
<div class="pro_con">
<div class="pro_con_left" style="background-image: url('images/im1.jpg')">
</div>
<div class="pro_con_right">
<p>翡翠蕾丝手工皂</p>
<table>
<tr>
<td>制作人：</td>
<td>庫庫二凸</td>
</tr>
<tr>
<td>材料：</td>
<td>Olitalia EV橄榄油、椰子油、棕榈油、米糠油、酪梨油、乳油木果脂、蓖麻油、NaOH、丝瓜水、低温艾草粉、香茅精油</td>
</tr>
<tr>
<td>样式：</td>
<td>双层</td>
</tr>
<tr>
<td>制作流程：</td>
<td>制作蛋糕体，混合皂土，制作奶花，制作捏花，加装饰</td>
</tr>
<tr>
<td>制作时间：</td>
<td>15小时</td>
</tr>
</table>
<button class="btn btn-green">查看更多</button>
</div>
</div>

<div class="pro_con">
<div class="pro_con_left right" style="background-image: url('images/im2.jpg')">
</div>
<div class="pro_con_right">
<p>格子兔手工皂</p>
<table>
<tr>
<td>制作人：</td>
<td>晓晨熙熙</td>
</tr>
<tr>
<td>材料：</td>
<td>橄榄油300G、甜杏仁油120G、鳄梨油120G、橄榄脂60G、油总量600G、氢氧化钠81G、母乳285G、精油、洋甘菊精油2G、甜橙精油4G</td>
</tr>
<tr>
<td>样式：</td>
<td>月饼状</td>
</tr>
<tr>
<td>制作流程：</td>
<td>混合材料</td>
</tr>
<tr>
<td>制作时间：</td>
<td>4小时</td>
</tr>
</table>
<button class="btn btn-green">查看更多</button>
</div>

</div>

<div class="pro_con">
<div class="pro_con_left" style="background-image: url('images/im3.jpg')">
</div>
<div class="pro_con_right">
<p>芦荟手工皂</p>
<table>
<tr>
<td>制作人：</td>
<td>邂逅五月</td>
</tr>
<tr>
<td>材料：</td>
<td>Olitalia EV橄榄油、椰子油、棕榈油、米糠油、酪梨油、乳油木果脂、蓖麻油、NaOH、丝瓜水、低温艾草粉、香茅精油</td>
</tr>
<tr>
<td>样式：</td>
<td>双层</td>
</tr>
<tr>
<td>制作流程：</td>
<td>制作蛋糕体，混合皂土，制作奶花，制作捏花，加装饰</td>
</tr>
<tr>
<td>制作时间：</td>
<td>15小时</td>
</tr>
</table>
<button class="btn btn-green">查看更多</button>
</div>
</div>
<div class="pro_con">
<div class="pro_con_left right" style="background-image: url('images/im4.jpg')">
</div>
<div class="pro_con_right">
<p>橄榄油手工皂</p>
<table>
<tr>
<td>制作人：</td>
<td>庫庫二凸</td>
</tr>
<tr>
<td>材料：</td>
<td>橄榄油、椰子油、棕榈油、米糠油、酪梨油、乳油木果脂、蓖麻油、NaOH、丝瓜水、低温艾草粉、香茅精油、CP皂土</td>
</tr>
<tr>
<td>样式：</td>
<td>双层</td>
</tr>
<tr>
<td>制作流程：</td>
<td>制作蛋糕体，混合皂土，制作奶花，制作捏花，加装饰</td>
</tr>
<tr>
<td>制作时间：</td>
<td>15小时</td>
</tr>
</table>
<button class="btn btn-green">查看更多</button>
</div>

</div>
</div>
</div>
<div class="main_wrap3">
<div class="talented_person">
<h2>制皂达人</h2>
<div class="row_show">
<div class="person_con">
<figure>
<img src="images/hi1.jpg" title="晓晨熙熙" class="img-responsive img-thumbnail" >
</figure>
<h3>晓晨熙熙</h3>
<p>我一生渴望被人收藏好，妥善安放，细心保存。免我惊，免我苦，免我四下流离，免我无枝可依。但那人，我知，我一直知，他永不会来。</p>
</div>
<div class="person_con">
<figure>
<img src="images/hi2.jpeg" title="张昊焱" class="img-responsive img-thumbnail">
</figure>
<h3>张昊焱</h3>
<p>我一直喜欢下午的阳光。它让我相信这个世界任何事情都会有转机，相信命运的宽厚和美好。我们终归要长大，带着一种无怨的心情悄悄地长大。归根到底，成长是一种幸福。</p>
</div>
<div class="person_con">
<figure>
<img src="images/hi3.jpg" title="邂逅五月" class="img-responsive img-thumbnail">
</figure>
<h3>邂逅五月</h3>
<p>成功不是将来才有的，而是从决定去做的那一刻起，持续累积而成生命不可能有两次，但是许多人连一次也不善于度过。</p>

</div>
<div class="person_con">
<figure>
<img src="images/hi4.jpg" title="庫庫二凸" class="img-responsive img-thumbnail">
</figure>
<h3>庫庫二凸</h3>
<p>得不到的终归是风，强留千百次终究会走。人人都忙于自己的欢喜与悲伤，有时候习惯寂寞就好了。孤独的话说太多不被倾听更难过，给我个暂停键吧,我真的累了。</p>

</div>
</div>
</div>
</div>
</main>
<div class="parent">
<div>
<div></div>
</div>
<ul></ul>
<a></a>
<div></div>
</div>
</body>
<script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
<script type="text/javascript" rel="script" src="js/bootstrap.min.js"></script>
<script type="text/javascript" rel="script" src="js/main.js"></script>

</html>

......

2.CSS

代码如下（节选示例）：

html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%
}

body {
margin: 0
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block
}

audio, canvas, progress, video {
display: inline-block;
vertical-align: baseline
}

audio:not([controls]) {
display: none;
height: 0
}

[hidden], template {
display: none
}

a {
background-color: transparent
}

a:active, a:hover {
outline: 0
}

abbr[title] {
border-bottom: 1px dotted
}

b, strong {
font-weight: 700
}

dfn {
font-style: italic
}

h1 {
margin: .67em 0;
font-size: 2em
}

mark {
color: #000;
background: #ff0
}

small {
font-size: 80%
}

sub, sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline
}

sup {
top: -.5em
}

sub {
bottom: -.25em
}

img {
border: 0
}

svg:not(:root) {
overflow: hidden
}

figure {
margin: 1em 40px
}

hr {
height: 0;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box
}

pre {
overflow: auto
}

code, kbd, pre, samp {
font-family: monospace, monospace;
font-size: 1em
}

button, input, optgroup, select, textarea {
margin: 0;
font: inherit;
color: inherit
}

button {
overflow: visible
}

button, select {
text-transform: none
}

button, html input[type=button], input[type=reset], input[type=submit] {
-webkit-appearance: button;
cursor: pointer
}

button[disabled], html input[disabled] {
cursor: default
}

button::-moz-focus-inner, input::-moz-focus-inner {
padding: 0;
border: 0
}

input {
line-height: normal
}

input[type=checkbox], input[type=radio] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
height: auto
}

input[type=search] {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: textfield
}

input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
-webkit-appearance: none
}

fieldset {
padding: .35em .625em .75em;
margin: 0 2px;
border: 1px solid silver
}

legend {
padding: 0;
border: 0
}

textarea {
overflow: auto
}

optgroup {
font-weight: 700
}

table {
border-spacing: 0;
border-collapse: collapse
}

td, th {
padding: 0
}

/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */
@media print {
*, :after, :before {
color: #000 !important;
text-shadow: none !important;
background: 0 0 !important;
-webkit-box-shadow: none !important;
box-shadow: none !important
}

a, a:visited {
text-decoration: none
}

a[href]:after {
content: " (" attr(href) ")"
}

abbr[title]:after {
content: " (" attr(title) ")"
}

a[href^="javascript:"]:after, a[href^="#"]:after {
content: ""
}

blockquote, pre {
border: 1px solid #999;
page-break-inside: avoid
}

thead {
display: table-header-group
}

img, tr {
page-break-inside: avoid
}

img {
max-width: 100% !important
}

h2, h3, p {
orphans: 3;
widows: 3
}

h2, h3 {
page-break-after: avoid
}

.navbar {
display: none
}

.btn > .caret, .dropup > .btn > .caret {
border-top-color: #000 !important
}

.label {
border: 1px solid #000
}

.table {
border-collapse: collapse !important
}

.table td, .table th {
background-color: #fff !important
}

.table-bordered td, .table-bordered th {
border: 1px solid #ddd !important
}
}

......

3.JS

代码如下（节选示例）：

if ("undefined" == typeof jQuery)throw new Error("Bootstrap's JavaScript requires jQuery");
+function (a) {
"use strict";
var b = a.fn.jquery.split(" ")[0].split(".");
if (b[0] < 2 && b[1] < 9 || 1 == b[0] && 9 == b[1] && b[2] < 1)throw new Error("Bootstrap's JavaScript requires jQuery version 1.9.1 or higher")
}(jQuery), +function (a) {
"use strict";
function b() {
var a = document.createElement("bootstrap"), b = {
WebkitTransition: "webkitTransitionEnd",
MozTransition: "transitionend",
OTransition: "oTransitionEnd otransitionend",
transition: "transitionend"
};
for (var c in b)if (void 0 !== a.style[c])return {end: b[c]};
return !1
}

a.fn.emulateTransitionEnd = function (b) {
var c = !1, d = this;
a(this).one("bsTransitionEnd", function () {
c = !0
});
var e = function () {
c || a(d).trigger(a.support.transition.end)
};
return setTimeout(e, b), this
}, a(function () {
a.support.transition = b(), a.support.transition && (a.event.special.bsTransitionEnd = {
bindType: a.support.transition.end,
delegateType: a.support.transition.end,
handle: function (b) {
return a(b.target).is(this) ? b.handleObj.handler.apply(this, arguments) : void 0
}
})
})
}(jQuery), +function (a) {
"use strict";
function b(b) {
return this.each(function () {
var c = a(this), e = c.data("bs.alert");
e || c.data("bs.alert", e = new d(this)), "string" == typeof b && e[b].call(c)
})
}

var c = '[data-dismiss="alert"]', d = function (b) {
a(b).on("click", c, this.close)
};
d.VERSION = "3.3.5", d.TRANSITION_DURATION = 150, d.prototype.close = function (b) {
function c() {
g.detach().trigger("closed.bs.alert").remove()
}

function c(b) {
return this.each(function () {
var c = a(this), e = c.data("bs.collapse"), f = a.extend({}, d.DEFAULTS, c.data(), "object" == typeof b && b);
!e && f.toggle && /show|hide/.test(b) && (f.toggle = !1), e || c.data("bs.collapse", e = new d(this, f)), "string" == typeof b && e[b]()
})
}

......