大学生化妆品网页设计模板代码化妆美妆网页作业成品学校美妆官网网页制作模板学生简单html网站设计成品

本文链接：https://blog.csdn.net/p305114466/article/details/126825566

📂文章目录

👨‍🎓网页题目
✍️网页描述
🌐网页效果
⚙️ 代码实现
- 🧱HTML结构代码
🎁更多干货

👨‍🎓网页题目

💄美妆介绍、👜美妆分享、👒 品牌化妆品官网网站、等网站的设计与制作。

✍️网页描述

🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。

🌐网页效果

在这里插入图片描述

⚙️ 代码实现

🧱HTML结构代码




<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>XXX官网</title>
<link href="css/css.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="http://www.ylcp.shop/files/files/1649494888079/js/jquery.js"></script>
</head>

<body>
<div class="top1">
<div class="top">
<div class="logo">
<h1><a href="#">XXX官网</a></h1>
</div>

<div class="box">

	<div id="nav-menu">
		<ul class="menu">
			<li class="stmenu li1"><h3><a href="index.html" class="xialaguang"><span>首页</span></a></h3></li>
			<li class="stmenu">
				<h3><a href="about.html" class="xialaguang"><span>品牌实力</span></a></h3>    
				<ul class="children">    
					<li><h3><a href="#"><span>FEYA简介</span></a></h3></li>
					<li><h3><a href="#"><span>品牌历程</span></a></h3></li>
					<li><h3><a href="#"><span>合作媒体</span></a></h3></li>
					<li><h3><a href="#"><span>卓越团队</span></a></h3></li>
				</ul>
			</li>
			<li class="stmenu">
				<h3><a href="pro.html" class="xialaguang"><span>全线产品</span></a></h3>    
				<ul class="children">    
					<li><h3><a href="#"><span>全线产品</span></a></h3></li>
					<li><h3><a href="#"><span>微商热销</span></a></h3></li>
					<li><h3><a href="#"><span>FEYA新品</span></a></h3></li>
					<li><h3><a href="#"><span>美发知识</span></a></h3></li>
				</ul>
			</li>
			<li class="stmenu">
				<h3><a href="" class="xialaguang"><span>最新动态</span></a></h3>    
				<ul class="children">    
					<li><h3><a href="#"><span>最新动态</span></a></h3></li>
					<li><h3><a href="#"><span>FEYA公告</span></a></h3></li>
					
				</ul>
			</li>
			<li class="stmenu">
				<h3><a href="nyfwcx.html" class="xialaguang"><span>授权查询</span></a></h3>
			</li>
			<li class="stmenu"><h3><a href="#" class="xialaguang"><span>防伪查询</span></a></h3></li>
			<li class="stmenu"><h3><a href="#" class="xialaguang"><span>xx我们</span></a></h3></li>
		</ul>
	</div>
	
</div>




</div>
</div>

<div class="nybanner">
</div>

<div class="neiyecp">
<div class="neiyecpl fl">
<h2><p>品牌实力</p></h2>

<ul>
<li><a href="#">FEYA简介    </a></li>
<li><a href="#">品牌历程    </a></li>
<li><a href="#">合作媒体    </a></li>
<li><a href="#">卓越团队</a></li>



</ul>

</div>

<div class="neiyecpr fr">
<h2><span class="fr">您当前位置：<a href="#">首页</a> > <a href="#">FEYA新闻</a></span><p>FEYA新闻</p>
</h2>
<div class="news">
<ul>
<li><span>2015-06-27</span><a href="#">全线产品全线产品全线产品全线产品全线产品</a></li>
<li><span>2015-06-27</span><a href="#">全线产品全线产品全线产品全线产品全线产品</a></li>
<li><span>2015-06-27</span><a href="#">全线产品全线产品全线产品全线产品全线产品</a></li>
<li><span>2015-06-27</span><a href="#">全线产品全线产品全线产品全线产品全线产品</a></li>
<li><span>2015-06-27</span><a href="#">全线产品全线产品全线产品全线产品全线产品</a></li>
</ul>
</div>

</div>
</div>
<div style="height:50px; overflow:hidden; clear:both;"></div>

<div class="huoban cl wid">
<div class="huobanm w">
<a href="#"><img src="picture/ny5_03.jpg" width="113" height="116"></a><a href="#"><img src="picture/ny5_05.jpg" width="113" height="116"></a><a href="#"><img src="picture/ny5_07.jpg" width="113" height="116"></a><a href="#"><img src="picture/ny5_09.jpg" width="113" height="116"></a><a href="#"><img src="picture/ny5_11.jpg" width="113" height="116"></a><a href="#"><img src="picture/ny5_13.jpg" width="113" height="116"></a>
</div>
</div>
<div class="main3 wid">
<p class="w">Copyright©2020 版权所有  京ICP备XXX号</p>
</div>


<div class="nydi_con">
<a href="#"><img src="picture/imgdf_51.jpg" height="90" width="227"></a>
</div>
</body>
</html>