【HTML】HTML网页设计---模仿化妆品官网
2024-06-11 06:03:07
1、引言
设计结课作业,课程设计无处下手，网页要求的总数量太多？没有合适的模板？数据库，java，python，vue，html作业复杂工程量过大？毕设毫无头绪等等一系列问题。你想要解决的问题，在微信公众号“coding加油站”中全部会得到解决
2、作品介绍
化妆品官网系统采用html，css技术来实现，符合所学知识体系，适用于常见的作业以及课程设计，需要获取更多的作品，请关注微信公众号：coding加油站，回复“化妆品1”免费获取，如需更多资料，可在微信后台留言。欢迎大家来提问，交流学习。
2.1、作品简介方面
化妆品官网系统采用常规方式来实现，符合绝大部分的要求。代码配置有相关文档讲解，如需从代码中学到知识点，那么这个作品将是你的不二之选
2.2、作品二次开发工具
此作品代码相对简单，基本使用课堂中所学知识点来完成，只需要修改相关的介绍文字，一些图片，就可以改为自己独一无二的代码，网页作品下载后可使用任意编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）。
2.3、作品技术介绍
html网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等相关技术来美化相关界面，部分采用了javascript来做校验。 使用html5，以及css3等相关技术完成技术的布局，在本作品中，会使用常见的布局，常见的浮动布局，flex布局都会有使用到哦。同时在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识，同时使用了一些js的相关知识。例如使用到了dom，和bom来获取浏览器的相关api，同时使用css对样式进行相关的美化，使得界面更加符合网页设计
3、作品演示
【coding加油站】HTML设计--化妆品官网设计
3.1、首页
相关代码：
<div class="main01"><h2><span></span><div class="right"><b class="curr01"></b><b></b><b></b><a href="javascript:"><p><i></i></p><p><big></big></p></a></div></h2><div class="goods"><ul><li><a href="#"><img src="data:images/index01.png" /><p>太极系列</p></a></li><li><a href="#"><img src="data:images/index02.png" /><p>太极系列</p></a></li><li><a href="#"><img src="data:images/index03.png" /><p>太极系列</p></a></li><li><a href="#"><img src="data:images/index01.png" /><p>太极系列</p></a></li><li><a href="#"><img src="data:images/index02.png" /><p>太极系列</p></a></li><li><a href="#"><img src="data:images/index03.png" /><p>太极系列</p></a></li><li><a href="#"><img src="data:images/index01.png" /><p>太极系列</p></a></li><li><a href="#"><img src="data:images/index02.png" /><p>太极系列</p></a></li><li><a href="#"><img src="data:images/index03.png" /><p>太极系列</p></a></li><li><a href="#"><img src="data:images/index01.png" /><p>太极系列</p></a></li></ul><ul><li><a href="#"><img src="data:images/index04.png" /><p>太极系列</p></a></li><li><a href="#"><img src="data:images/index05.png" /><p>太极系列</p></a></li><li><a href="#"><img src="data:images/index06.png" /><p>太极系列</p></a></li><li><a href="#"><img src="data:images/index04.png" /><p>太极系列</p></a></li><li><a href="#"><img src="data:images/index05.png" /><p>太极系列</p></a></li><li><a href="#"><img src="data:images/index06.png" /><p>太极系列</p></a></li><li><a href="#"><img src="data:images/index04.png" /><p>太极系列</p></a></li><li><a href="#"><img src="data:images/index05.png" /><p>太极系列</p></a></li><li><a href="#"><img src="data:images/index06.png" /><p>太极系列</p></a></li><li><a href="#"><img src="data:images/index04.png" /><p>太极系列</p></a></li></ul><ul><li><a href="#"><img src="data:images/index07.png" /><p>太极系列</p></a></li><li><a href="#"><img src="data:images/index05.png" /><p>太极系列</p></a></li><li><a href="#"><img src="data:images/index03.png" /><p>太极系列</p></a></li><li><a href="#"><img src="data:images/index07.png" /><p>太极系列</p></a></li><li><a href="#"><img src="data:images/index05.png" /><p>太极系列</p></a></li><li><a href="#"><img src="data:images/index03.png" /><p>太极系列</p></a></li><li><a href="#"><img src="data:images/index07.png" /><p>太极系列</p></a></li><li><a href="#"><img src="data:images/index05.png" /><p>太极系列</p></a></li><li><a href="#"><img src="data:images/index03.png" /><p>太极系列</p></a></li><li><a href="#"><img src="data:images/index01.png" /><p>太极系列</p></a></li></ul></div></div>3.2、商品页
相关代码：
<div class="banner"><!--头部--><div class="top"><div class="logo"></div><span></span><div class="txt01"><p>专注护肤行业<b>10年</b></p><p>我们只生产最高品质的护肤产品</p></div><div class="tel"><p>全国服务咨询热线</p><b>12121212</b></div></div><!--导航--><div class="nav"><div class="nav_bg"><ul><li><a href="index.html">首页</a></li><li><span></span><a href="news.html">公司新闻</a></li><li class="ff"><span></span><a href="product.html">产品中心</a></li><li><span></span><a href="companyIdea.html">公司理念</a></li><li><span></span><a href="contactUs.html">联系我们</a></li></ul><div class="search"><div class="s01">产品搜索</div><input type="text" value="请输入关键字" class="s02" /><span></span></div></div></div><i></i></div><div class="main"><h2>当前位置：首页>产品中心</h2><div class="left"><div class="title"><span></span>产品中心</div><ul><li><a href="#">面膜系列</a></li><li class="curr"><a href="#">太极养美系列</a></li><li><a href="#">新七白系列</a></li></ul><div class="ad"><div class="s01"><span></span><p>客服中心</p><span></span></div><div class="s02"><b><i></i></b></div><div class="s03"><p>电话：010-57203888</p><p>地址：北京市崇文区崇外大街正仁大厦1段9单元</p></div></div><div class="tel"><div class="box01"><span>服务热线</span><i></i><p>12121212</p></div></div><div class="yin"><img src="data:images/yin01.png" /> </div></div>
3.3、新闻界面
相关代码：
<div class="main"><h2>当前位置：首页>新闻中心</h2><div class="left"><ul><li class="curr"><a href="#"><span></span>公司新闻</a></li><li><a href="#"><span></span>公司荣誉</a></li><li><a href="#"><span></span>品牌资讯</a></li><li><a href="#"><span></span>佰草会刊</a></li></ul><div class="ad"><div class="s01"><span></span><p>客服中心</p><span></span></div><div class="s02"><b><i></i></b></div><div class="s03"><p>电话：010-57203888</p><p>地址：北京市崇文区崇外大街正仁大厦1段9单元</p></div></div><div class="tel"><div class="box01"><span>服务热线</span><i></i><p>12121212</p></div></div><div class="yin"><img src="data:images/yin01.png" /> </div></div><div class="right" id="center"><ul><li><a href="newsxq.html"><img src="data:images/news01.png" style="border:solid 6px #e0eebf" /><div class="txt">首次冠名电视节目 现代中草药护理专家展亲和力<p>本季《出发吧！爱情》将到六个不同的挑战目的地，开展六段截然不同的惊险之旅，超级硬汉吴京与妻子谢楠，初为人母的戚薇以及丈夫李承铉、久未露面的范文芳和李铭顺，以及被华少戏称“神同步”夫妇郭京飞、鲍莉，将带领大家“出发去野”，在原生态的环境中大秀恩爱，并为了爱情勇敢上路....</p></div><span>详情>></span></a></li><li><a href="newsxq.html"><img src="data:images/news01.png" style="border:solid 6px #e0eebf" /><div class="txt">首次冠名电视节目 现代中草药护理专家展亲和力<p>本季《出发吧！爱情》将到六个不同的挑战目的地，开展六段截然不同的惊险之旅，超级硬汉吴京与妻子谢楠，初为人母的戚薇以及丈夫李承铉、久未露面的范文芳和李铭顺，以及被华少戏称“神同步”夫妇郭京飞、鲍莉，将带领大家“出发去野”，在原生态的环境中大秀恩爱，并为了爱情勇敢上路....</p></div><span>详情>></span></a></li><li><a href="newsxq.html"><img src="data:images/news01.png" style="border:solid 6px #e0eebf" /><div class="txt">以时尚概念沟通 吸引年轻消费者<p>本季《出发吧！爱情》将到六个不同的挑战目的地，开展六段截然不同的惊险之旅，超级硬汉吴京与妻子谢楠，初为人母的戚薇以及丈夫李承铉、久未露面的范文芳和李铭顺，以及被华少戏称“神同步”夫妇郭京飞、鲍莉，将带领大家“出发去野”，在原生态的环境中大秀恩爱，并为了爱情勇敢上路....</p></div><span>详情>></span></a></li><li><a href="newsxq.html"><img src="data:images/news01.png" style="border:solid 6px #e0eebf" /><div class="txt">以时尚概念沟通 吸引年轻消费者<p>本季《出发吧！爱情》将到六个不同的挑战目的地，开展六段截然不同的惊险之旅，超级硬汉吴京与妻子谢楠，初为人母的戚薇以及丈夫李承铉、久未露面的范文芳和李铭顺，以及被华少戏称“神同步”夫妇郭京飞、鲍莉，将带领大家“出发去野”，在原生态的环境中大秀恩爱，并为了爱情勇敢上路....</p></div><span>详情>></span></a></li></ul><ul><li><a href="newsxq.html"><img src="data:images/news001.png" style="border:solid 6px #e0eebf" /><div class="txt">首次冠名电视节目 现代中草药护理专家展亲和力<p>本季《出发吧！爱情》将到六个不同的挑战目的地，开展六段截然不同的惊险之旅，超级硬汉吴京与妻子谢楠，初为人母的戚薇以及丈夫李承铉、久未露面的范文芳和李铭顺，以及被华少戏称“神同步”夫妇郭京飞、鲍莉，将带领大家“出发去野”，在原生态的环境中大秀恩爱，并为了爱情勇敢上路....</p></div><span>详情>></span></a></li><li><a href="newsxq.html"><img src="data:images/news01.png" style="border:solid 6px #e0eebf" /><div class="txt">首次冠名电视节目 现代中草药护理专家展亲和力<p>本季《出发吧！爱情》将到六个不同的挑战目的地，开展六段截然不同的惊险之旅，超级硬汉吴京与妻子谢楠，初为人母的戚薇以及丈夫李承铉、久未露面的范文芳和李铭顺，以及被华少戏称“神同步”夫妇郭京飞、鲍莉，将带领大家“出发去野”，在原生态的环境中大秀恩爱，并为了爱情勇敢上路....</p></div><span>详情>></span></a></li><li><a href="newsxq.html"><img src="data:images/news01.png" style="border:solid 6px #e0eebf" /><div class="txt">以时尚概念沟通 吸引年轻消费者<p>本季《出发吧！爱情》将到六个不同的挑战目的地，开展六段截然不同的惊险之旅，超级硬汉吴京与妻子谢楠，初为人母的戚薇以及丈夫李承铉、久未露面的范文芳和李铭顺，以及被华少戏称“神同步”夫妇郭京飞、鲍莉，将带领大家“出发去野”，在原生态的环境中大秀恩爱，并为了爱情勇敢上路....</p></div><span>详情>></span></a></li><li><a href="newsxq.html"><img src="data:images/news002.png" style="border:solid 6px #e0eebf" /><div class="txt">以时尚概念沟通 吸引年轻消费者<p>本季《出发吧！爱情》将到六个不同的挑战目的地，开展六段截然不同的惊险之旅，超级硬汉吴京与妻子谢楠，初为人母的戚薇以及丈夫李承铉、久未露面的范文芳和李铭顺，以及被华少戏称“神同步”夫妇郭京飞、鲍莉，将带领大家“出发去野”，在原生态的环境中大秀恩爱，并为了爱情勇敢上路....</p></div><span>详情>></span></a></li></ul><ul><li><a href="newsxq.html"><img src="data:images/news002.png" style="border:solid 6px #e0eebf" /><div class="txt">首次冠名电视节目 现代中草药护理专家展亲和力<p>本季《出发吧！爱情》将到六个不同的挑战目的地，开展六段截然不同的惊险之旅，超级硬汉吴京与妻子谢楠，初为人母的戚薇以及丈夫李承铉、久未露面的范文芳和李铭顺，以及被华少戏称“神同步”夫妇郭京飞、鲍莉，将带领大家“出发去野”，在原生态的环境中大秀恩爱，并为了爱情勇敢上路....</p></div><span>详情>></span></a></li><li><a href="newsxq.html"><img src="data:images/news01.png" style="border:solid 6px #e0eebf" /><div class="txt">首次冠名电视节目 现代中草药护理专家展亲和力<p>本季《出发吧！爱情》将到六个不同的挑战目的地，开展六段截然不同的惊险之旅，超级硬汉吴京与妻子谢楠，初为人母的戚薇以及丈夫李承铉、久未露面的范文芳和李铭顺，以及被华少戏称“神同步”夫妇郭京飞、鲍莉，将带领大家“出发去野”，在原生态的环境中大秀恩爱，并为了爱情勇敢上路....</p></div><span>详情>></span></a></li><li><a href="newsxq.html"><img src="data:images/news01.png" style="border:solid 6px #e0eebf" /><div class="txt">以时尚概念沟通 吸引年轻消费者<p>本季《出发吧！爱情》将到六个不同的挑战目的地，开展六段截然不同的惊险之旅，超级硬汉吴京与妻子谢楠，初为人母的戚薇以及丈夫李承铉、久未露面的范文芳和李铭顺，以及被华少戏称“神同步”夫妇郭京飞、鲍莉，将带领大家“出发去野”，在原生态的环境中大秀恩爱，并为了爱情勇敢上路....</p></div><span>详情>></span></a></li><li><a href="newsxq.html"><img src="data:images/news001.png" style="border:solid 6px #e0eebf" /><div class="txt">以时尚概念沟通 吸引年轻消费者<p>本季《出发吧！爱情》将到六个不同的挑战目的地，开展六段截然不同的惊险之旅，超级硬汉吴京与妻子谢楠，初为人母的戚薇以及丈夫李承铉、久未露面的范文芳和李铭顺，以及被华少戏称“神同步”夫妇郭京飞、鲍莉，将带领大家“出发去野”，在原生态的环境中大秀恩爱，并为了爱情勇敢上路....</p></div><span>详情>></span></a></li></ul><ul><li><a href="newsxq.html"><img src="data:images/news001.png" style="border:solid 6px #e0eebf" /><div class="txt">首次冠名电视节目 现代中草药护理专家展亲和力<p>本季《出发吧！爱情》将到六个不同的挑战目的地，开展六段截然不同的惊险之旅，超级硬汉吴京与妻子谢楠，初为人母的戚薇以及丈夫李承铉、久未露面的范文芳和李铭顺，以及被华少戏称“神同步”夫妇郭京飞、鲍莉，将带领大家“出发去野”，在原生态的环境中大秀恩爱，并为了爱情勇敢上路....</p></div><span>详情>></span></a></li><li><a href="newsxq.html"><img src="data:images/news01.png" style="border:solid 6px #e0eebf" /><div class="txt">首次冠名电视节目 现代中草药护理专家展亲和力<p>本季《出发吧！爱情》将到六个不同的挑战目的地，开展六段截然不同的惊险之旅，超级硬汉吴京与妻子谢楠，初为人母的戚薇以及丈夫李承铉、久未露面的范文芳和李铭顺，以及被华少戏称“神同步”夫妇郭京飞、鲍莉，将带领大家“出发去野”，在原生态的环境中大秀恩爱，并为了爱情勇敢上路....</p></div><span>详情>></span></a></li><li><a href="newsxq.html"><img src="data:images/news01.png" style="border:solid 6px #e0eebf" /><div class="txt">以时尚概念沟通 吸引年轻消费者<p>本季《出发吧！爱情》将到六个不同的挑战目的地，开展六段截然不同的惊险之旅，超级硬汉吴京与妻子谢楠，初为人母的戚薇以及丈夫李承铉、久未露面的范文芳和李铭顺，以及被华少戏称“神同步”夫妇郭京飞、鲍莉，将带领大家“出发去野”，在原生态的环境中大秀恩爱，并为了爱情勇敢上路....</p></div><span>详情>></span></a></li><li><a href="newsxq.html"><img src="data:images/news002.png" style="border:solid 6px #e0eebf" /><div class="txt">以时尚概念沟通 吸引年轻消费者<p>本季《出发吧！爱情》将到六个不同的挑战目的地，开展六段截然不同的惊险之旅，超级硬汉吴京与妻子谢楠，初为人母的戚薇以及丈夫李承铉、久未露面的范文芳和李铭顺，以及被华少戏称“神同步”夫妇郭京飞、鲍莉，将带领大家“出发去野”，在原生态的环境中大秀恩爱，并为了爱情勇敢上路....</p></div><span>详情>></span></a></li></ul><div class="num"><b><a href="javascript:">上一页</a></b><span class="curr"><a href="javascript:">1</a></span><span><a href="javascript:">2</a></span><span><a href="javascript:">3</a></span><span><a href="javascript:">4</a></span><b><a href="javascript:">下一页</a></b></div></div></div>总结
以上就是本次项目的全部内容，需要交流或者免费获取代码请关注微信公众号：coding加油站，回复“化妆品1”免费获取
【HTML】HTML网页设计---模仿化妆品官网相关推荐
- 网页设计作业——小米商城官网首页(1页) HTML+CSS+JavaScript web期末作业设计网页_清新淡雅个人网页大学生网页设计作业成品
HTML5期末大作业:网页设计--小米商城官网首页(1页) 文章目录 HTML5期末大作业:网页设计--小米商城官网首页(1页) 一.作品展示 二.文件目录 三.代码实现 四.完整源码 一.作品展示 ...
- HTML5期末大作业：美食主题网站设计——美食零食官网响应式网页设计(6页) HTML+CSS+JavaScript
HTML5期末大作业:美食主题网站设计--美食零食官网响应式网页设计(6页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 常见网 ...
- HTML5期末大作业：零食官网网站设计——美食零食官网(6页) html网页制作期末美食作业成品_小吃类网页设计期末作业
HTML5期末大作业:零食官网网站设计--美食零食官网(6页) html网页制作期末美食作业成品_小吃类网页设计期末作业 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. ...
- HTML5期末大作业：游戏官网网站设计——神之刃游戏官网网页(6页) HTML+CSS+JavaScript web网页设计与开发
HTML5期末大作业:游戏官网网站设计--神之刃游戏官网网页(6页) HTML+CSS+JavaScript web网页设计与开发 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商 ...
- html大作业网页代码——神之刃游戏官网网页(6页) HTML+CSS+JavaScript web网页设计与开发
HTML5期末大作业:游戏官网网站设计--神之刃游戏官网网页(6页) HTML+CSS+JavaScript web网页设计与开发 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商 ...
- HTML+CSS+JS零食官网网站设计——美食零食官网(6页) html网页制作期末美食作业成品_小吃类网页设计期末作业
HTML5期末大作业:零食官网网站设计--美食零食官网(6页) html网页制作期末美食作业成品_小吃类网页设计期 文章目录 HTML5期末大作业:零食官网网站设计--美食零食官网(6页) html网 ...
- 学生HTML个人网页作业作品 ~ 科技大学官网 网页设计成品~ 学生网页设计作业源码
HTML5+CSS期末大作业:某科技大学官网设计 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 大学生毕设网页设计源码论文HTML 作品展示 其他在线 ...
- 大气的品牌化妆品官网模板
web前端期末大作业 html+css+javascript网页设计实例 企业网站制作 HTML期末大作业~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个人网站作业模 ...
- android魅族轮播图,用angularjs模仿魅族官网的图片轮播功能
使用指令模仿魅族官网的图片轮播功能(angularjs中DOM操作都在指令中完成) html css .slider{ position: relative; width:900px; height: ...
最新文章
- 4-2-串的堆存储结构-串-第4章-《数据结构》课本源码-严蔚敏吴伟民版
- 深入理解按位异或运算符
- 二分类最优阈值确定_机器学习 | 详解GBDT在分类场景中的应用原理与公式推导...
- springbatch的writer、processor、reader复杂太难用？使用tasklet更方便！
- 类variant解剖
- mysql执行动态批处理,使用BAT批处理执行sql语句的代码
- mysql运维管理-mysqldump 备份与恢复数据库20
- SAP UI5 Web Component React应用如何在Component之间跳转
- javafx 自定义控件_JavaFX技巧10：自定义复合控件
- .net runtime占用cpu_追踪将服务器CPU耗光的凶手!
- 解析力 （2）空间采样 和 奈奎斯特
- 人体颈椎神经分布图高清,颈椎部神经分布图高清
- Android 设备解锁
- 【论文阅读】Generalization in Reinforcement Learning
- js layui 模板属性 添加_layui模板引擎如何使用 - layim
- Spring Cloud Alibaba Sentinel（七）受权规则 黑白名单
- JavaScript实现五种排序算法
- 快速读懂Http3协议总结
- 如果你在犹豫要不要去外包公司，不妨看看这篇文章
- 服务器如何安装虚拟机,服务器如何安装虚拟机