html网页设计期末大作业——清新的手工肥皂网页(4页) web网页设计实例作业
常见网页设计作业题材有
个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目,A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
获取更多源码
PC电脑端关注我们
🧡作者主页-更多源码
🧡HTML期末大作业文章专栏
文章目录
- html网页设计期末大作业——清新的手工肥皂网页(4页) web网页设计实例作业
- 获取更多源码
- 一、作品展示
- 二、文件目录
- 三、代码实现
- 四、获取更多源码
- 五、学习资料
- 六、更多源码
一、作品展示
二、文件目录
三、代码实现
<!DOCTYPE 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>
四、获取更多源码
PC电脑端关注我们
五、学习资料
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
六、更多源码
PC电脑端关注我们
HTML5期末考核大作业源码* 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
