网站简介
网站主题
哆啦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> </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;}