【DW网页设计制作】超简单的动漫主题网页制作教程——HTML+CSS海贼王作品展示网页

最新推荐文章于 2024-04-16 09:31:23 发布

STU学生网页设计

最新推荐文章于 2024-04-16 09:31:23 发布

阅读量1.2k

点赞数 6

分类专栏：网页设计文章标签： dreamweaver web课程与设计 web前端 web前端期末大作业

本文链接： https://blog.csdn.net/qq_38514421/article/details/127331358

版权

网页设计专栏收录该内容

1045 篇文章 53 订阅

订阅专栏

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业：【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】

📂文章目录

二、📚网站介绍
三、🔗网站效果
- ▶️1.视频演示
- 🧩 2.图片演示
四、💒 网站代码
- 🧱HTML结构代码
- 🏠CSS样式代码
五、🎁更多源码

二、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。



<!DOCTYPE html>
<html>
<head>
<link href="css/all.css" rel="stylesheet" media="all" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>火影忍者</title>
</head>
<body>
<div class="banner"><img src="images/banner.jpg"></div>
<nav class="menu">
  <ul class="center">
    <li><a href="index.html">网站首页</a></li>
    <li><a href="juesejieshao.html">人物介绍</a></li>
    <li><a href="juqingjieshao.html">剧情介绍</a></li>
    <li><a href="jingcaitupian.html">图片欣赏</a></li>
    <li><a href="denglu.html">登录</a></li>
    <li><a href="zhuce.html">注册</a></li>
  </ul>
</nav>
<div class="content">
  <div class="mart">
    <div class="bar">图片</div>
    <div class="pics scrollleft">
      <ul>
        <li>
          <p><img src="images/9.gif" width="300" height="180" /></p>
        </li>
        <li>
          <p><img src="images/0.jpg" width="300" height="180" /></p>
        </li>
        <li>
          <p><img src="images/1.jpg" width="300" height="180" /></p>
        </li>
        <li>
          <p><img src="images/2.jpg" width="300" height="180" /></p>
        </li>
        <li>
          <p><img src="images/3.jpg" width="300" height="180" /></p>
        </li>
        <li>
          <p><img src="images/4.jpg" width="300" height="180" /></p>
        </li>
        <li>
          <p><img src="images/5.jpg" width="300" height="180" /></p>
        </li>
        <li>
          <p><img src="images/6.jpg" width="300" height="180" /></p>
        </li>
        <li>
          <p><img src="images/7.jpg" width="300" height="180" /></p>
        </li>
      </ul>
    </div>
    <div class="clear"></div>
    <div class="bar">基本信息</div>
    <div class="pad"> 
      <p>电视动画《火影忍者》改编自日本漫画家岸本齐史的同名漫画，2002年10月3日在东京电视台系列全6局、岐阜放送首播，共220话；第二季《火影忍者疾风传》于2007年2月15日－2017年3月23日在东京电视台播出，共500话；累计全720话。      </p>
      <p>&nbsp;</p>
      <div> 故事成功地将原本隐藏在黑暗中，用世界上最强大的毅力和最艰辛的努力去做最密不可宣和隐讳残酷的事情的忍者，描绘成了太阳下最值得骄傲最光明无限的职业。</div>
      <p>系列续作《BORUTO -火影新世代- 》2017年4月播出。 </p>
      <p><br>
        这是一个忍者的世界。在Naruto的世界中，忍者这个职业，就像HunterXHunter里的猎人、One Piece里的海盗一样，是少年们的梦想！不过这回的主人公鸣人和自学成才的小冈、路飞不一样，他是木叶忍者村的忍者学校中科班毕业的哦（虽然毕业得很勉强，是被称为万年吊车尾的“差生”）。<br data-filtered="filtered">
        <br data-filtered="filtered">
        </p>
    </div>
  </div>
</div>
<footer class="end">
  <p>网页底部</p>
</footer>
</body>
</html>

🏠CSS样式代码


@charset "utf-8";

/* CSS Document */
ul,
li,
p {
	padding: 0;
	margin: 0;
	list-style: none
}

a {
	text-decoration: none;
	color: #000
}


html{ background:#ccc}
body {
	width: 1200px;
	margin: 0 auto;
	line-height:30px;
	font-size:16px;
	background-color: #fff;
}

.clear {
	clear: both
}

.menu li {
	list-style: none
}

.logo {
	position: absolute;
	top: 50px;
	width: 250px;
	height: 100px;
	margin-left: 40px
}

.banner {
	position: relative;
	height: 530px;
}

.banner img {
	width: 100%;
	height: 100%;
}

.menu {
	width: 100%;
	text-align: center;
	float: left;
	background: #000;
	margin-bottom:20px;
}
.menu:after{ content:''; display:block; clear:both}
.menu li a {
	color: #fff;padding: 15px 0px;
	display:block
}

.menu li {
	float: left;
	margin: 2px;
	background: #666;
	padding:0 30px;
	
	width: 136px
}
.menu li:hover{ background:#999966}
.right {
	float: right;
	width: 660px;
	padding: 20px
}

.left {
	min-height: 300px;
	float: left;
	width: 260px;
	padding: 20px
}

.content {
	background: #fff;

	width: 100%;
	clear:both
}
.btn{ background:#996666; border:none; color:#fff}
.end {
	clear: both;
	background: #333;
	color: #fff;
	padding: 30px 0;
	text-align: center;
}

.produce img {
	margin: 0 20px 20px 0
}

.produce {
	line-height: 30px
}

.pad {
	padding: 20px;
	display: block
}

.pics p {
	margin: 1px;
	text-align: center
}

.imglist {
	width: 840px;
	margin: 0 auto
}

.imglist li {
	float: left;
	width: 400px;
	margin: 10px;
	text-align: center
}

.scrollleft {
	margin: 0 30px
}

.scrollleft li {
	float: left;
	width:33.33%
}
.scrollleft li img{}
.news li {
	padding: 5px;
}

.title {
	text-align: center;
	color: #F00;
	padding: 10px
}

.fl {
	float: left
}

.js div {
	width: 100%;
	clear: both;
	margin-bottom: 20px;
	float: left
}

.js div img {
	float: right;
	border:#000 dashed 1px;
	margin-right: 20px
}

.msg>div {
	padding: 10px
}
.vid{ float:right; width:300px; height:200px; padding:30px 0; line-height:50px; font-size:24px; margin-right:20px; color:#fff; float:right ; background:#000; text-align:center}
.vid img{ width:100px; border-radius:100px; margin:0 auto }
.bar {
	border: #000 solid 1px;
	margin: 20px;
	font-size:20px;
	clear: both;
	
	color: #000;
	font-weight: bold;
	padding: 5px
}

.pad-two {
	color: #000;
}

.pad-two p {
	color: #000;
}

.pad-two img {
	width: 250px;
}

.box1sa {
	width: 400px;
	margin: 0 auto;
}

.box1sa label {
	display: block;
	text-align: left;
	
	font-size: 16px;
	color: #000000;
}

.box1sa input{
	width: 100%;
	height: 40px;
	margin: 30px 0;
}
.box1sa textarea{
	width: 100%;
	height:200px;
	margin: 30px 0;
}

五、🎁更多源码

1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、等!

📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻

关注博主即可阅读全文

STU学生网页设计

关注关注

6
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
1
评论
【DW网页设计制作】超简单的动漫主题网页制作教程——HTML+CSS海贼王作品展示网页

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
复制链接

扫一扫