html5静态网页设计要是用HTML DIV+CSS JS等来完成页面的排版设计,一般的网页作业需要融入以下知识点：div布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频 视频 Flash的应用、ul li、下拉导航栏、鼠标划过效果等知识点，学生网页作业源码可以去猿猿设计官网下载，制作水平和原创度都适合学习或交作业用，记得点赞；

一般html5静态网页设计作业主题有 个人网页设计、 美食网页设计、家乡网页设计、 企业网页设计、 学校、 旅游网页设计、 电商购物网页设计、 宠物网页设计、 茶叶、 家居、 酒店、 舞蹈、 动漫网页设计、 明星、 服装网页设计、 体育网页设计、 化妆品网页设计、 物流、 书籍、 婚纱、 军事网页设计、 游戏网页设计、 节日网页设计、 环保网页设计、 电影、 摄影、 文化网页设计、  鲜花网页设计、 礼品、 汽车网页设计、 其他 等网页设计, 成品网页设计可以达到90分左右水平, 可满足大学生网页大作业网页设计需求, 喜欢的可以联系，我们也可以根据要求进行个性化定制。

 网页效果图：

首页HTML代码： 


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>茅台集团</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<link href="css/index.css" rel="stylesheet" type="text/css"/>
<link href="css/base.css" rel="stylesheet" type="text/css"/>
</head>

<body>

<!--顶部-->
<div class="top">
    <b><img src="images/logo.gif" /></b> 
    <ul>
          <li>
              <a href="#">设为首页</a>
              <div class="line2"></div>
              <a href="#">收藏网站</a>
              <div class="line2"></div>
              <a href="#">联系我们</a>
          </li>
          
           <div class="text2">
            <input type="text" class="text" />
            <input type="image" src="images/Button.gif" class="imag"/>
          </div>
       </ul>    
        
         
         
</div>

<!--导航-->
<div class="nav">
    <ul>
        <li>
           <a href="index.html" > 首页</a>
           
        </li>
        <li>
           <a href="summary.html" > 公司简介</a>
        
        </li>
        <li>
           <a href="Products.html" >公司发展</a>
          
        </li>
    
        <li>
           <a href="News.html" >最新消息</a>
      
        </li>
      
       
   
    </ul>
</div>

<!--banner-->
<div class="banner" style="width:1000px;margin:auto">
   <ul>

        <p><img src="images/banner2.gif" /></p>
        <p><img src="images/banner3.gif" /></p>
        <div><span class="current"></span><span></span><span></span></div>
     </ul>
 </div>
 <!--整体容器-->
 <div class="Container">
 
 <!--公司简介-->
       <ul class="summary_title">
           <b><img src="images/icon.gif" /></b>
           <p>公司简介</p>
           <span>COMPANY INTRODUCTION</span>
       </ul>
             
    <div class="summary">
            <b><img src="images/p3.gif" width="100" /></b>
            <ul>
               <p><span>中国贵州茅台酒厂（集团）有限责任公司：</span> 　中国贵州茅台酒厂(集团)有限责任公司(以下简称茅台集团)是国家特大型国有企业，总部位于贵州遵义市茅台镇，平均海拔 423 米，占地约1.5万亩，其中茅台酒地理标志产品保护地域面积为15.03平方公里，员工3.6万余人。              </p>
            
            </ul>               
   </div>
   
   
   
   
    <div class="Box">
<!--最新消息-->
        <div class="news">
                 <div class="news_title">     
                         <b><img src="images/icon2.gif" /></b>   
                         <span>最新消息</span>
                         <a>NEWS</a>        
                 </div> 
                 
                 <div class="news_text">
                         <a href="#">MORE&nbsp;&nbsp;</a>
                         <b><img src="images/p1.gif" width="200" /></b>      
                         <ul>
                              <li><img src="images/Point.gif" />茅台集团举行辛丑年（2021）“端午祭麦”仪式
                                   <span>[2021-6.17]</span>
                              </li>
                              <p>6月14日，农历五月初五，早上8时28分，茅台集团辛丑年(2021)“端午祭麦”仪式在“茅酒之源”酿酒工业遗址广场举行，这标志着辛丑年茅台酒制曲生产的开始。茅台集团党委委员、副总经理万波参加仪式。 </p>
                         </ul>
                 </div> 
                 
                 <div class="clear"></div> 
                 
        </div>
<!--联络我们-->
         <div class="Contact">
        
              <div class="news_title">     
                              
                                 <span>联络我们</span>
                                 <a>CONTACT US</a>              
              </div>
              
              <div class="Contact_text">
                      <b><p><input type="submit" value="在线咨询" class="sub" /></p></b>
                      <ul>
                          <span></span>
                      
                          <li>公司名称：中国贵州茅台酒厂（集团）有限责任公司</li>
                          <li>公司地址：贵州省仁怀市茅台镇</li>
                          <li>邮箱地址：service@moutaichina.com</li>
                          <li>邮政编码：564501 </li>
                      </ul>     
              </div> 
        </div>
    </div>

  <!--底部--> 
<div class="clear"></div>
<div class="bottom">
   <ul>
       <li><a href="">首页</a></li>
       <li class="line"></li>
       <li><a href="">公司简介</a></li>
       <li class="line"></li>
       <li><a href="">公司发展</a></li>
        <li class="line"></li>
       <li><a href="">最新消息</a></li>
       <li class="line"></li>
       <li><a href="">视频</a></li>
       <li class="line"></li>
   
   </ul>
        <p class="bottom_text">版权所有：茅台集团</p>

</div>





</body>
<script src="js/js.js" type="text/javascript"></script>
</html>

网页主体部分css代码 ：
 

@charset "utf-8";
/* CSS Document */
/*banner*/
.banner{width:100%;height:267px;  margin:0 auto; text-align:center; }
.banner ul{  height:267px;position: relative; overflow:hidden; margin:0 auto;} 
.banner img{width:100%;height:267px; text-align:center;}
.banner div{position: absolute;left:50%;bottom: 10px;width: 50px;height: 10px;margin-left: -25px;}
.banner p{position: absolute;top:0px;left: 0px;}
.banner div span{width: 8px;height: 8px;background: #ffa8a8;float: left;margin-right: 5px;border-radius: 10px;cursor: pointer;color: white; }
.banner div span:hover,.banner div span.current{;background: #ff0000;font-weight: bold;}



/*整体容器*/
.Container{ width:1000px; height:auto; margin: auto; }


/*公司简介*/
.summary_title{ width:100%; height:35px; margin-top:21px;}
.summary_title b{ float:left;}
.summary_title p{ float:left; font:15px "微软雅黑"; color:#161616; margin-right:8px;}
.summary_title span{float:left; font:12px Arial; color:#707070; margin-top:4px;}
.summary{ width:100%; height:130px; border-bottom:1px solid #d9d9d9;}
.summary b{ float:left;}
.summary ul{ width:870px; height:62px; margin-top:25px; float:right; line-height:27px; text-indent:2em; color:#333333;}
.summary ul p span{ color:#F00;}
.summary ul p a{ margin-left:280px; color:#F00;outline:none;}


.Box{ width:1000px; height:270px; margin-top:50px;}
/*最新消息*/
.news{ float:left; width:510px; height:232px; margin-left:10px; *margin-left:5px; }
.news_title{ width:400px; height:33px; }
.news_title span{font:15px "微软雅黑"; color:#161616; }
.news_title a{font:12px Arial; color:#707070; }
.news_text a{ float:right;font:10px Arial; color:#ff0008;}
.news_text ul{ width:310px; height:120px; float:right; }
.news_text b{ float:left;}
.news_text ul li{ color:#F00;  margin-top:5px;}
.news_text ul li span{ color:#6b6b6b; margin-left:25px;}
.news_text ul p{ color:#323232; line-height:18px; margin-top:25px;}
.news_text2 ul{ height:53px;}
.news_text2 ul p{ margin-top:13px;}
.news_text2 ul li span{}
.news_text2 ul  a{}
.news_text2 ul  a:hover{ color:#F00;}

/*联络我们*/
.Contact{ width:410px; height:256px; float:right;}
.Contact_text{ width:400px; height:208px;}
.Contact_text b{ background:url(../images/Beauty.gif) no-repeat; width:178px; height:216px;  position:relative; float:left; margin-left:10px;}
.Contact_text p{width:82px; height:27px; position:absolute; left:28px; top:142px;}
.Contact_text ul li{ line-height:27px; color:#333333;}
.sub{ width:82px; height:27px; background:none; background:url(../images/Button2.gif) no-repeat; border:none; color:#FFF; font:13px "微软雅黑";}

 网站全部代码可以微信联系：lcxxg666

# javascript # html # 前端
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

通过HPA+CronHPA组合应对业务复杂弹性伸缩场景

avatar 华为云开发者联盟
cover

FT-FMEA融合混沌演练，零售运营系统韧性架构在线验证实践

avatar 华为云开发者联盟
cover

如何使用Python和Plotly绘制3D图形

avatar 华为云开发者联盟