大学生WEB前端HTML网页期末作业,哆啦A梦静态html网站网页—动漫网站模板

网站简介

网站主题

哆啦A梦资讯html网站,一共5个页面，分别首页、电影影片、发展历史、关于内容、留言分享页面页面

网站使用div+css布局页面，网站使用div,ul,li,a,p,h1,h2,h3,h4,form,input,button等标签，css使用margin，border，padding，font-weight，font-family，color，width，line-height，overflow，float
text-align，background，display等样式

网站是最简单的页面布局，任何编辑器都可以打开网站代码进行编辑，包括Dreamweaver，vs code，HBuilds，sublime，笔记本等软件都可以进行编辑

网站截图

网站div代码

<div class="con">
    <header>
      <div class="logo"> 小叮当--哆啦A梦 </div>
      <nav>
        <ul>
          <li><a href="index.html">网站首页</a></li>
          <li><a href="movie.html">电影影片</a></li>
          <li><a href="lishi.html">发展历史</a></li>
          <li><a href="jingdian.html">关于内容</a></li>
          <li><a href="liuyan.html">留言分享</a></li>
        </ul>
      </nav>

    </header>

    <div class="lunbo">

      <img src="./images/banner.jpg" width="100%">
    </div>

    <div class="main">
      <h2>A梦简介</h2>
      <p>《哆啦A梦》（日语：ドラえもん；英语：Doraemon；旧译叮当 / 小叮当）是由日本漫画家藤本弘（笔名藤子·F·不二雄）创作的漫画。</p>
      <p>
        漫画叙述了一只来自22世纪的猫型机器人——哆啦A梦，受主人野比世修的托付，回到20世纪，借助从四维口袋里拿出来的各种未来道具，来帮助世修的高祖父——小学生野比大雄化解身边的种种困难问题，以及生活中和身边的小伙伴们发生的轻松幽默搞笑感人的故事。
      </p>
      <p> 作品自1970年1月开始在《小学1-4年级生》杂志中开始连载，并且大受小学生欢迎。《哆啦A梦》系列的篇幅浩繁，由原作者亲自执笔的短篇漫画共1345回（分为45卷单行本），大长篇漫画16回
        ，《哆啦A梦Plus》6卷，在藤本弘去世后，又由其弟子创作了大量漫画，至今仍有新作品在不断推出。</p>
    
      <p>
        作品自1970年1月开始在《小学1-4年级生》杂志中开始连载，并且大受小学生欢迎。《哆啦A梦》系列的篇幅浩繁，由原作者亲自执笔的短篇漫画共1345回（分为45卷单行本），大长篇漫画16回  ，《哆啦A梦Plus》6卷，在藤本弘去世后，又由其弟子创作了大量漫画，至今仍有新作品在不断推出。
      </p>
    </div>
    <p>&nbsp;</p>
    <h2>小叮当照片欣赏</h2>
    <div class="main_list">
      <ul>
        <li><a href="#"><img src="images/a5.jpg" /></a></li>
        <li><a href="#"><img src="images/a8.jpg" /></a></li>
        <li><a href="#"><img src="images/b5.jpg" /></a></li>
        <li><a href="#"><img src="images/a7.jpg" /></a></li>
        <li><a href="#"><img src="images/b6.jpg" /></a></li>
        <li><a href="#"><img src="images/b7.jpeg" /></a></li>
      </ul>
    </div>
  </div>

  <footer>
    <p>版权所有：小叮当--哆啦A梦 </p>

    <p>All Rights Reserved</p>
  </footer>

网站css代码

body{ background:url(../images/bg.jpg) top center fixed no-repeat; background-size: 100% 100%;}

/*----------------------con-------------------------*/
.con{ width:1000px; padding:20px; height:auto; margin:10px auto; background:#eee; background-color:rgba(255,255,255,0.8);-moz-border-radius:10px;border-radius:10px;}
/*----------------head-----------------*/
header{ width:1000px; height:auto; margin:auto;}
.logo{ width:280px; height:70px; float:left;font-size:36px; line-height:70px; color:#555; font-family:楷体;}


nav{ width:700px; height:40px;  float:right;margin:10px auto;background-color:#888888;-moz-border-radius:5px;border-radius:5px;}
nav ul{ padding-left:30px;}
nav li{ float:left; padding:5px 25px; }
nav li a{ font-size:18px; line-height:30px; color:#eee; }
nav li a:hover{ color:#fff; text-decoration:none;}
nav li:hover{ background-color:#900}
nav li:hover a{ color:#fff;}

.lunbo{ width:1000px; height:400px; margin:5px auto; overflow:hidden;-moz-border-radius:5px;border-radius:5px;}

/*----------------main-----------------*/
.main{ width:1000px; height:auto; margin:10px auto; font-size:14px; line-height:24px; color:#555;}
.main h2{font-size:18px; line-height:46px; margin-bottom:10px; color:#888888;}
.main h2 a{font-size:18px; line-height:46px; margin-bottom:10px; color:#888888;}
.main p{font-size:14px; line-height:24px; color:#555; text-indent:2em;}
.main_list{ width:1000px;  overflow: hidden; }
.main_list li{ width:150px;height:100px; float:left; margin:6px; border:2px solid #fff;}
.main_list li:hover{border:2px solid #0d66ae;}
.main_list li img{ width:150px; height:100px; }



.zhuce{width:580px; overflow: hidden; margin:auto; font-size:16px; color:#222;}
.zhuce_info{width:580px; height:30px; margin:10px auto;}
.input{ width:450px; height:20px; padding:5px; float:right; border:1px solid #333; font-size:14px; color:#333;}
.subout{width:400px; height:50px; margin:auto; font-size:18px; color:#222;}
.sub{width:120px; height:25px; padding:5px; margin:10px; float:left; background-color:#025395; text-align:center; }
.sub:hover{ background-color:#000;}
.sub a{ font-size:18px; color:#fff;}