为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 学生HTML动漫主题(人物)作业作品下载...

学生HTML动漫主题(人物)作业作品下载 个人人物博客网页设计制作 大学生个人网站作业模板 简单个人动漫主题网页制作

标签：
Html5 CSS3

网页作品介绍
本HTML静态网页作品采用DW制作，主题为华为热门产品，共10个页面，首页1页，二级图文页面1页，二级产品1页，三级产品详情6页，留言表单1页。 学生基础水平，未使用特殊技术，制作了留言表单页面，表单页面插入了背景图，美化了表单项。三级产品介绍页面直接调用的图片。 页面整体精美但!无技术难点，只是图片漂亮，适合中低要求。

图片描述
图片描述
图片描述

代码演示

<!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" />
  <!--添加链入式结束-->
</head>

<body><a name="1"></ a>
  <!--添加1号书签-->
  < a href=" ">我在找OA系统</ a><br />
  <!--添加head-->
  <div id="head">
    < img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/twoo.png" />
    <!--添加head_hf-->
    <div id="head_hf">
      < a href="#">首页</ a>
      < a href="list.html" target="_blank">内容</ a>
      < a href="content.html" target="_blank">详情</ a>
      < a href="#">介绍</ a>
      < a href="#">更多</ a>
    </div>
    <!--添加head_hf结束-->
  </div>
  <!--添加head结束-->
  <!--添加top-->
  <div id="top">

  </div>
  <!--添加top结束-->
  <!--添加banner-->
  <div id="banner">
    <!--添加banner_nr-->
    <div id="banner_nr">
      <!--添加banner_nr_left-->
      <div id="banner_nr_left">
        <h2>11月22日</h2>
        <p>上映时间</p >
      </div>
      <!--添加banner_nr_left结束-->
      <!--添加banner_nr_right-->
      <div id="banner_nr_right">
        <h2>历经6年倾力之作</h2>
        <p>敬请期待...</p >
      </div>
      <!--添加banner_nr_right结束-->
    </div>
    <!--添加banner_nr结束-->
  </div>
  <!--添加banner结束-->
  <!--添加conten-->
  <div id="content">
    <h2>神秘魔法从天而降，艾莎生世如何揭晓</h2>
    <p>让我们一探究竟...</p >
    <div class="one">
      < img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/two.jpg" />
    </div>
  </div>
  <!--添加conten结束-->
  <!--添加nav-->
  <div id="nav">
    <!--添加two-->
    <div class="two">
      <h2>相关视频</h2>
      <p>冒险旅程</p >
    </div>
    <!--添加two结束-->
    <!--添加vi-->
    <div id="vi">
      <video width="800px" height="500px" controls="controls" />
      <source class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="videos/jianji.mp4" type="video/mp4" />
    </div>
    <!--添加vi结束-->
  </div>
  <!--添加nav结束-->
  <!--添加sc-->
  <div id="sc">

  </div>
  <!--添加sc结束-->
  <!--添加footer-->
  <div id="footer">
    < img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/twos.png" />
    <!--添加footer_right-->
    <div id="footer_right">
      <span>< a href="#">关于网页</ a></span>
      <span>< a href="#">制作人员</ a></span>
      <span>< a href="#">联系作者</ a></span>
      <span>< a href="#1">返回顶部</ a></span>
    </div>
    <a name="d3"></ a>
    <!--添加footer_right结束-->
  </div>
  <!--添加footer结束-->
</body>

</html>

@charset "utf-8";
/*设置全局控制*/
  *{ margin:0; padding:0;}
/*添加body的背景图片*/
  body{ background-color:000;
        font-family:楷体;   /*给予body全体文字为楷体*/
  }
/*设置head开始*/
  #head{ height:60px;
		 background-color:#000;
  }
  #head_hf{ height:60px;
            width:600px;
	        background-color:#000;
		    float:right;   /*设置为右浮动*/
			line-height:60px;   /*行高为60px*/
  }
  #head_hf a{ display:block;
              width:120px;
			  height:55px;
			  float:left;   /*设置为左浮动*/
			  text-align:center; 
			  font-size:22px;
  }
  #head_hf a:link,#head_hf a:visited{
	  background-color:#000;
	  color:#CFB53B;
	  text-decoration:none;   /*消除下划线*/
  }
  #head_hf a:hover{ border-bottom:solid 2px #CFB53B;
                    background-color:#212121;
                    color:#FFF;
  }
/*设置head结束*/
/*设置top开始*/
  #top{ height:670px;
    	background-image:url(../images/44.jpg);
 	    background-size:100% 100%;   /*背景图片大小*/
        background-repeat:no-repeat;   /*背景图片不做任何平铺*/
  }
/*设置top结束*/
/*设置banner开始*/
  #banner{ height:150px;
		   margin:0 auto;   /*上下边距为0，且此盒子居中于父级*/
		   background-color:#212121;
  }
  #banner_nr{ width:842px;
              height:150px;
			  margin:0 auto;   /*上下边距为0，且此盒子居中于父级*/
			  background-color:#cfb53b;
  }
  #banner_nr_left{ float:left;   /*设置为左浮动*/
                   height:150px;
				   width:420px;
				   background-color:#212121;
  }
  #banner_nr_left h2{ text-align:center;   /*此盒子文本元素居中*/
                      color:#cfb53b;
					  font-size:50px;
					  margin-top:20px;
  }
  #banner_nr_left p{ color:#bdbdbd;
                     text-align:center;
					 font-size:36px;
  }
  #banner_nr_right{ float:right;   /*设置为右浮动*/
                    height:150px;
					width:420px; 
					background-color:#212121;
  }
  #banner_nr_right h2{ text-align:center;
                       color:#cfb53b;
					   font-size:50px;
					   margin-top:20px;
  }
  #banner_nr_right p{ color:#bdbdbd;
                      text-align:center;
					  font-size:36px;
  }
/*设置banner结束*/
/*设置content开始*/
  #content{ height:1200px;
            background-image:url(../images/010.jpg);
			background-attachment:fixed;   /*给予此背景图片固定位置*/
			background-size:100% 100%;   /*背景图片大小为100%*/
			background-repeat:no-repeat;   /*背景图片不做任何平铺*/
  }
/*对于one类设置*/
  .one{ width:920px;
        height:920px;
		margin:50px auto;
  }
 
  #content h2{ color:#FFF;
               font-size:40px;
			   text-align:center;
			   line-height:80px;   /*设置行高为80px*/
			   margin-bottom:30px;
  }
  #content p{ color:#bdbdbd;
              text-align:center;
              font-size:28px; 
			  margin-top:20px;
  }
/*设置content结束*/
/*设置nav开始*/
  #nav{ height:600px; 
        background-color:#000;
  }
  #nav h2{ color:#FFF;
           font-size:40px;
	       text-align:center;
		   line-height:60px;   /*行高设为60px*/
  }
  #nav p{ color:#bdbdbd;
          text-align:center;
          font-size:28px; 
  }
/*设置nav结束*/
/*设置视频*/
  #vi{ width:800px;
       height:500px;
	   margin:0px auto;
  }
  .two{ background-color:#212121;
        height:100px;
		width:100%;     
  }
  #sc{ height:800px;
       background-image:url(../images/55.jpg);
	   background-size:100% 100%;   /*背景图片大小为100%*/
	   background-repeat:no-repeat;   /*背景图片不做任何平铺*/
  }
/*设置footer开始*/
  #footer{ height:150px;
           background-color:#000;
  }
  #footer img{float:left;}
  #footer_right{ background-color:#000;
                 width:800px;
		         height:60px;
		         text-align:center;
				 line-height:60px;   /*设置行高为60px*/
				 float:right;   /*设置为右浮动*/
  }
  #footer_right a{ display:block;   /*将a标签转换为块级元素*/
                   width:200px;
				   height:58px;
				   
  }
  #footer_right a:link,#footer_right a:visited{
	     background-color:#000;
	     color:#CFB53B;
	     text-decoration:none;   /*清除下划线*/
  }
  #footer_right a:hover{ border-bottom:solid 2px #CFB53B;
                         background-color:#212121;
                         color:#FFF;
  }
  #footer span{float:left;}   /*设置为左浮动*/
/*设置footer结束*/
点击查看更多内容
发表于 2021.08.16 16:10， 共 7224 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

热心码农搬运工

Web前端工程师
手记
篇
粉丝
1
获赞与收藏
1

关注作者，订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消