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

热心码农搬运工
301 阅读4分钟

网页作品介绍

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

效果演示

1.jpg

2.jpg

3.jpg

4.jpg

5.jpg

代码演示

<!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 src="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 src="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 src="videos/jianji.mp4" type="video/mp4" />
    </div>
    <!--添加vi结束-->
  </div>
  <!--添加nav结束-->
  <!--添加sc-->
  <div id="sc">

  </div>
  <!--添加sc结束-->
  <!--添加footer-->
  <div id="footer">
    < img src="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>

css

@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结束*/\

代码目录

6.jpg

前端 零基础 入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)

web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程) 适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站

7.jpg

获取源码

❀ ~ 关注我，点赞博文~ 每天带你涨知识!
❀ 1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。
❀ 2.关注我~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
❀ 3.以上内容技术相关问题可以相互学习，可关注↓公众号 获取更多源码 !{web前端成长家园（webL0759）}

avatar
文章
阅读
粉丝