HTML网页设计基础期末作业——绿色化妆品网页(HTML+CSS)

本文链接：https://blog.csdn.net/ruan365392777/article/details/118516813

HTML网页设计基础期末作业——绿色化妆品网页(HTML+CSS)

临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~

原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。

作品介绍

1.网页作品简介方面 ：化妆品网站模板。喜欢的可以下载，文章页支持手机PC响应式布局。

2.网页作品编辑方面：此作品为学生个人主页网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）

3.网页作品布局方面：网页布局整体为LOGO、导航、主体内容布局。子页面多种布局，兴趣爱好内容使用图片列表布局，成绩页面插入了表格，联系我们使用图片对齐方式设置了左对齐。

4.网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。首页制作了留言表单，同时简单使用JavaScript制作了表单判断（提交时表单不能为空）

一、作品演示

在这里插入图片描述

二、代码目录

在这里插入图片描述

三、代码实现

<!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/index.css" type="text/css" rel="stylesheet" />
<link href="css/base.css" type="text/css" rel="stylesheet" />
</head>

<body>
	<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>400-888-2837</b>
            </div>            
        </div> 
        <div class="nav">
        	<div class="nav_bg">
            	<ul>
                	<li class="ff"><a href="index.html">首页</a></li>
                    <li><span></span><a href="news.html">公司新闻</a></li>
                    <li><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>
	</div>

	<div class="customer">
    	<div class="news">
        	<span><a href="javascript:">公司新闻</a></span>
            <span class="cur"><a href="javascript:">公司理念</a></span>            
            <ul>
            	<li><a href="newsxq.html">2008年，化妆品国际化全新产品在国内上市</a></li>
                <li><a href="newsxq.html">2011年4月，化妆品国第1000家门店正式开幕</a></li>
                <li><a href="newsxq.html">2013年，化妆品新品太极丹新品亮相上海家化</a></li>
                <li><a href="newsxq.html">2014年6月，化妆品携中国文化入侵巴黎</a></li>
            </ul>
            <ul>
            	<p><a href="companyIdea.html">2014年12月20日，现代中草药个人护理专家——化妆品首家体验型专卖店于上海正大广场全新揭幕。店内一系列特有的增值服务和贴心的体验环境，从空间打造到功能布局，完美诠释养美新体验。</a></p>
            </ul>
        </div>
        <div class="product">
        	<ul>
            	<li>
                	<a href="newsxq.html"><img src="picture/004.png"></a>
                    
            		<big></big><p><a href="productxq.html">现代中草药中高档个人护理品01</a></p>
                </li>
                <li>
                	<a href="newsxq.html"><img src="picture/005.png"></a>
                    
            		<big></big><p><a href="productxq.html">现代中草药中高档个人护理品02</a></p>
                </li>
                <li>
                	<a href="newsxq.html"><img src="picture/008.png"></a>
                    
            		<big></big><p><a href="productxq.html">现代中草药中高档个人护理品03</a></p>
                </li>
            </ul>
            <a href="javascript:"><i><span class="curr"><b></b></span><span><b></b></span><span><b></b></span></i></a>
        </div>
        <div class="consult">
        	<span>HOTLINE</span><p>全国免费专线</p><big>400-821-6188</big>
            <div class="web">
            	<div class="qq">
                	<a href="#"><img src="picture/01.png"></a>
                    <a href="#"><img src="picture/02.png"></a>
                    <a href="#"><img src="picture/03.png"></a>
                    <a href="#"><img src="picture/04.png"></a>
                    <a href="#"><img src="picture/05.png"></a>
                    <p><a href="#">售后服务</a><a href="#">售后服务</a></p>
                    <span><a href="#">在线咨询</a><a href="#">在线咨询</a></span>
                </div>
                <a href="#" class="two"><img src="picture/07.png"></a>
            </div>
            <b><img src="picture/mm.png"></b>
        </div>
    </div>

    <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="picture/index01.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="picture/index02.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="picture/index03.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="picture/index01.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="picture/index02.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="picture/index03.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="picture/index01.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="picture/index02.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="picture/index03.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="picture/index01.png" /><p>太极系列</p></a></li>
            </ul>
            <ul>
            	<li><a href="#"><img src="picture/index04.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="picture/index05.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="picture/index06.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="picture/index04.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="picture/index05.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="picture/index06.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="picture/index04.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="picture/index05.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="picture/index06.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="picture/index04.png" /><p>太极系列</p></a></li>
            </ul>
            <ul>
            	<li><a href="#"><img src="picture/index07.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="picture/index05.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="picture/index03.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="picture/index07.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="picture/index05.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="picture/index03.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="picture/index07.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="picture/index05.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="picture/index03.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="picture/index01.png" /><p>太极系列</p></a></li>
            </ul>
        </div>
    </div>
    
    <div class="main02">
    	<h2>
        	<span></span>
            <!--<div class="right">
                <b></b><b></b><b class="curr01"></b>
                <p class="curr02"></p><p></p>
            </div>-->
        </h2>
        <div class="company01"><span>中国智慧，全球时尚</span><p>上海化妆品有限公司，是上海家化联合股份有限公司
的全资子公司，拥有近3000万的固定注册资产。1998年8月，
化妆品作为全新概念的现代中草药中高档个人护理品品牌被
推出市场，并以其独树一帜在定位，很快在国内化妆品市场
崛起，在消费者心中树立起自然、清新、健康良好的品牌形
象。</p><a href="#">了解更多>></a></div>
        <div class="company02">
        	<img src="picture/002.png">
            <p>公司大楼</p><span>公司座落于:上海市浦东新区陆家嘴西路168号正大广场1层</span>
        </div>
        <div class="company03">
        	<img src="picture/003.png">
            <p>首家海外店铺成立</p><span>化妆品家海外旗舰店于法国巴黎的歌剧院大道38号盛
大揭幕。旗舰店空间设计流露浓浓东方韵味,</span>
        </div>
    </div>
    
    <div class="bottom">
    	<div class="bb">
                <ul>
                	<li><a href="index.html">首页</a></li>
                    <li><span></span><a href="news.html">公司新闻</a></li>
                    <li><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>
        <p>© 上海化妆品有限公司版权所有 沪ICP备11049051号 更多模板：<a href="http://www.cssmoban.com/" target="_blank">模板之家</a> </p>
    </div>
<style>
.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
</style>
<div class="copyrights">
  Collect from <a href="http://www.cssmoban.com/"  title="网站模板">模板之家</a>
  <a href="https://www.chazidian.com/"  title="查字典">查字典</a>
</div>
</body>
<script src="js/jquery.js"></script>
<script src="js/js.js"></script>
<script src="js/index.js"></script>
</html>